Hugo搭建个人博客（2）

书接上回，之前简单说明了Hugo的安装使用流程，不过就此打住的话，未免有些单薄。

要想保证一个良好地创作体验，能够专注于输出内容，在前期多花费一些时间，后续才能有事半功倍的效果，故本期会深入介绍优化方案。

在此要感谢Sulv大佬的鼎力相助，大佬的博客：https://www.sulvblog.cn/

Hugo目录介绍

首先介绍一下Hugo新建网站时，会生成的目录及其作用，为之后的操作提供一个大方向指导。一个用hugo生成的网站包含以下文件和文件夹：

archetypes: 储存.md的模板文件，该文件夹的优先级高于主题下的/archetypes文件夹
config.toml: 配置文件
content: 储存网站的所有内容
data: 储存数据文件供模板调用
layouts: 储存.html模板，该文件夹的优先级高于主题下的/layouts文件夹
static: 储存图片、css、js等静态文件，该目录下的文件会直接拷贝到/public，该文件夹的优先级高于主题下的/static文件夹
themes: 储存主题
public: 执行hugo命令后，储存生成的静态文件

步骤

1. 编辑config.yml

config.yml这个配置文件是整站的配置。它给 Hugo 提供了如何构建站点的方式，比如全局的参数和菜单。该文件默认为toml格式，上期文章中在生成站点小节的命令里-f yml参数将默认配置文件改为了yaml格式。

官方给的默认配置：Sample config.yml
参数含义参考主题Wiki：Features、Variables以及Hugo官方文档的相关内容：Configure Hugo。
这里使用的是Sulv大佬给出的配置文件，再一次感谢Sulv大佬。配置文件的内容需要根据实际情况自行修改，主要就是把一些链接和标题这些网站标志改成自己的，另外logo.gif要放到网站根目录下的static/img/logo.gif。

baseURL: https://www.sulvblog.cn
# baseURL: https://www.sulvblog.cn  # 绑定的域名
languageCode: zh-cn # en-us
title: Sulv's Blog
theme: PaperMod # 主题名字，和themes文件夹下的一致

enableInlineShortcodes: true
enableEmoji: true # 允许使用 Emoji 表情，建议 true
enableRobotsTXT: true # 允许爬虫抓取到搜索引擎，建议 true

hasCJKLanguage: true # 自动检测是否包含 中文日文韩文 如果文章中使用了很多中文引号的话可以开启

buildDrafts: false
buildFuture: false
buildExpired: false

#googleAnalytics: UA-123-45 # 谷歌统计
# Copyright: Sulv

paginate: 10    # 首页每页显示的文章数

minify:
    disableXML: true
    # minifyOutput: true

permalinks:
  post: "/:title/"
  # post: "/:year/:month/:day/:title/"

defaultContentLanguage: zh # 最顶部首先展示的语言页面
defaultContentLanguageInSubdir: true

languages:
    zh:
      languageName: "Chinese"
      # contentDir: content/english
      weight: 1
      profileMode:
        enabled: true
        title: (〃'▽'〃)
        subtitle: "🧨学而时习之，不亦说乎？有朋自远方来，不亦乐乎？</br>👏🏼欢迎光临素履(Sulv)的博客</br>👇联系方式"
        imageUrl: "img/logo.gif"
        imageTitle: 
        imageWidth: 150
        imageHeight: 150
        buttons:
          - name: 👨🏻‍💻技术
            url: posts/tech
          - name: 📕阅读
            url: posts/read
          - name: 🏖生活
            url: posts/life
          # - name: 🌹素履的博客
          #   url: https://www.xyming108.top
      menu:
        main:
          - identifier: search
            name: 🔍搜索
            url: search
            weight: 1
          - identifier: home
            name: 🏠主页
            url: /
            weight: 2
          - identifier: posts
            name: 📚文章
            url: posts
            weight: 3
          # - identifier: tech
          #   name: 👨🏻‍💻技术文章
          #   url: posts/tech
          #   weight: 5
          # - identifier: life
          #   name: 🏖记录生活
          #   url: posts/life
          #   weight: 6
          - identifier: archives
            name: ⏱时间轴
            url: archives/
            weight: 20
          # - identifier: categories
          #   name: 🧩分类
          #   url: categories
          #   weight: 30
          - identifier: tags
            name: 🔖标签
            url: tags
            weight: 40
          - identifier: about
            name: 🙋🏻‍♂️关于
            url: about
            weight: 50
          - identifier: links
            name: 🤝友链
            url: links
            weight: 60

