青い記憶

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博客

背景参考
- 凪のあすから (nagiasu.jp)（canvas气泡效果）
- 色づく世界の明日から　公式サイト (iroduku.jp)（canvas彩雾效果）
- TVアニメ「ご注文はうさぎですか？ BLOOM」公式サイト (gochiusa.com)（canvas飘花效果）
- CHUNITHM NEW (チュウニズムニュー)｜セガ新作音ゲー (sega.jp)（CSS实现）
- アニメ「イロドリミドリ」公式サイト (sega.jp)（canvas另一种飘花效果）
动效&过场动画
- TVアニメ「神様になった日」公式サイト (kamisama-day.jp)
- INTRODUCTION // TVアニメ『ウマ娘プリティーダービー Season 2』公式サイト (anime-umamusume.jp)
- アニメ「イロドリミドリ」公式サイト (sega.jp)（图片模糊->清晰&聚光灯->黑白->彩色特效）

开发进度

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

规划

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

知识记录

HTML/CSS/JS

JS 删除元素（filter 与 splice）

filter 性能高于 splice，因此应尽量使用 filter 删除元素

下面 x 表示需要删除某个元素的数组，p 表示待删除的元素，index 为删除元素的位置 (0-index)，num 为删除元素的个数

x = x.filter(item => item !== p)
x.splice(index, num)

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="{{$.Site.Params.rootURL}}{{.URL}}">{{.Name}}</a></li>
{{ end }}

本例中因为使用了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）

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

2024

hugo主题开发学习笔记

hugo主题开发学习笔记

前言

参考资料

开发进度

规划

相关计划

知识记录

HTML/CSS/JS

JS 删除元素（filter 与 splice）

CSS自定义属性

伪类

transition

box-shadow

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

css可能用到的

Hugo

Go Template

Hugo 使用 SCSS