Skip to content

[软技能] 第79天 一个项目写很多的纯静态页面，有公共的部分（例如头和尾）你是怎么提取公用的？ #571

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
haizhilin2013 opened this issue Jul 3, 2019 · 14 comments
Open

[软技能] 第79天 一个项目写很多的纯静态页面，有公共的部分（例如头和尾）你是怎么提取公用的？ #571

haizhilin2013 opened this issue Jul 3, 2019 · 14 comments
Labels
软技能 软技能

Comments

@haizhilin2013
Copy link
Collaborator

haizhilin2013 commented Jul 3, 2019 •
edited
Loading

第79天 一个项目写很多的纯静态页面，有公共的部分（例如头和尾）你是怎么提取公用的？
例如：我现在有20个纯静态的html文件，它们都有公用的头和尾，在写静态页面时，如果头部或者尾部有修改，我们要修改20个文件（当然可以做替换），有没有办法把公共的提取出来，只修改一处即可。
@haizhilin2013 haizhilin2013 added the 软技能 软技能 label Jul 3, 2019
@xiaowang1314
Copy link

所有公用部分模块化，模板化

@971389117
Copy link

组件化，模块化，我是按 vue 那样的

@encountermm
Copy link

1.将公用部分处理为js文件
2.iframe

@xiaoxie610
Copy link

组件式开发

@AnsonZnl
Copy link
Contributor

AnsonZnl commented Jul 4, 2019 •
edited
Loading

可以改为模板语言比如php、ejs这种，公共部分直接include插入就行。

@xxf1996
Copy link

xxf1996 commented Jul 4, 2019

如果不用第三方工具的话，将公共头尾放在一个文件内，然后使用iframe引入主体内容是一个不错的选择；

@Kntt
Copy link

Kntt commented Jul 4, 2019

这个问题其实看看各种静态网站生成的lib就好办了， 就行hexo， hugo， 里面的处理都很棒。只要想到的地方都可以模块化

@nowherebutup
Copy link

1.写成js,插入
2.组件化开发

@forever-z-133
Copy link

啊这个我还真干过，

  1. 用 jsp 或 php 那样的 include 插入，但需要基于后端
  2. 首尾加载完成后 ajax 一个 html 文件 append 过来
  3. 用 node 起个服务，监听 koa-router 同样 include 插入，build 的时候可以前端完成

@lucahan
Copy link

lucahan commented Jul 4, 2019

不依赖其他的话，感觉使用iframe最好了

@zyronon
Copy link

zyronon commented Jul 7, 2019

  1. iframe：我最开始用的就是这种，方便省事
  2. wekpack引入公共模块：${require('html-loader!../../components/header/header.html')}
    以上两种都是纯前端的。
    另外现在写静态表面也可以用webapck打包呀。只处理sass和引入公共模块就行了，爽的一比

@seho-dev
Copy link

shadowdom
之前的题提到过，webComponents的一种实现

@margox
Copy link

margox commented Aug 13, 2020

nginx的ssi可以直接用，爽歪歪

@smile-2008
Copy link

所有公用部分模块化，模板化

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
软技能 软技能
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests