hugo

简介

hugo是使用golang开发的一个静态开源blog生成工具，可结合github page方便完成个人博客站点的搭建；

安装

下载地址：https://github.com/gohugoio/hugo/releases

hugo命令用法

1
2
3
## 初始化hugo目录
$ hugo new site mySite
$

github 自动发布

github action 支持自动定义 action
增加 .github/workflows/gh-pages.yml
其中 _script/update_hugo_header.sh是更新 markdown 头文件标签的脚本，如果不需要，可以去掉；

 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
33
34
35
36
37
# .github/workflows/gh-pages.yml`
name: github pages

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2
        with:
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.88.1"
          extended: true

      - name: Build
        run: |
          cd _hugo  
          find content -type l | xargs -n1 -I {} ../_script/update_hugo_header.sh {}
          hugo --minify          

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          external_repository: ${{ secrets.PAGE_REPO }}
          personal_token: ${{ secrets.PAGE_PUSH_TOKEN }}
          publish_dir: _hugo/public
          publish_branch: gh-pages

增加上述文件后，每次执行 git push 到 github 后，会自动发布 git-pages blog；

增加看板娘

下载下面 3 个 js 到 <hugo>/static/js/l2d/目录；

1
2
3
4
cd static/js/l2d
wget https://justice.bj.cn/js/l2d/L2Dwidget.min.js
wget https://justice.bj.cn/js/l2d/L2Dwidget.0.min.js
wget https://justice.bj.cn/js/l2d/L2Dwidget.init.js

修改 <hugo>/config.toml文件，增加如下配置：

1
2
3
4
5
6
[params]
customJS = [
    'l2d/L2Dwidget.min.js',
    'l2d/L2Dwidget.0.min.js',
    'l2d/L2Dwidget.init.js'
]

解决 gitee 图床防盗链问题

gitee 图床增加防盗链功能, 会根据 http 的请求头 referer 字段来对非 gittee 域名增加重定向功能，防止盗链。解决方法如下：

在主题所在的网页模板 head.html中增加如下一行：

1
<meta name="referrer" content="no-referrer" />

增加本地搜索

基本原理

hugo在生成public静态网页时, 增加配置, 生成索引所需的json格式输出文件;
引入fuse.js库, 利用上步生成的json文件建立内存索引;
调用fuse.js的search()函数在索引上进行搜索;

hugo meme主题增加搜索步骤

修改配置文件$HUGO_SITE/config.toml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# 编译输出中, home增加JSON格式的输出文件, 用于生成索引
[outputs]
    home = ["HTML", "JSON", ...]

# menu中增加搜索菜单入口
[menu]
    ...
    [[menu.main]]
        weight = 16
        identifier = "fuse-search"

# params中开启fuseSearch
[params]
    ...
    # local search
    [params.search.fuseSearch]
        enable = true

新增索引生成输入json文件:
1. $HUGO_SITE/layouts/_default/index.json
js修改:
1. $HUGO_SITE/theme/meme/assets/js/fuse.min.js: fuse.js库文件;
2. $HUGO_SITE/theme/meme/assets/js/fuse-search.js: hugo fuse search文件;
修改$HUGO_SITE/theme/meme/layouts/partials/scripts.html, 将上述新增的js文件引入:
1 2 3 4
{{- if .Site.Params.search.fuseSearch -}} {{- $scripts = union $scripts (slice "js/fuse.min.js") -}} {{- $scripts = union $scripts (slice "js/fuse-search.js") -}} {{- end -}}

html修改:

增加html文件$HUGO_SITE/theme/meme/layouts/partials/components/fuse-search.html

修改$HUGO_SITE/theme/meme/layouts/_default/baseof.html, 在block main之后增加如下语句, 引入上面的fuse-search.html;

1
2
3
{{ if .Site.Params.search.fuseSearch }}
   {{ partial "components/fuse-search.html"  (dict "Context" . "Class" "dark") }}
{{ end }}

在菜单栏上增加本地搜索打开按钮. 修改$HUGO_SITE/theme/meme/layouts/partials/menu.html, 在菜单栏末尾增加如下代码:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{{ else if eq .Identifier "fuse-search" }}
    {{ if and (eq $.Site.Params.headerLayout "flex") (or $.Site.Params.search.fuseSearch) }}
        {{- $iconName := (string .Post) -}}
          <a id="search-btn" href="#" class="menu-item search-item" data-target="search-modal">
          <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 512 512"
             height="16" width="16"
             class="search-icon"
             data-type="search"
          >
             <path fill="currentColor"
                d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
           </svg>
         </a>
    {{ end }}

css配置:
1. 新增scss文件$HUGO_SITE/theme/meme/assets/scss/components/_fuse-search.scss;
2. 修改$HUGO_SITE/theme/meme/assets/scss/main.scss文件, 将_fuse-search.scss文件引入;
1 2 3 4 5
... {{ if and (eq .Site.Params.headerLayout "flex") (or .Site.Params.search.fuseSearch) }} @import "components/fuse-search"; {{ end }} ...

适配dark模式修改$HUGO_SITE/theme/meme/assets/js/dark-mode.js, 增加dark-mode适配代码:

1
2
3
4
5
6
7
8
9
function changeMode() {
    ...
    if (isDark) {
        this.document.body.classList.add("dark");
    } else {
        this.document.body.classList.remove("dark");
    }
    ...
}

hugo

相关文章：