hugo主题开发学习笔记

hugo主题开发学习笔记

前言

刚开始接触到hugo,感觉没什么用。后来在@ketchuppp学长的课上感受到了hugo快速的部署速度,而且一直以来也想重构一下博客,因此决定写一个hugo博客主题,将博客迁移到hugo。

参考资料

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

规划

  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. 。。。

相关计划

  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

变量规则

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

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

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