outputs:
    home:
        - HTML
        - RSS
        - JSON

params:
    env: production # to enable google analytics, opengraph, twitter-cards and schema.
    # description: "这是一个纯粹的博客......"
    author: Sulv
    # author: ["Me", "You"] # multiple authors

  
    defaultTheme: auto  # defaultTheme: light or  dark 
    disableThemeToggle: false
    DateFormat: "2006-01-02"
    ShowShareButtons: true
    ShowReadingTime: true
    # disableSpecialistPost: true
    displayFullLangName: true
    ShowPostNavLinks: true
    ShowBreadCrumbs: true
    ShowCodeCopyButtons: true
    hideFooter: false # 隐藏页脚
    ShowWordCounts: true
    VisitCount: true

    ShowLastMod: true #显示文章更新时间

    ShowToc: true # 显示目录
    TocOpen: true # 自动展开目录

    comments: true
    
    socialIcons:
        - name: github
          url: "https://github.com/xyming108"
        - name: twitter
          url:  "img/twitter.png"
        - name: facebook
          url: "https://www.facebook.com/profile.php?id=100027782410997"
        - name: instagram
          url: "img/instagram.png"
        - name: QQ
          url: "img/qq.png"
        - name: WeChat
          url: "img/wechat.png"
        # - name: Phone
        #   url: "img/phone.png"
        - name: email
          url: "mailto:[email protected]"
        - name: RSS
          url: "index.xml"

    # editPost:
    #     URL: "https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content"
    #     Text: "Suggest Changes" # edit text
    #     appendFilePath: true # to append file path to Edit link

    # label:
    #     text: "Home"
    #     icon: icon.png
    #     iconHeight: 35

    # analytics:
    #     google:
    #         SiteVerificationTag: "XYZabc"

    assets:
        favicon: "img/logo.gif"
        favicon16x16: "img/logo.gif"
        favicon32x32: "img/logo.gif"
        apple_touch_icon: "logo.gif"
        safari_pinned_tab: "logo.gif"

    # cover:
    #     hidden: true # hide everywhere but not in structured data
    #     hiddenInList: true # hide on list pages and home
    #     hiddenInSingle: true # hide on single page

    fuseOpts:
        isCaseSensitive: false
        shouldSort: true
        location: 0
        distance: 1000
        threshold: 1
        minMatchCharLength: 0
        keys: ["title", "permalink", "summary"]

    twikoo:
      version: 1.4.11

taxonomies:
    category: categories
    tag: tags
    series: series

markup:
    goldmark:
        renderer:
            unsafe: true # HUGO 默认转义 Markdown 文件中的 HTML 代码，如需开启的话
    highlight:
        # anchorLineNos: true
        codeFences: true  
        guessSyntax: true
        lineNos: true
        # noClasses: false
        # style: monokai
        style: darcula

        # codeFences：代码围栏功能，这个功能一般都要设为 true 的，不然很难看，就是干巴巴的-代码文字，没有颜色。
        # guessSyntax：猜测语法，这个功能建议设置为 true, 如果你没有设置要显示的语言则会自动匹配。
        # hl_Lines：高亮的行号，一般这个不设置，因为每个代码块我们可能希望让高亮的地方不一样。
        # lineNoStart：行号从编号几开始，一般从 1 开始。
        # lineNos：是否显示行号，我比较喜欢显示，所以我设置的为 true.
        # lineNumbersInTable：使用表来格式化行号和代码,而不是 标签。这个属性一般设置为 true.
        # noClasses：使用 class 标签，而不是内嵌的内联样式

privacy:
    vimeo:
        disabled: false
        simple: true

    twitter:
        disabled: false
        enableDNT: true
        simple: true

    instagram:
        disabled: false
        simple: true

    youtube:
        disabled: false
        privacyEnhanced: true

services:
    instagram:
        disableInlineCSS: true
    twitter:
        disableInlineCSS: true

2. 配置🔍搜索页面

原文参考：Search Page

PaperMod 使用Fuse.js Basic执行搜索功能

