hugo 主题 hextra 个性化定制记录
本文主要记录 hugo 主题 hextra v0.11.0 的个性化定制记录,包括:首页显示博客,搜索优化,代码高亮优化,以及页面调整;
hextra 首页展示 blog
hextra 主题的首页展示的是自定义内容,但我更希望直接展示 blog,在 layouts 下新增:hextra-home.html
|
|
该文件来自主题 layouts/blog/list.html 我只改了第 3, 4, 11, 31 行,第 3,4 行原始内容如下:
我改为了:
我删除了原始的第 11-13 行,新增了:
{{ $paginator := .Paginate (sort (where .Site.RegularPages "Section" "blog") "Date" "desc") }}
原始 11-13 行内容如下:
原始的第 33 行如下:
{{ partial "components/blog-pager.html" $paginator }}
我改为了:
{{ partial "components/blog-pager.html" . }}
components/blog-pager.html 内容如下:
|
|
该文件来自 hugo-next-theme 主题,assets/css/custom.css 里需要新增:
|
|
官方版本博客的分页展示只有下一页、上一页的导航,上述版本来自 next 主题,样式更美。
最后 utils/page-width 来自官方低版本,内容如下:
|
|
hextra 博客页面调整
新增 layouts/blog/list.html 修改为空内容即可,避免重复生成博客列表;
新增 layouts/blog/single.html 如下:
|
|
我主要改了 3、7 两行,新增了 9-13 行;第 3 行原始内容为:
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
我将第二个 true 改为了 false
第 7 行我直接注释掉了;
9-13 行为显示 tag,我比较喜欢这个功能;
hextra docs 页面微调
新增 layouts/docs/single.html 如下:
|
|
原始内容第 8 行没有 style,导致 title 和面包屑导航距离太近;
hextra 手机 sidebar 调整
由于魔改的缘故,手机上面,sidebar 不显示导航,我改了 layouts/partials/sidebar.html, 修改后如下:
|
|
修改内容为新增第 28、158-175 行;
hextra 代码块优化
这个具体看:hugo 仅当代码块超过 1 行时显示行号
hextra 支持搜索 keywords
在 assets 目录下新建 json 目录,然后新建一个 search-data.json 文件,具体目录结构如下:
-
- search-data.json
内容如下:
|
|
第 18-20 行为我新增代码,其余均是主题文件源码。
hextra 汉化
在 i18n 目录下新建 en.yaml 文件,内容如下:
|
|
内容来自官方的中文翻译,由于为了搜索,我们网站的语言设置的是英文;
hugo 日期格式调整
修改 hugo.yaml,新增:
本站完整的 hugo.yaml 配置如下:
|
|