如何安装SakuraChiyo主题

2025-04-04

第一步：检查您的Hugo版本

运行以下命令：

1hugo version

您可以通过该命令查看电脑上安装的Hugo版本。经测试，v0.143.0对于运行SakuraChiyo是安全的。

第二步：创建站点框架

1hugo new site MySite --format yaml
2# 将“MySite”替换为您自定义的网站名称
3# 推荐使用yaml格式，其可读性优于toml格式

第三步：安装SakuraChiyo主题

所有Hugo主题都存放在MySite/themes目录中，SakuraChiyo主题也不例外。

使用Git clone是最方便的途径。在MySite根目录下运行：

1git clone https://github.com/realyezhihao/SakuraChiyo.git

对于不使用Git的用户，可从Github下载ZIP压缩包，并解压至主题目录MySite/themes/SakuraChiyo.

第四步：设置SakuraChiyo为主题

在配置文件MySite/hugo.yaml或者MySite/config.yaml中，添加

1theme: "hugo-SakuraChiyo"

以下为本演示站点所使用的hugo.yaml文件（供参考）：

 1params:
 2  draft: false                   #默认禁用草稿模式
 3  toc: false                     #默认禁用目录生成
 4  math: false                    #默认禁用KaTeX渲染数学公式
 5  footer:
 6    author: Sakura_Chiyo         #页脚显示作者名
 7    since: 2025                  #页脚显示建站时间
 8
 9theme: "hugo-SakuraChiyo"        #启用主题为SakuraChiyo
10baseurl: /hugo-SakuraChiyo/      #这里改成你网站的网址
11footnotereturnlinkcontents: "↩" #脚注标识符
12languages:
13  en: #设置英文页面
14    languageName: English
15    languageCode: en-us          #语言代码
16    contentDir: "content/en"     #英语页面路径
17    title: Demo Site in Theme SakuraChiyo
18    weight: 1                    #语言优先级权重
19    menu:
20      blognav:
21      - name: Home
22        url: "/"
23        weight: 1
24      - name: Page1
25        url: "/page1/"
26        weight: 2
27      - name: Page2
28        url: "/page2/"
29        weight: 3
30      - name: Tags
31        url: "/tags/"
32        weight: 4
33      - name: 简中               #切换为简中页面
34        url: "/zh-cn/"
35        weight: 5
36  zh-cn: #设置中文页面（支持几种语言就设置几个菜单、几个页面路径）
37    languageName: 简中
38    languageCode: zh-cn
39    contentDir: "content/zh-cn"
40    title: SakuraChiyo主题的样例网站
41    weight: 2
42    menu:
43      blognav:
44      - name: 首页
45        url: "/zh-cn/"
46        weight: 1
47      - name: 页面1
48        url: "/zh-cn/page1/"
49        weight: 2
50      - name: 页面2
51        url: "/zh-cn/page2/"
52        weight: 3
53      - name: 标签页
54        url: "/zh-cn/tags/"
55        weight: 4
56      - name: English            #切换为英语页面
57        url: "/"
58        weight: 5
59
60# 对于新手小白以下设置建议保留不动
61taxonomies:
62  category: tags
63titleCaseStyle: "none"
64markup:
65  tableOfContents:
66    startLevel: 1
67    endLevel: 4
68    ordered: false
69  highlight:
70    lineNos: true
71    lineNumbersInTable: false
72    style: github-dark
73  goldmark:
74    extensions:
75      passthrough:
76        delimiters:
77          block:    # maths block display
78          - - \[
79            - \]
80          inline:   # maths inline display
81          - - \(
82            - \)
83          - - $
84            - $
85        enable: true

您可根据实际需求自定义修改此配置文件。

自定义

要改变网站图标，请访问https://favicon.io/。在那里下载网站图标的ZIP包，然后在MySite/assets/image/webicon路径下解压这个包。

要改变网站的头像图片，只需将你的图片avatar.jpg放在MySite/assets/image路径下。这个图片必须是.jpg格式而且需要重命名为“avatar”。推荐使用长宽相等的图片。

 1MySite/
 2├── assets/
 3|   ├── image/
 4|   |   ├── webicon/
 5|   |   |   ├── android-chrome-192x192.png
 6|   |   |   ├── android-chrome-512x512.png
 7|   |   |   ├── apple-touch-icon.png
 8|   |   |   ├── favicon-16x16.png
 9|   |   |   ├── favicon-32x32.png
10|   |   |   ├── favicon.ico
11|   |   |   └── site.webmanifest
12|   |   └── avater.jpg
13|   ...
14...