hugo主题开发学习笔记

hugo主题开发学习笔记

前言

2021 update:本来是 2020.4.18 的文章,为了排的靠前一点所以强行改到 21 年了
刚开始接触到hugo,感觉没什么用。后来在@ketchuppp学长的课上感受到了hugo快速的部署速度,而且一直以来也想重构一下博客,因此决定写一个hugo博客主题,将博客迁移到hugo。
预览:https://t.xjzsq.cn

参考资料

https://gohugo.io/documentation/
https://hugo.aiaide.com/post/%E8%87%AA%E5%AE%9A%E4%B9%89hugo%E4%B8%BB%E9%A2%98-%E6%A6%82%E8%BF%B0/
https://sakura.hojun.cn/2018/12/12/Hexo-Theme-Sakura%20-%20%E5%89%AF%E6%9C%AC%20(3)/
https://io-oi.me/tech/hugo-vs-hexo/
https://github.com/litten/hexo-theme-yilia
https://www.jb51.net/web/715222.html
Go 语言 常用字符串函数的使用_Fe_cow的博客-CSDN博客

开发进度

  • 导航栏
    • 网站名 :pencil2:
    • 主要选项
    • 选项选中效果及居中
    • 搜索框
    • 社交媒体(图标缓存预定)
    • 移动端适配 :pencil2:
  • 侧边工具栏
    • 夜间模式按钮
    • 一键回顶
    • 换皮
    • 设置模态框
      • 夜间模式开关
      • 导航栏常驻开关
      • 字体设置 :pencil2:
      • 主题色设置 :pencil2:
      • 滤镜设置 :pencil2:
      • 圆角调整 :pencil2:
      • 樱花/细雪/红叶等飘落效果开关
      • 三角形效果(参考:solstice23 – Blog
    • 百分比进度
  • 星空背景与普通背景切换
  • 切换 scss
  • 首页网站标题巨幕(及副标题、箭头等)​​
  • 文章排列方式、卡片样式​ :pencil2:
  • 友链展示方式、卡片样式​ :pencil2:
  • 页底版权栏 ​​
  • 珂朵莉看板娘
  • 文章页侧边目录
  • 归档时间线
  • $LaTeX$​ 公式支持 ​​
  • 文章密码支持
  • 使用 FancyBox 展示图片
  • 评论系统(gitment、valine和自建评论整合,发布源三方可选)
  • 番组、游戏等
  • 首页视频播放、音乐播放器
  • PJAX与懒加载
  • 移动端适配
  • SEO优化等
  • 使用 swiper 库生成 ppt 页面

规划

  1. 支持夜间模式开关。
  2. 顶部导航栏部分参考sakura/spiritx(https://spiritx.xyz ),期望效果:背景透明常驻顶部只显示左侧blog名和右侧搜索框,鼠标悬停(:hov)显示白色背景、边缘阴影(box-shadow)和选项。
  3. 背景支持切换:动态星空(https://help.finereport.com/doc-view-3180.html )或静态图片。
  4. 保留当前首页标题、副标题及下箭头设计,增加类似Sakura主题的首页视频功能。
  5. 引入音乐播放器、珂朵莉看板娘
  6. 搜索功能采用algolia/自建站内搜索
  7. 依然采用分类+tag,
  8. 文章侧边目录,参考sakura(https://2heng.xin/2017/09/19/pixiv/ )和ZSQ’s Blog,具体显示方式待定。
  9. 归档时间线参考Sakura(https://2heng.xin/time-series/ )
  10. 评论采用gitment、valine和自建评论系统多模式,整合多方评论内容的显示、回复(如果可行)。
  11. 整篇文章密码+文章部分密码
  12. latex公式支持
  13. 多字体、异步加载
  14. 可选择ppt页面模板,可以使用swiper库,支持生成类似 B站banGDream手游官网 这样的幻灯片网页

相关计划

  1. 一套GUI管理软件(即将夭折)
  2. 自动化完成:重新生成、精简字体、提交不同存储器的操作。

知识记录

HTML/CSS/JS

CSS自定义属性

参考链接:CSS自定义属性怎样实现主题切换?使用CSS自定义属性(变量)
CSS自定义属性可以通过修改不同变量来实现主题切换,除了IE老古董不支持外,其他主流浏览器都支持。
使用方法:定义CSS伪类:root,在其中添加以--开头的属性来定义自定义属性,定义后可以在任何位置使用var(--xxx)来引用自定义属性。另外,可以用var(--xxx,[默认值])来指定自定义属性的默认值。

伪类

伪类必须有content=""属性才能正确显示!

transition

使用 CSS transitions
transition

box-shadow

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

css:hover状态改变另一个元素样式的使用

如果你#b元素是#a元素的子元素,可以直接通过 #a #b {…}这种方式定义CSS样式来控制

#mapDiv:hover #buttonOnMap{
    background-color: rgba(43, 143, 243, 0.63);
}

#a与#b是亲兄弟关系,有相同的父节点,且#b跟#a紧临,可以通过 #a + #b{..}来控制#b里面的元素样式;

#buttonFlag:hover + #buttonOnMap{
    background-color: rgba(43, 143, 243, 0.63);
}

css可能用到的

css3实现卡片翻转效果

Hugo

Go Template

hugo中使用.代表当前的域,可以通过在.前加$符号来使域重置为最上层:

{{ range .Site.Menus.main }}
    <li><a href="&#123;&#123;$.Site.Params.rootURL&#125;&#125;&#123;&#123;.URL&#125;&#125;">&#123;&#123;.Name&#125;&#125;</a></li>
&#123;&#123; end &#125;&#125;

本例中因为使用了range所以.代表.Site.Menus.main,为了访问到.Site.Params.rootURL,因此在此之前加了$符号。

Hugo 使用 SCSS

为了能支持把 rootURL (比如 \blog\)加到样式文件引用的资源(比如字体、背景图片等)的 URL 里面,之前一直在摆弄 css 变量,结果发现 css 变量并不能解决问题,最近突然发现 meme 主题是通过预编译 scss 实现的,而且 scss 迁移并不需要任何成本,完全达到了我的要求,于是全面迁移到 scss 。
Tips:在 Hugo 中,使用 scss 需要 extended 版本的文件,也就是 发布页 名字含有 extended 的文件(windows平台下的对应 hugo_extended_version_Windows-64bit.zip ),解压后即可使用,为了能够完全支持 mathjax,我也同步发布 Windows 平台下的 extended 版本,详见我的 Hugo 发布页。(你问我为什么不提 pr ?我提了但是 hugo 官方的人告诉我不符合 CGO 规则…)
因为使用了 Hugo Pipes 技术,所以css文件必须放在 /assets//themes/theme_name/assets目录下(当然支持在 config 中修改 assets 文件夹的位置),然后在 html 模板文件中使用下面的代码插入:(假设文件为 assets/css/chtholly.scss,且网站根目录为 .Site.Params.rootURL

&#123;&#123; $style := resources.Get "css/chtholly.scss" | resources.ExecuteAsTemplate "css/chtholly.scss" .| toCSS | minify | fingerprint &#125;&#125;
<link rel="stylesheet" href="&#123;&#123; .Site.Params.rootURL &#125;&#125;&#123;&#123; strings.Trim $style.RelPermalink `/` &#125;&#125;" integrity="&#123;&#123;$style.Data.Integrity&#125;&#125;">