配置文件中已开启可用的搜索功能，需要在网站根目录下的content/目录中创建包含以下内容的search.md。此外可根据需求，参考主题文档自行定制。

1
2
3
4
5
6
7
8


---
title: "🔍搜索" # in any language you want
layout: "search" # is necessary
# url: "/archive"
# description: "Description for Search"
summary: "search"
placeholder: "搜索框内的默认显示，自行修改"
---

要隐藏特定页面使其不被搜索，在front matter（我翻译为前文，即开头两行---包含的内容）中添加

1

searchHidden: true

3. 配置⏱时间轴页面

原文参考：Archives Layout

⏱时间轴页面即档案布局（Archives Layout）。配置文件中已开启可用的档案功能，需要在网站根目录下的content/目录中创建包含以下内容的archives.md。此外可根据需求，参考主题文档自行定制。

1
2
3
4
5
6


---
title: "⏱时间轴"
layout: "archives"
url: "/archives/"
summary: archives
---

4. 配置🔖标签页面

config.yml中设置的默认语言是中文，且并未开启其它语言的支持，如有需要可参考官方文档自行定制：Translations，Multilingual Mode 。但是🔖标签页面不受此设置控制，故需要自行修改对应的html模板。
另外关于默认语言的问题，主题支持多语言，即主题对自带的一些页面模板提供了一定的翻译，例如Home->主页。提供多语言支持的文件在themes/PaperMod/i18n/，其中zh.yaml即简体中文。
为了防止更新主题时还原修改过的文件，需要在网站根目录进行修改，这样可以覆盖主题原有文件的效果。

在了解以上三点后，可以开始下面的修改。

4.1. 修改默认翻译

在网站根目录新建i18n/文件夹，复制themes/PaperMod/i18n/zh.yaml到i18n/zh.yaml，并编辑

1
2
3


mkdir i18n \
  && cp themes/PaperMod/i18n/zh.yaml i18n/zh.yaml \
    && nano i18n/zh.yaml

改为如下内容：

 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


- id: prev_page
  translation: "上一页"

- id: next_page
  translation: "下一页"

- id: read_time
  translation:
    one : "1 分钟"
    other: "{{ .Count }} 分钟"

- id: toc
  translation: "目录"

- id: translations
  translation: "语言"

- id: home
  translation: "🏠主页"

- id: edit_post
  translation: "编辑"

- id: code_copy
  translation: "复制"

- id: code_copied
  translation: "已复制！"

4.2. 修改html模板

🔖标签对应的模板文件为themes/PaperMod/layouts/_default/terms.html，同以上步骤：在网站根目录新建layouts/_default/文件夹，复制themes/PaperMod/layouts/_default/terms.html到layouts/_default/terms.html，并编辑

1
2
3


mkdir layouts/_default \
  && cp themes/PaperMod/layouts/_default/terms.html layouts/_default/terms.html \
    && nano layouts/_default/terms.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
33
34
35
36


{{- define "main" }}

{{- if .Title }}
<header class="page-header">
    {{- if eq .Title "Categories" }}
    <h1>🧩{{ .Title }}</h1>
    {{- end }}
    {{- if eq .Title "Tags" }}
        <h1>🔖{{ "标签" }}</h1>
        <!-- <h1>🔖{{ .Title }}</h1> -->
    {{- end }}
    <!-- <h1>{{ .Title }}</h1> -->
    {{- if .Description }}
    <div class="post-description">
        {{ .Description }}
    </div>
    {{- end }}
</header>
{{- end }}

<!-- 原始 -->

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with $.Site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }} <sup><strong><sup>{{ $count }}</sup></strong></sup> </a>
    </li>
    {{- end }}
    {{- end }}
</ul>

{{- end }}{{/* end main */ -}}

5. 自定义前文（front matter）

hugo给了一个默认的文章生成模板，在使用hugo new content/posts/demo.md生成新页面时，提供最基本的front matter，位置在archetypes/default.md，内容如下：

1
2
3
4
5


---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

该模板仅包含必须的三个参数：title（标题），date（日期），draft（是否为草稿？）。为方便写作，这里给出由Sulv大佬提供，我略作修改的模板。

新建一个archetypes/post.md并编辑，

1

nano archetypes/post.md

黏贴以下内容：

 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


