This page looks best with JavaScript enabled

Hugo 换肤记

 ·  ☕ 2 min read

更新记录

时间 内容
2021-01-21 更新主题 && 初稿 && 查找资料
2021-01-25 完善文章
2021-01-27 微信图标
2021-01-29 TOC目录

主题

最近搜到了 cleanwhite 这个主题, 这个主题移植自 Hexo 的 hux 主题。

简洁大气,非常的适合做Blog,由此又起了换主题的心思。

运行起来

1
2
3
4
5
6
7
8
# 克隆主题源码 至themes
➜  git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/cleanwhite

# 拷贝示例config
➜  cp themes/cleanwhite/exampleSite/config.toml /root/blog/

# 生成静态页cd /root/blog/ && ./hugo -b http://fage.io

未完成目标

关于博客有哪些是我需要的功能

  • 文章目录 (刚需)
  • TOP按钮 (刚需)
  • 站内搜索 (刚需)
  • 文章列表 && 分类 (重要)
  • Kindle 笔记
  • gitbook 笔记
  • K8s 知识图谱 + 站内导航
  • 留言 (次要功能)

TOC 改造

cleanwhite 虽然有目录 (Table of Contents) 功能,但他的目录是在文章顶部,既不美观也不方便,我需要的是侧边栏的目录,文章结构一目了然,可以随时点击跳转,阅读的便利性无可替代。

移除原样式

目录控制代码在 themes/cleanwhite/layouts/_default/single.html

1
2
3
4
5
6
7
8
9
# 移除原 TOC 样式
<!--
                {{ if not (eq (.Param "showtoc") false) }}
                <header>
                    <h2>TOC</h2>
                </header>
                {{.TableOfContents}}
                {{ end }}
-->

新样式

themes/cleanwhite/layouts/_default/single.html 中做如下修改
引入目录模板

1
2
3
{{ if .Site.Params.toc }}
    {{ partial "toc.html" . }}               <!-- 目录 -->
{{ end }}

目录模板

themes/cleanwhite/layouts/partials/ 目录中新建 toc.html 模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- toc.html -->
<!-- ignore empty links with + -->
{{ $headers := findRE "<h[1-4].*?>(.|\n])+?</h[1-4]>" .Content }}
<!-- at least one header to link to -->
{{ if ge (len $headers) 1 }}
    {{ $h1_n := len (findRE "(.|\n])+?" .Content) }}
    {{ $re := (cond (eq $h1_n 0) "<h[2-4]" "<h[1-4]") }}
    {{ $renum := (cond (eq $h1_n 0) "[2-4]" "[1-4]") }}

    <div class="side-catalog">
        <hr class="hidden-sm hidden-xs">
        <h5>
            <a class="catalog-toggle" href="#">CATALOG</a>
        </h5>
        <ul class="catalog-body">
            {{ range $headers }}
                {{ $header := . }}
                {{ range first 1 (findRE $re $header 1) }}
                    {{ range findRE $renum . 1 }}
                        {{ $next_heading := (cond (eq $h1_n 0) (sub (int .) 1 ) (int . ) ) }}
                        {{ $anchorId := (replaceRE ".* id=\"(.*?)\".*" "$1" $header ) }}  <!-- 标题ID -->
                            <li class="h{{ $next_heading }}_nav" >
                                <a href="#{{ $anchorId }}" rel="nofollow">
                                    {{ $header | plainify | htmlUnescape }}
                                </a>
                            </li>
                    {{ end }}
                {{ end }}
            {{ end }}
        </ul>
    </div>
{{ end }}

微信图标不显示

底部图标 修改 themes/cleanwhite/layouts/partials/footer.html 文件
关于图标 修改 themes/cleanwhite/layouts/partials/sidebar.html 文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
        <!-- Huabing: add wechat QR code link -->
        {{ with .Site.Params.social.wechat }}
        <li>
            <a target="_blank" href="{{ . | relURL }}">
            <span class="fa-stack fa-lg">
                <i class="fas fa-circle fa-stack-2x"></i>
                <i class="fab fa-weixin fa-stack-1x fa-inverse"></i>  # 将 fa-wechat 改为 fa-weixin
                </span>
            </a>
        </li>
        {{ end }}

参考文章

Support the author with
alipay QR Code
wechat QR Code

fage
WRITTEN BY
fage
DevOps

What's on this Page