都2022年了,是时候进行现代化改造了!
基于以下原因,首先选择了Hugo作为底层框架:
- 要部署在Github Pages上,且方便SEO优化
- 方便进行文章编辑生成,最好是基于markdown,不用再加入后台管理
- 完善的多语言支持
- 生态丰富,社区活跃
在此基础上,我们还想加入更多的现代特性,比如tailwind, react, vue,这就需要联动其他的打包工具。 这里我们选择了Vite,Webpack不符合我们的现代化目标。
随着Github Action的普及,也是时候开始CI/CD了。这里实现的是,无需手动上传build后产出,就能自动打包并部署到Github Pages上。
- hugo-extended,该版本支持scss
- vite
hugo在生成静态网页时,会处理html中的scss:
- 对模板中的scss进行默认处理
- 对自定义localscss进行自定义处理(见配置文件)
vite用于对tailwind(调用postcss),和其他现代框架进行处理
master分支放的是项目代码,gh-pages分支是自动打包后产物
如果你使用windows,请手动去github上master分支下载最新的vite-hugo-plugin(或确保版本>3.0.5)并替换node_modules里的
npx http-server -p 8888
-
vite支持scss(sass),但是本项目还是采用hugo将scss转化css后引入的方式(即不使用vite进行转换)。 原因是vite自带postcss-import,当在html中引入scss文件时,
<style lang="scss" scoped> @import "/assets/localscss/members.scss"; </style>
会自动内联样式。一旦样式增加会导致体积不可控。 另一个写法:
<link rel="stylesheet" href="/css/members.css" />
这个写法也能用,但是并没有充分利用hugo或者vite的特性,还得额外在
package.json
配置sass
的监听才能转换成css,过于复杂。"dev:sass": "sass --watch localscss:static/css"
最终选择了用hugo的特性,实例可见
layouts\shortcodes\display_members.html
-
本项目基础主题用的是loveit,位于themes文件夹,如果想修改,请将需要修改的文件按原相对路径放置到项目根目录中,就像本项目这样,不应直接改动原主题
推荐在参与开发前浏览以下链接
主要参考
https://cloud.tencent.com/developer/article/1932812
https://functional.style/hugo/general/tailwind/
https://github.com/cromozooom/playground-hugo/tree/q69810554
https://medium.com/gumgum-tech/faster-development-experience-with-vite-hugo-and-preact-c08cbcfce5fb
https://zhuanlan.zhihu.com/p/568764664
https://stackoverflow.com/questions/47749732/hugo-include-node-module-in-static-js
次要参考
https://juejin.cn/post/6854573220306255880
https://stackoverflow.com/questions/37261016/npm-plugin-onchange-does-not-recognize-scss-files-changes
2022.10.1 Wey
- 迁移到Hugo上,并进行现代化改造,加入CI/CD
2018.7.9 流星
- (index.html)Header,Banner,Section-One完工
- (index.html)同时将布局策略改为Flex和padding和margin,放弃传统position
2018.7.10 流星
- (index.html)完善Navbar,Section-One对手机的兼容
- (index.html)Section-Two整体设计完工,但未实现对手机的兼容
2018.7.11 流星
- (index.html)完善Section-Two对手机的兼容
2018.7.12 秋风
- (index.html) Code-Review (确保代码缩进无误)
- (index.html) 页面加载速度优化(CSS/JS Preload)
- (index.html) 修复 Section1 背景图片在部分手机上显示超出页面范围的Bug
- (index.html) 设置导航栏固定在页面上方
2018.7.12 流星
- (index.html) Footer完工和完成对手机的兼容
- (members.html) 成员页面正式开始设计,初步设计完成
2018.7.13 秋风
- (index.html) 修复Section 1手机显示靠右, 难看的问题
- (ALL) 动态加载Footbar完毕
- (members.html) 动态加载成员内容完毕
- (index.html) 动态加载首页Slides完毕
- (newsdisplay.html) 动态新闻页面加载(Implemented 2018-7-14)
2018.7.12 流星
- (index.html) 完成新闻版块
2018.7.14 秋风
- (newsdisplay.html) 动态新闻加载完毕
- (index.html) 动态新闻列表加载
- (members.html) 部分成员信息更改
2018.7.15 秋风
- (common_footer.html) 完成底部Footer内容
- (cooperation.html) 完成合作页面
- (js\homePageNewsListDisplay.js) 设置新闻列表加载顺序为从最新到最旧
2018.7.20 秋风
- (index.html) 增加首页语言检测跳转