---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
lastmod: {{ .Date }}
author: ["作者"]
categories:
- 分类1
- 分类2
tags:
- 标签1
- 标签2
# summary->在列表页展现的摘要内容，自动生成，内容默认前70个字符，可通过此参数自定义，一般无需专门设置
summary: ""
# description->需要自己编写的文章描述，是搜索引擎呈现在搜索结果链接下方的网页简介，建议设置
description: ""
weight: # 输入1可以顶置文章，用来给文章展示排序，不填就默认按时间排序
slug: ""
draft: false # 是否为草稿
comments: true
showToc: true # 显示目录
TocOpen: true # 自动展开目录
hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等
disableShare: true # 底部不显示分享栏
showbreadcrumbs: true #顶部显示当前路径
cover:
    image: ""
    caption: ""
    alt: ""
    relative: false
---

此处内容将会出现在摘要（summary）里

<!--\more--> # 此处的“\”用于转义，否则无法正常显示，实际使用须删去。

此处开始为正文

6. 配置🙋🏻‍♂️关于页面

在上一节我们配置了文章生成模板，下面介绍用如何模板生成🙋🏻‍♂️关于界面（about.md）。
首先在content/页面生成about.md

1

hugo new --kind post content/about.md

我们即可看到一个有着模板内容的about.md，根据自己需求对照注释更改前文参数。
然后在最下方开始，使用Markdown语法撰写正文，完成自己的🙋🏻‍♂️关于页面

7. 内容管理（Content Management）从入门到精通

在hugo目录介绍中介绍了网站下的路径及其作用。那么我们要在哪里放置写好的文章呢，答案是content/目录。

在官方文档Content Management中详尽地介绍了管理博客内容需要了解的所有信息，以下介绍目前我们需要了解的内容。

博客上线后，我们看到的所有内容都是content/目录中的Markdown文件，content/目录是管理网站所有内容的顶层目录，一般作为网站主页存在，访问链接为：http://example.com，同时about.md、archives.md等文件一般存放在这里。
在content/目录中新建的Markdown文件，譬如about.md，其访问链接为：http://example.com/about/ 。可以注意到其并没有带后缀，在Hugo中默认的行为是使用漂亮的URL（Pretty URLs）呈现内容，即链接中省略“.html”后缀。如果你有恶趣味的话，可以在config.yml中设置uglyurls: true，开启丑陋的URL（Ugly URLs）环境变量，这样访问链接就会变成：https://example.com/about.html/

在content/目录中新建目录，譬如posts（一般约定俗成在这个路径下存放我们的博客文章），其访问链接为：http://example.com/posts/ ，其他目录与之同理。

在我的博客里，我创建了如下路径：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


content
├── about.md
├── archives.md
├── posts
│   ├── _index.md
│   ├── life
│   │   └── _index.md
│   ├── read
│   │   └── _index.md
│   └── tech
│       ├── 1st.md
│       ├── 2nd.md
│       └── _index.md
└── search.md

其中posts/life/对应🏖生活；posts/read/对应📕阅读；posts/tech/对应👨🏻‍💻技术。

这里着重提一下：_index.md,官方参考文档在此Index Pages。简要来说，就是这个文件是作为自定义索引页存在。这里给出我使用的一个作为参考：

1
2
3
4
5
6
7
8
9


---
title: "📚文章"
# description: "知识是学习来的，经验是总结来的。"
hidemeta: true # 是否隐藏文章的元信息，如发布日期、作者等
---

知识是学习来的，经验是总结来的。

<!--\more--> # 此处的“\”用于转义，否则无法正常显示，实际使用须删去。

写在最后

至此已基本完成了Hugo的基础配置，之后可以专心于创作。如果需要更大的自由度、有其他需求，亦可进行深度定制。在下一节我会介绍一些Hugo写作的流程，一些额外的使用技巧，并且给出我自用的一个天翼网盘备份Hugo的脚本

Hugo搭建个人博客（2）#

Hugo目录介绍#

步骤#

1. 编辑config.yml#

2. 配置🔍搜索页面#

3. 配置⏱时间轴页面#

4. 配置🔖标签页面#

4.1. 修改默认翻译#

4.2. 修改html模板#

5. 自定义前文（front matter）#

6. 配置🙋🏻‍♂️关于页面#

7. 内容管理（Content Management）从入门到精通#

写在最后#

引用#