1. 前言
写这篇文章为了熟悉一下markdown的语法，如果以后还要建blog的话可以有一个熟悉的参考。
我是跟随着这位大佬建好的博客，这篇文章也是参考大佬的博客写的。
bilibili这是他建博客的视频，你们哪里不懂的可以看一下。
2. 搭建 hugo
首先，安装 hugo，在 Windows 中，推荐使用 scoop 来安装预编译的二进制版本
1scoop install hugo-extended
如果缺少scoop的话跟着下面来安装，如何上面代码没有出错请跳过’安装scoop’这一步
安装 scoop
确保以允许 Powershell 执行本地脚本
1Set-ExecutionPolicy RemoteSigned -scope CurrentUser
输入以下命令安装scoop
1iwr -useb get.scoop.sh | iex
安装完成后，输入scoop命令查看是否安装成功
然后安装hugo,安装完之后·输入hugo version命令查看版本号
这样就表示安装成功了！！
建立站点
在本地使用hugo创建一个站点hugo new site <文件夹名>
1hugo new site dev
然后，
1cd dev
3. 配置PaperMod
然后，我们先将此目录初始化成 git 仓库
1git init
2git add .
3git commit -m "first commit"
输入,记得开魔法
1git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
可以看一下这个目录会增加很多文件
在dev目录下创建一个.gitignore文件,这个文件的作用是为了上传github时候过滤掉不需要的文件
文件中添加下面数据
1public
2resources
3.hugo_build.lock
4hugo.exe
配置主题
把在dev下的hugo.toml 改成hugo.yaml
1Rename-Item .\hugo.toml hugo.yaml
然后，配置一下基本信息
1baseURL: "https://LFLmLXY.github.io" # 主站的 URL
2title: LFL's Blog # 站点标题
3copyright: "[©2025 LFL's Blog](https://LFLmLXY.github.io/)" # 网站的版权声明，通常显示在页脚
4theme: PaperMod # 主题
5languageCode: zh-cn # 语言
6
7enableInlineShortcodes: true # shortcode，类似于模板变量，可以在写 markdown 的时候便捷地插入，官方文档中有一个视频讲的很通俗
8hasCJKLanguage: true # 是否有 CJK 的字符
9enableRobotsTXT: true # 允许生成 robots.txt
10buildDrafts: false # 构建时是否包括草稿
11buildFuture: false # 构建未来发布的内容
12buildExpired: false # 构建过期的内容
13enableEmoji: true # 允许 emoji
14pagination.pagerSize: 5 #5篇文章翻页
15pygmentsUseClasses: true
16defaultContentLanguage: zh # 顶部首先展示的语言界面
17defaultContentLanguageInSubdir: false # 是否要在地址栏加上默认的语言代码
18
19#配置导航栏
20languages:
21 zh:
22 languageName: "中文" # 展示的语言名
23 weight: 1 # 权重
24 taxonomies: # 分类系统
25 category: categories
26 tag: tags
27 # https://gohugo.io/content-management/menus/#define-in-site-configuration
28 menus:
29 main:
30 - name: 首页
31 pageRef: /
32 weight: 1 # 控制在页面上展示的前后顺序
33 # - name: 文章
34 # pageRef: posts/
35 # weight: 2
36 - name: 归档
37 pageRef: archives/
38 weight: 5
39 - name: 分类
40 pageRef: categories/
41 weight: 10
42 - name: 标签
43 pageRef: tags/
44 weight: 10
45 - name: 搜索
46 pageRef: search/
47 weight: 20
48 - name: 关于
49 pageRef: about/
50 weight: 21
51params:
52 env: production # to enable google analytics, opengraph, twitter-cards and schema.
53 title: ExampleSite
54 description: "ExampleSite description"
55 keywords: [Blog, Portfolio, PaperMod]
56 author: Me
57 # author: ["Me", "You"] # multiple authors
58 images: ["<link or path of image for opengraph, twitter-cards>"]
59 DateFormat: "January 2, 2006"
60 # 默认主题
61 defaultTheme: auto # dark, light
62 # 是否禁用主题切换按钮
63 disableThemeToggle: false
64
65 # 是否启用阅读时间展示
66 ShowReadingTime: true
67 # 是都启用分享按钮
68 ShowShareButtons: true
69 ShowPostNavLinks: true
70 # 是否启用面包屑导航
71 ShowBreadCrumbs: true
72 # 是否显示代码复制按钮
73 ShowCodeCopyButtons: true
74 # 是否显示字数统计
75 ShowWordCount: true
76 # 是否在页面显示 RSS 按钮
77 ShowRssButtonInSectionTermList: true
78 UseHugoToc: true
79 disableSpecial1stPost: false
80 # 是否禁用首页滚动到顶部
81 disableScrollToTop: false
82 # 是否启用评论系统
83 comments: true
84 # 是否隐藏 Meta 信息
85 hidemeta: false
86 # 是否隐藏文章摘要
87 hideSummary: false
88 # 是否显示目录
89 showtoc: false
90 # 是否默认展开文章目录
91 tocopen: false
92
93 assets:
94 # disableHLJS: true # to disable highlight.js
95 # disableFingerprinting: true
96
97 # 网站 Favicon 图标相关信息
98 # 可在 https://realfavicongenerator.net/ 生成
99 # 将图片复制到 /static 目录下
100 # 然后修改下面代码中的文件名
101 favicon: "feather.png"
102 favicon16x16: "feather.png"
103 favicon32x32: "feather.png"
104 apple_touch_icon: "feather.png"
105 safari_pinned_tab: "feather.png"
106 disableHLJS: true # to disable highlight.js
107
108 label:
109 # 使用文本替代 Logo 标签
110 text: LFL's Blog
111 # 网站 Logo 图片（/static 下面的文件名称）
112 icon: "R-C.jpeg"
113 # 图标高度
114 iconHeight: 45
115
116 # 主页展示模式
117 # 个人信息模式
118 profileMode:
119 enabled: false # needs to be explicitly set
120 title: Welcome to my Blog
121 subtitle: ""
122 imageUrl: "blog.jpg"
123 imageWidth: 120
124 imageHeight: 120
125 imageTitle: my image
126 #buttons:
127 # - name: 文章
128 # url: posts/
129 # - name: bilibili
130 # url: X
131
132 # 主页 - 信息模式（默认）
133 homeInfoParams:
134 Title: "Hi there ⛳"
135 Content: Welcome to my blog
136 # 主页 - 信息模式 图标展示
137 socialIcons:
138 - name: x
139 url: "https://x.com/"
140 - name: stackoverflow
141 url: "https://stackoverflow.com"
142 - name: github
143 url: "https://github.com/"
144
145 analytics:
146 google:
147 SiteVerificationTag: "XYZabc"
148 bing:
149 SiteVerificationTag: "XYZabc"
150 yandex:
151 SiteVerificationTag: "XYZabc"
152
153 # 文章封面设置
154 cover:
155 hidden: true # hide everywhere but not in structured data
156 hiddenInList: true # hide on list pages and home
157 hiddenInSingle: true # hide on single page
158 # 关联编辑
159 editPost:
160 URL: "https://github.com/<path_to_repo>/content"
161 Text: "Suggest Changes" # edit text
162 appendFilePath: true # to append file path to Edit link
163
164 # for search
165 # https://fusejs.io/api/options.html
166 fuseOpts:
167 isCaseSensitive: false
168 shouldSort: true
169 location: 0
170 distance: 1000
171 threshold: 0.4
172 minMatchCharLength: 0
173 limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
174 keys: ["title", "permalink", "summary", "content"]
175pygmentsUseClasses: true
176markup:
177 goldmark:
178 renderer:
179 unsafe: true # 可以 unsafe，有些 html 标签和样式可能需要
180 highlight:
181 anchorLineNos: false # 不要给行号设置锚标
182 codeFences: true # 代码围栏
183 noClasses: false # TODO: 不知道干啥的，暂时没必要了解，不影响展示
184 lineNos: true # 代码行
185 lineNumbersInTable: false # 不要设置成 true，否则如果文章开头是代码的话，摘要会由一大堆数字(即代码行号)开头文章
186 # 这里设置 style 没用，得自己加 css
187 # style: "github-dark"
188 # style: monokai
配置归档
在 dev\content 目录下新建 archives.md 文件，内容如下，
1---
2title: "归档"
3layout: "archives"
4url: "/archives/"
5summary: archives
6---
创建一篇文章
在 dev\content 目录下新建 posts 文件夹，在posts文件夹下创建my-first.md文件写入下面数据
1---
2title: 'Hugo + PaperMod + Github Pages 搭建一个完善的个人博客(以 Windows11 为例)'
3date: 2025-03-02T11:01:38+08:00
4categories: ["通用技术"]
5tags: ["博客搭建", "Bilibili"]
6---
在 dev目录打开终端，启动一下hugo输入以下命令
1hugo server
按住ctr键单击红框，出现如下页面就表示成功了！
看一下归档是否成功
配置搜索
在hugo.yaml中加入
1# https://github.com/adityatelange/hugo-PaperMod/wiki/Features#search-page
2outputs:
3 home:
4 - HTML # 生成的静态页面
5 - RSS # 这个其实无所谓
6 - JSON # necessary for search, 这里的配置修改好之后，一定要重新生成一下
然后，在 dev\content 目录下新建一个 search.md 文件，加入
1---
2title: "搜索" # in any language you want
3layout: "search" # necessary for search
4summary: "search"
5placeholder: "搜索"
6---
然后是搜索的一些个性化设置，在hugo.yaml中找到params注意缩进
1params:
2 # 搜索
3 fuseOpts:
4 isCaseSensitive: false # 是否大小写敏感
5 shouldSort: true # 是否排序
6 location: 0
7 distance: 1000
8 threshold: 0.4
9 minMatchCharLength: 0
10 # limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
11 keys: ["title", "permalink", "summary", "content"]
12 includeMatches: true
这样以来，搜索就可以正常工作了，
在 dev目录打开终端，启动一下hugo输入以下命令
hugo server
配置关于页面
新建两个文件，一个是 dev\layouts\_default 目录下的 about.html.没有_default文件夹就创建
1{{- define "main" }}
2
3<header class="page-header">
4 <h1>{{ .Title }}</h1>
5 {{- if .Description }}
6 <div class="post-description">
7 {{ .Description }}
8 </div>
9 {{- end }}
10 </header>
11
12<section>
13 <br>
14 {{ .Content }}
15</section>
16
17{{- end }}{{/* end main */}}
另一个是 dev\content 目录下的 about.md,关于页面的信息直接写在about.md里面就行
1---
2title: "关于"
3layout: "about"
4url: "/about/"
5summary: about
6---
7
8这里就可以写一些关于的相关信息了。
在 dev目录打开终端，启动一下hugo输入以下命令
1hugo server
配置评论
这里的评论使用了 giscus 插件。
先在 dev\layouts\partials 下新建一个 comments.html 文件，
1<div id="tw-comment"></div>
2<script>
3 // 默认是暗色，根目录下的配置中的主题默认也是暗色
4 const getStoredTheme = () => localStorage.getItem("pref-theme") === "light" ? "{{ .Site.Params.giscus.lightTheme }}" : "{{ .Site.Params.giscus.darkTheme }}";
5 const setGiscusTheme = () => {
6 const sendMessage = (message) => {
7 const iframe = document.querySelector('iframe.giscus-frame');
8 if (iframe) {
9 iframe.contentWindow.postMessage({giscus: message}, 'https://giscus.app');
10 }
11 }
12 sendMessage({setConfig: {theme: getStoredTheme()}})
13 }
14
15 document.addEventListener("DOMContentLoaded", () => {
16 const giscusAttributes = {
17 "src": "https://giscus.app/client.js",
18 "data-repo": "{{ .Site.Params.giscus.repo }}",
19 "data-repo-id": "{{ .Site.Params.giscus.repoId }}",
20 "data-category": "{{ .Site.Params.giscus.category }}",
21 "data-category-id": "{{ .Site.Params.giscus.categoryId }}",
22 "data-mapping": "{{ .Site.Params.giscus.mapping }}",
23 "data-strict": "{{ .Site.Params.giscus.strict }}",
24 "data-reactions-enabled": "{{ .Site.Params.giscus.reactionsEnabled }}",
25 "data-emit-metadata": "{{ .Site.Params.giscus.emitMetadata }}",
26 "data-input-position": "{{ .Site.Params.giscus.inputPosition }}",
27 "data-theme": getStoredTheme(),
28 "data-lang": "{{ .Site.Params.giscus.lang }}",
29 "data-loading": "lazy",
30 "crossorigin": "anonymous",
31 };
32
33 // 动态创建 giscus script
34 const giscusScript = document.createElement("script");
35 Object.entries(giscusAttributes).forEach(
36 ([key, value]) => giscusScript.setAttribute(key, value));
37 document.querySelector("#tw-comment").appendChild(giscusScript);
38
39 // 页面主题变更后，变更 giscus 主题
40 const themeSwitcher = document.querySelector("#theme-toggle");
41 if (themeSwitcher) {
42 themeSwitcher.addEventListener("click", setGiscusTheme);
43 }
44 const themeFloatSwitcher = document.querySelector("#theme-toggle-float");
45 if (themeFloatSwitcher) {
46 themeFloatSwitcher.addEventListener("click", setGiscusTheme);
47 }
48 });
49</script>
🚅创建github仓库
进入github,注册账号就不赘述了。
🚅配置giscus
然后，进入 giscus 官网，点击下图的链接
然后找到自己github仓库的设置
然后，进入 giscus 官网
然后，把相应的字段提取到hugo.yaml中，
1params:
2 # 评论的设置
3 giscus:
4 repo: "sonnycalcr/sonnycalcr.github.io"
5 repoId: "xxxxxx"
6 category: "Announcements"
7 categoryId: "xxxxx"
8 mapping: "pathname"
9 strict: "0"
10 reactionsEnabled: "1"
11 emitMetadata: "0"
12 inputPosition: "bottom"
13 lightTheme: "light"
14 darkTheme: "dark"
15 lang: "zh-CN"
16 crossorigin: "anonymous"
这样就可以正常使用了。
配置数学公式
这里使用的是 mathjax。
我们需要添加两个文件，一个是 dev\layouts\partials 下的 mathjax.html 文件，如下，
1<script type="text/javascript"
2 async
3 src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
4MathJax.Hub.Config({
5 tex2jax: {
6 inlineMath: [['$','$'], ['\\(','\\)']],
7 displayMath: [['$$','$$'], ['\[\[','\]\]']],
8 processEscapes: true,
9 processEnvironments: true,
10 skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
11 TeX: { equationNumbers: { autoNumber: "AMS" },
12 extensions: ["AMSmath.js", "AMSsymbols.js"] }
13 }
14});
15
16MathJax.Hub.Queue(function() {
17 // Fix <code> tags after MathJax finishes running. This is a
18 // hack to overcome a shortcoming of Markdown. Discussion at
19 // https://github.com/mojombo/jekyll/issues/199
20 var all = MathJax.Hub.getAllJax(), i;
21 for(i = 0; i < all.length; i += 1) {
22 all[i].SourceElement().parentNode.className += ' has-jax';
23 }
24});
25</script>
26
27<style>
28code.has-jax {
29 font: inherit;
30 font-size: 100%;
31 background: inherit;
32 border: inherit;
33 color: #515151;
34}
35</style>
另一个是 dev\layouts\partials 下的 extend_head.html 文件，
1{{- /* Head custom content area start */ -}}
2{{- /* Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
3{{- /* Can be overwritten by partial with the same name in the global layouts. */ -}}
4{{ partial "mathjax.html" . }}
5{{- /* Head custom content area end */ -}}
到这里，数学公式就可以正常使用了，把下面的代码复制到dev\content\posts下的my-first.md文件
1行内数学公式：$a^2 + b^2 = c^2$。
2
3块公式，
4
5$$
6a^2 + b^2 = c^2
7$$
8
9<div>
10$$
11\boldsymbol{x}_{i+1}+\boldsymbol{x}_{i+2}=\boldsymbol{x}_{i+3}
12$$
13</div>
上面的第二个公式之所以要用 div 包裹起来，是因为这里的数学公式如果有超过了三对花括号，那么，其解析和转义就会出问题，这个和 hugo 有关目前折中的方案就是上面这种在外面套一层 div。
添加代码字体
先到谷歌字体 中找一款开源字体，我这里选用的是 Jetbrains Mono，然后复制其信息到dev\layouts\partials\extend_head.html 中，
1<link rel="preconnect" href="https://fonts.googleapis.com">
2<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
复制到这个位置
然后，新建一个 dev\assets\css\extended\blank.css 文件，添加样式如下，
1.post-content pre,
2code {
3 font-family: "JetBrains Mono", monospace;
4 font-size: 1rem;
5 line-height: 1.2;
6}
这样就可以生效了，如果发现不生效，可以重新执行一下 hugo server 试试。
代码明暗切换
我们先建立一个 dev\assets\css\extended\chroma-styles-overrides.css 文件，
如果不想自己弄的话直接复制下面的css代码到新建的css文件中
然后，执行一下命令生成你想要的样式，
1hugo gen chromastyles --style=tokyonight-day > syntax.css
然后，把 syntax.css 中的内容复制到 chroma-styles-overrides.html 文件中，如果是暗色主题，那么，生成的样式则要包裹在 .dark {} 里面，我这里生成了两个样式，白天的样式是 tokyonight-day，黑暗的样式是 github-dark，同时，要记得将生成的样式中有些空缺的部分给补上默认的颜色，我这里白天的颜色补的是黑色，夜晚的颜色补的是白色，不然代码的样式会出问题，我这里完整的样式如下，
1/* Background */ .bg { color:#3760bf;background-color:#e1e2e7; }
2/* PreWrapper */ .chroma { color:#3760bf;background-color:#e1e2e7; }
3/* Other */ .chroma .x { color: #000 }
4/* Error */ .chroma .err { color:#c64343 }
5/* CodeLine */ .chroma .cl { color: #000 }
6/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
7/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
8/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
9/* LineHighlight */ .chroma .hl { background-color:#a1a6c5 }
10/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6172b0 }
11/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6172b0 }
12/* Line */ .chroma .line { display:flex; }
13/* Keyword */ .chroma .k { color:#9854f1 }
14/* KeywordConstant */ .chroma .kc { color:#8c6c3e }
15/* KeywordDeclaration */ .chroma .kd { color:#9d7cd8 }
16/* KeywordNamespace */ .chroma .kn { color:#007197 }
17/* KeywordPseudo */ .chroma .kp { color:#9854f1 }
18/* KeywordReserved */ .chroma .kr { color:#9854f1 }
19/* KeywordType */ .chroma .kt { color:#0db9d7 }
20/* Name */ .chroma .n { color: #000 }
21/* NameAttribute */ .chroma .na { color:#2e7de9 }
22/* NameBuiltin */ .chroma .nb { color:#587539 }
23/* NameBuiltinPseudo */ .chroma .bp { color:#587539 }
24/* NameClass */ .chroma .nc { color:#b15c00 }
25/* NameConstant */ .chroma .no { color:#b15c00 }
26/* NameDecorator */ .chroma .nd { color:#2e7de9;font-weight:bold }
27/* NameEntity */ .chroma .ni { color:#007197 }
28/* NameException */ .chroma .ne { color:#8c6c3e }
29/* NameFunction */ .chroma .nf { color:#2e7de9 }
30/* NameFunctionMagic */ .chroma .fm { color:#2e7de9 }
31/* NameLabel */ .chroma .nl { color:#587539 }
32/* NameNamespace */ .chroma .nn { color:#8c6c3e }
33/* NameOther */ .chroma .nx { color: #000 }
34/* NameProperty */ .chroma .py { color:#8c6c3e }
35/* NameTag */ .chroma .nt { color:#9854f1 }
36/* NameVariable */ .chroma .nv { color: #000 }
37/* NameVariableClass */ .chroma .vc { color: #000 }
38/* NameVariableGlobal */ .chroma .vg { color: #000 }
39/* NameVariableInstance */ .chroma .vi { color: #000 }
40/* NameVariableMagic */ .chroma .vm { color: #000 }
41/* Literal */ .chroma .l { color: #000 }
42/* LiteralDate */ .chroma .ld { color: #000 }
43/* LiteralString */ .chroma .s { color:#587539 }
44/* LiteralStringAffix */ .chroma .sa { color:#9d7cd8 }
45/* LiteralStringBacktick */ .chroma .sb { color:#587539 }
46/* LiteralStringChar */ .chroma .sc { color:#587539 }
47/* LiteralStringDelimiter */ .chroma .dl { color:#2e7de9 }
48/* LiteralStringDoc */ .chroma .sd { color:#a1a6c5 }
49/* LiteralStringDouble */ .chroma .s2 { color:#587539 }
50/* LiteralStringEscape */ .chroma .se { color:#2e7de9 }
51/* LiteralStringHeredoc */ .chroma .sh { color:#a1a6c5 }
52/* LiteralStringInterpol */ .chroma .si { color:#587539 }
53/* LiteralStringOther */ .chroma .sx { color:#587539 }
54/* LiteralStringRegex */ .chroma .sr { color:#007197 }
55/* LiteralStringSingle */ .chroma .s1 { color:#587539 }
56/* LiteralStringSymbol */ .chroma .ss { color:#587539 }
57/* LiteralNumber */ .chroma .m { color:#8c6c3e }
58/* LiteralNumberBin */ .chroma .mb { color:#8c6c3e }
59/* LiteralNumberFloat */ .chroma .mf { color:#8c6c3e }
60/* LiteralNumberHex */ .chroma .mh { color:#8c6c3e }
61/* LiteralNumberInteger */ .chroma .mi { color:#8c6c3e }
62/* LiteralNumberIntegerLong */ .chroma .il { color:#8c6c3e }
63/* LiteralNumberOct */ .chroma .mo { color:#8c6c3e }
64/* Operator */ .chroma .o { color:#587539;font-weight:bold }
65/* OperatorWord */ .chroma .ow { color:#587539;font-weight:bold }
66/* Punctuation */ .chroma .p { color: #000 }
67/* Comment */ .chroma .c { color:#a1a6c5;font-style:italic }
68/* CommentHashbang */ .chroma .ch { color:#a1a6c5;font-style:italic }
69/* CommentMultiline */ .chroma .cm { color:#a1a6c5;font-style:italic }
70/* CommentSingle */ .chroma .c1 { color:#a1a6c5;font-style:italic }
71/* CommentSpecial */ .chroma .cs { color:#a1a6c5;font-style:italic }
72/* CommentPreproc */ .chroma .cp { color:#a1a6c5;font-style:italic }
73/* CommentPreprocFile */ .chroma .cpf { color:#a1a6c5;font-weight:bold;font-style:italic }
74/* Generic */ .chroma .g { color: #000 }
75/* GenericDeleted */ .chroma .gd { color:#c64343;background-color:#e9e9ed }
76/* GenericEmph */ .chroma .ge { font-style:italic }
77/* GenericError */ .chroma .gr { color:#c64343 }
78/* GenericHeading */ .chroma .gh { color:#8c6c3e;font-weight:bold }
79/* GenericInserted */ .chroma .gi { color:#587539;background-color:#e9e9ed }
80/* GenericOutput */ .chroma .go { color: #000 }
81/* GenericPrompt */ .chroma .gp { color: #000 }
82/* GenericStrong */ .chroma .gs { font-weight:bold }
83/* GenericSubheading */ .chroma .gu { color:#8c6c3e;font-weight:bold }
84/* GenericTraceback */ .chroma .gt { color:#c64343 }
85/* GenericUnderline */ .chroma .gl { text-decoration:underline }
86/* TextWhitespace */ .chroma .w { color: #000 }
87
88.dark {
89 /* Background */ .bg { color:#e6edf3;background-color:#0d1117; }
90 /* PreWrapper */ .chroma { color:#e6edf3;background-color:#0d1117; }
91 /* Other */ .chroma .x { color: #fff }
92 /* Error */ .chroma .err { color:#f85149 }
93 /* CodeLine */ .chroma .cl { color: #fff }
94 /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
95 /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
96 /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
97 /* LineHighlight */ .chroma .hl { background-color:#6e7681 }
98 /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 }
99 /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 }
100 /* Line */ .chroma .line { display:flex; }
101 /* Keyword */ .chroma .k { color:#ff7b72 }
102 /* KeywordConstant */ .chroma .kc { color:#79c0ff }
103 /* KeywordDeclaration */ .chroma .kd { color:#ff7b72 }
104 /* KeywordNamespace */ .chroma .kn { color:#ff7b72 }
105 /* KeywordPseudo */ .chroma .kp { color:#79c0ff }
106 /* KeywordReserved */ .chroma .kr { color:#ff7b72 }
107 /* KeywordType */ .chroma .kt { color:#ff7b72 }
108 /* Name */ .chroma .n { color: #fff }
109 /* NameAttribute */ .chroma .na { color: #fff }
110 /* NameBuiltin */ .chroma .nb { color: #fff }
111 /* NameBuiltinPseudo */ .chroma .bp { color: #fff }
112 /* NameClass */ .chroma .nc { color:#f0883e;font-weight:bold }
113 /* NameConstant */ .chroma .no { color:#79c0ff;font-weight:bold }
114 /* NameDecorator */ .chroma .nd { color:#d2a8ff;font-weight:bold }
115 /* NameEntity */ .chroma .ni { color:#ffa657 }
116 /* NameException */ .chroma .ne { color:#f0883e;font-weight:bold }
117 /* NameFunction */ .chroma .nf { color:#d2a8ff;font-weight:bold }
118 /* NameFunctionMagic */ .chroma .fm { color: #fff }
119 /* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold }
120 /* NameNamespace */ .chroma .nn { color:#ff7b72 }
121 /* NameOther */ .chroma .nx { color: #fff }
122 /* NameProperty */ .chroma .py { color:#79c0ff }
123 /* NameTag */ .chroma .nt { color:#7ee787 }
124 /* NameVariable */ .chroma .nv { color:#79c0ff }
125 /* NameVariableClass */ .chroma .vc { color: #fff }
126 /* NameVariableGlobal */ .chroma .vg { color: #fff }
127 /* NameVariableInstance */ .chroma .vi { color: #fff }
128 /* NameVariableMagic */ .chroma .vm { color: #fff }
129 /* Literal */ .chroma .l { color:#a5d6ff }
130 /* LiteralDate */ .chroma .ld { color:#79c0ff }
131 /* LiteralString */ .chroma .s { color:#a5d6ff }
132 /* LiteralStringAffix */ .chroma .sa { color:#79c0ff }
133 /* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff }
134 /* LiteralStringChar */ .chroma .sc { color:#a5d6ff }
135 /* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff }
136 /* LiteralStringDoc */ .chroma .sd { color:#a5d6ff }
137 /* LiteralStringDouble */ .chroma .s2 { color:#a5d6ff }
138 /* LiteralStringEscape */ .chroma .se { color:#79c0ff }
139 /* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff }
140 /* LiteralStringInterpol */ .chroma .si { color:#a5d6ff }
141 /* LiteralStringOther */ .chroma .sx { color:#a5d6ff }
142 /* LiteralStringRegex */ .chroma .sr { color:#79c0ff }
143 /* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff }
144 /* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff }
145 /* LiteralNumber */ .chroma .m { color:#a5d6ff }
146 /* LiteralNumberBin */ .chroma .mb { color:#a5d6ff }
147 /* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff }
148 /* LiteralNumberHex */ .chroma .mh { color:#a5d6ff }
149 /* LiteralNumberInteger */ .chroma .mi { color:#a5d6ff }
150 /* LiteralNumberIntegerLong */ .chroma .il { color:#a5d6ff }
151 /* LiteralNumberOct */ .chroma .mo { color:#a5d6ff }
152 /* Operator */ .chroma .o { color:#ff7b72;font-weight:bold }
153 /* OperatorWord */ .chroma .ow { color:#ff7b72;font-weight:bold }
154 /* Punctuation */ .chroma .p { color: #fff }
155 /* Comment */ .chroma .c { color:#8b949e;font-style:italic }
156 /* CommentHashbang */ .chroma .ch { color:#8b949e;font-style:italic }
157 /* CommentMultiline */ .chroma .cm { color:#8b949e;font-style:italic }
158 /* CommentSingle */ .chroma .c1 { color:#8b949e;font-style:italic }
159 /* CommentSpecial */ .chroma .cs { color:#8b949e;font-weight:bold;font-style:italic }
160 /* CommentPreproc */ .chroma .cp { color:#8b949e;font-weight:bold;font-style:italic }
161 /* CommentPreprocFile */ .chroma .cpf { color:#8b949e;font-weight:bold;font-style:italic }
162 /* Generic */ .chroma .g { color: #fff }
163 /* GenericDeleted */ .chroma .gd { color:#ffa198;background-color:#490202 }
164 /* GenericEmph */ .chroma .ge { font-style:italic }
165 /* GenericError */ .chroma .gr { color:#ffa198 }
166 /* GenericHeading */ .chroma .gh { color:#79c0ff;font-weight:bold }
167 /* GenericInserted */ .chroma .gi { color:#56d364;background-color:#0f5323 }
168 /* GenericOutput */ .chroma .go { color:#8b949e }
169 /* GenericPrompt */ .chroma .gp { color:#8b949e }
170 /* GenericStrong */ .chroma .gs { font-weight:bold }
171 /* GenericSubheading */ .chroma .gu { color:#79c0ff }
172 /* GenericTraceback */ .chroma .gt { color:#ff7b72 }
173 /* GenericUnderline */ .chroma .gl { text-decoration:underline }
174 /* TextWhitespace */ .chroma .w { color:#6e7681 }
175}
我们再建立一个 dev\assets\css\extended\theme-vars-override.css 文件，
1:root {
2 --gap: 24px;
3 --content-gap: 20px;
4 --nav-width: 1024px;
5 --main-width: 720px;
6 --header-height: 60px;
7 --footer-height: 60px;
8 --radius: 8px;
9 --theme: rgb(255, 255, 255);
10 --entry: rgb(255, 255, 255);
11 --primary: rgb(30, 30, 30);
12 --secondary: rgb(108, 108, 108);
13 --tertiary: rgb(214, 214, 214);
14 --content: rgb(31, 31, 31);
15 --code-block-bg: rgb(245, 245, 245);
16 --code-bg: rgb(245, 245, 245);
17 --border: rgb(238, 238, 238);
18}
19
20.dark {
21 --theme: rgb(29, 30, 32);
22 --entry: rgb(46, 46, 51);
23 --primary: rgb(218, 218, 219);
24 --secondary: rgb(155, 156, 157);
25 --tertiary: rgb(65, 66, 68);
26 --content: rgb(196, 196, 197);
27 --code-block-bg: rgb(46, 46, 51);
28 --code-bg: rgb(46, 46, 51);
29 --border: rgb(51, 51, 51);
30}
然后，修改一下配置即可，
1params:
2 assets:
3 disableHLJS: true
4markup:
5 goldmark:
6 renderer:
7 unsafe: true # 可以 unsafe，有些 html 标签和样式可能需要
8 highlight:
9 anchorLineNos: false # 不要给行号设置锚标
10 codeFences: true # 代码围栏
11 noClasses: false # TODO: 不知道干啥的，暂时没必要了解，不影响展示
12 lineNos: true # 代码行
13 lineNumbersInTable: false # 不要设置成 true，否则如果文章开头是代码的话，摘要会由一大堆数字(即代码行号)开头文章
14 # 这里设置 style 没用，得自己加 css
15 # style: "github-dark"
16 # style: monokai
到这里就可以明暗切换了
修改网页的 favicon
先到 flaticon 网站中找一个 icon 图片，然后放到 static 目录下，
然后，修改配置，
1params:
2 # 设置网站的标签页的图标，即 favicon
3 assets:
4 favicon: "favicon.png"
5 favicon16x16: "favicon.png"
6 favicon32x32: "favicon.png"
7 apple_touch_icon: "favicon.png"
8 safari_pinned_tab: "favicon.png"
下面是一些css的简单样式（可选）
我们再建立一个 dev\assets\css\extended\scroll-bar-overrides.css 文件，
1/* from reset */
2::-webkit-scrollbar-track {
3 background: 0 0;
4}
5
6.list:not(.dark)::-webkit-scrollbar-track {
7 background: var(--code-bg);
8}
9
10::-webkit-scrollbar-thumb {
11 background: var(--tertiary);
12 border: 5px solid var(--theme);
13 border-radius: 0;
14}
15::-webkit-scrollbar-thumb:hover {
16 background: var(--secondary);
17}
18
19.list:not(.dark)::-webkit-scrollbar-thumb {
20 border: 5px solid var(--code-bg);
21}
22
23
24::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) {
25 background: var(--theme);
26}
27
28/* from post-single */
29.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
30 display: none;
31}
32
33/**/
34/* 代码块的滚动条 */
35/**/
36.post-content :not(table) ::-webkit-scrollbar-thumb {
37 border: 2px solid var(--code-block-bg);
38 /*background: rgb(113, 113, 117);*/
39 background: var(--tertiary);
40}
41/* 鼠标悬浮在上面的时候 */
42.post-content :not(table) ::-webkit-scrollbar-thumb:hover {
43 /*background: rgb(163, 163, 165);*/
44 background: var(--secondary);
45}
46
47.gist table::-webkit-scrollbar-thumb {
48 border: 2px solid rgb(255, 255, 255);
49 background: rgb(173, 173, 173);
50}
51
52.gist table::-webkit-scrollbar-thumb:hover {
53 background: rgb(112, 112, 112);
54}
55
56.post-content table::-webkit-scrollbar-thumb {
57 border-width: 2px;
58}
59
60/* from zmedia */
61/* 这里将 min-width 设置得尽量小一点，是为了防止在移动端的滚动条的样式失效 */
62@media screen and (min-width: 100px) {
63
64 /* reset */
65 ::-webkit-scrollbar {
66 width: 19px;
67 height: 11px;
68 }
69}
我们再建立一个 dev\assets\css\extended\footer-overrides.css 文件，
1/* 移动设备中应该隐藏掉 scroll-to-top de 按钮 */
2@media (width < 600px) {
3 #top-link {
4 display: none;
5 }
6}
配置侧边目录
官方的默认目录形式很不方便，查看目录还需要翻到最上面，详细内容
🚅toc代码
先找到目录 layouts/partials/toc.html ，把之前的代码换成如下代码
1{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
2{{- $has_headers := ge (len $headers) 1 -}}
3{{- if $has_headers -}}
4<aside id="toc-container" class="toc-container wide">
5 <div class="toc">
6 <details {{if (.Param "TocOpen") }} open{{ end }}>
7 <summary accesskey="c" title="(Alt + C)">
8 <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
9 </summary>
10
11 <div class="inner">
12 {{- $largest := 6 -}}
13 {{- range $headers -}}
14 {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
15 {{- $headerLevel := len (seq $headerLevel) -}}
16 {{- if lt $headerLevel $largest -}}
17 {{- $largest = $headerLevel -}}
18 {{- end -}}
19 {{- end -}}
20
21 {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
22
23 {{- $.Scratch.Set "bareul" slice -}}
24 <ul>
25 {{- range seq (sub $firstHeaderLevel $largest) -}}
26 <ul>
27 {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
28 {{- end -}}
29 {{- range $i, $header := $headers -}}
30 {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
31 {{- $headerLevel := len (seq $headerLevel) -}}
32
33 {{/* get id="xyz" */}}
34 {{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
35
36 {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
37 {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
38 {{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
39
40 {{- if ne $i 0 -}}
41 {{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
42 {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
43 {{- if gt $headerLevel $prevHeaderLevel -}}
44 {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
45 <ul>
46 {{/* the first should not be recorded */}}
47 {{- if ne $prevHeaderLevel . -}}
48 {{- $.Scratch.Add "bareul" . -}}
49 {{- end -}}
50 {{- end -}}
51 {{- else -}}
52 </li>
53 {{- if lt $headerLevel $prevHeaderLevel -}}
54 {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
55 {{- if in ($.Scratch.Get "bareul") . -}}
56 </ul>
57 {{/* manually do pop item */}}
58 {{- $tmp := $.Scratch.Get "bareul" -}}
59 {{- $.Scratch.Delete "bareul" -}}
60 {{- $.Scratch.Set "bareul" slice}}
61 {{- range seq (sub (len $tmp) 1) -}}
62 {{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
63 {{- end -}}
64 {{- else -}}
65 </ul>
66 </li>
67 {{- end -}}
68 {{- end -}}
69 {{- end -}}
70 {{- end }}
71 <li>
72 <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
73 {{- else }}
74 <li>
75 <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
76 {{- end -}}
77 {{- end -}}
78 <!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
79 {{- $firstHeaderLevel := $largest }}
80 {{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
81 </li>
82 {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
83 {{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
84 </ul>
85 {{- else }}
86 </ul>
87 </li>
88 {{- end -}}
89 {{- end }}
90 </ul>
91 </div>
92 </details>
93 </div>
94</aside>
95<script>
96 let activeElement;
97 let elements;
98 window.addEventListener('DOMContentLoaded', function (event) {
99 checkTocPosition();
100
101 elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
102 // Make the first header active
103 activeElement = elements[0];
104 const id = encodeURI(activeElement.getAttribute('id')).toLowerCase();
105 document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
106 }, false);
107
108 window.addEventListener('resize', function(event) {
109 checkTocPosition();
110 }, false);
111
112 window.addEventListener('scroll', () => {
113 // Check if there is an object in the top half of the screen or keep the last item active
114 activeElement = Array.from(elements).find((element) => {
115 if ((getOffsetTop(element) - window.pageYOffset) > 0 &&
116 (getOffsetTop(element) - window.pageYOffset) < window.innerHeight/2) {
117 return element;
118 }
119 }) || activeElement
120
121 elements.forEach(element => {
122 const id = encodeURI(element.getAttribute('id')).toLowerCase();
123 if (element === activeElement){
124 document.querySelector(`.inner ul li a[href="#${id}"]`).classList.add('active');
125 } else {
126 document.querySelector(`.inner ul li a[href="#${id}"]`).classList.remove('active');
127 }
128 })
129 }, false);
130
131 const main = parseInt(getComputedStyle(document.body).getPropertyValue('--article-width'), 10);
132 const toc = parseInt(getComputedStyle(document.body).getPropertyValue('--toc-width'), 10);
133 const gap = parseInt(getComputedStyle(document.body).getPropertyValue('--gap'), 10);
134
135 function checkTocPosition() {
136 const width = document.body.scrollWidth;
137
138 if (width - main - (toc * 2) - (gap * 4) > 0) {
139 document.getElementById("toc-container").classList.add("wide");
140 } else {
141 document.getElementById("toc-container").classList.remove("wide");
142 }
143 }
144
145 function getOffsetTop(element) {
146 if (!element.getClientRects().length) {
147 return 0;
148 }
149 let rect = element.getBoundingClientRect();
150 let win = element.ownerDocument.defaultView;
151 return rect.top + win.pageYOffset;
152 }
153</script>
154{{- end }}
🚅调用代码
找到目录 layouts/_default/about.html
1 {{- if (.Param "ShowToc") }}
2 {{- partial "toc.html" . }}
3 {{- end }}
大概是这个位置，看着放
🚅修改css
找到目录 css/extended/blank.css ，添加如下代码，
1:root {
2 --nav-width: 1380px;
3 --article-width: 650px;
4 --toc-width: 300px;
5}
6
7.toc {
8 margin: 0 2px 40px 2px;
9 border: 1px solid var(--border);
10 background: var(--entry);
11 border-radius: var(--radius);
12 padding: 0.4em;
13}
14
15.toc-container.wide {
16 position: absolute;
17 height: 100%;
18 border-right: 1px solid var(--border);
19 left: calc((var(--toc-width) + var(--gap)) * -1);
20 top: calc(var(--gap) * 2);
21 width: var(--toc-width);
22}
23
24.wide .toc {
25 position: sticky;
26 top: var(--gap);
27 border: unset;
28 background: unset;
29 border-radius: unset;
30 width: 100%;
31 margin: 0 2px 40px 2px;
32}
33
34.toc details summary {
35 cursor: zoom-in;
36 margin-inline-start: 20px;
37 padding: 12px 0;
38}
39
40.toc details[open] summary {
41 font-weight: 500;
42}
43
44.toc-container.wide .toc .inner {
45 margin: 0;
46}
47
48.active {
49 font-size: 110%;
50 font-weight: 600;
51}
52
53.toc ul {
54 list-style-type: circle;
55}
56
57.toc .inner {
58 margin: 0 0 0 20px;
59 padding: 0px 15px 15px 20px;
60 font-size: 16px;
61}
62
63.toc li ul {
64 margin-inline-start: calc(var(--gap) * 0.5);
65 list-style-type: none;
66}
67
68.toc li {
69 list-style: none;
70 font-size: 0.95rem;
71 padding-bottom: 5px;
72}
73
74.toc li a:hover {
75 color: var(--secondary);
76}
4. 部署到 Github Pages
我们这里就选用简单的第一种比较直接的方式。
新建一个仓库，没有什么好说的，然后把我们当前的这个仓库和远程仓库关联起来，然后推送过去。然后按照 Hugo 的文档指导来操作即可。
打开github仓库的设置
在dev下打开终端输入
1git add .
2git commit -m "update"
3git branch -M main
4git remote add origin https://github.com/用户名/仓库名.git
5git push -u origin main
刷新几下等github部署完成会出现下图，点击链接，会发现网页404错误，这是正常现象
创建dev/.github/workflows/hugo.yaml
1# Sample workflow for building and deploying a Hugo site to GitHub Pages
2name: Deploy Hugo site to Pages
3
4on:
5 # Runs on pushes targeting the default branch
6 push:
7 branches:
8 - main
9
10 # Allows you to run this workflow manually from the Actions tab
11 workflow_dispatch:
12
13# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
14permissions:
15 contents: read
16 pages: write
17 id-token: write
18
19# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
20# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
21concurrency:
22 group: "pages"
23 cancel-in-progress: false
24
25# Default to bash
26defaults:
27 run:
28 shell: bash
29
30jobs:
31 # Build job
32 build:
33 runs-on: ubuntu-latest
34 env:
35 HUGO_VERSION: 0.144.2
36 steps:
37 - name: Install Hugo CLI
38 run: |
39 wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
40 && sudo dpkg -i ${{ runner.temp }}/hugo.deb
41 - name: Install Dart Sass
42 run: sudo snap install dart-sass
43 - name: Checkout
44 uses: actions/checkout@v4
45 with:
46 submodules: recursive
47 fetch-depth: 0
48 - name: Setup Pages
49 id: pages
50 uses: actions/configure-pages@v5
51 - name: Install Node.js dependencies
52 run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
53 - name: Build with Hugo
54 env:
55 HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
56 HUGO_ENVIRONMENT: production
57 TZ: America/Los_Angeles
58 run: |
59 hugo \
60 --gc \
61 --minify \
62 --baseURL "${{ steps.pages.outputs.base_url }}/"
63 - name: Upload artifact
64 uses: actions/upload-pages-artifact@v3
65 with:
66 path: ./public
67
68 # Deployment job
69 deploy:
70 environment:
71 name: github-pages
72 url: ${{ steps.deployment.outputs.page_url }}
73 runs-on: ubuntu-latest
74 needs: build
75 steps:
76 - name: Deploy to GitHub Pages
77 id: deployment
78 uses: actions/deploy-pages@v4
下面这两个地方需要改一下
在终端输入,查看hugo版本
1hugo version
如图修改，github上面也能看分支，对应修改就行
最后推送一下,以后添加了文章直接使用下面代码就可以上传到github上
1git add .
2git commit -m "update2"
3git push
完事儿。
5. 故障修复
网站打开发现主题没有应用上去，PaperMod点链接下载一下。
下载好之后有一个PaperMod文件夹，将他与dev\themes\PaperMod文件夹替换
然后，推送一下
1git add .
2git commit -m "update2"
3git push
6. 项目目录
1C:\USERS\LFL\HUGO\DEV
2│ .gitignore
3│ .gitmodules
4│ .hugo_build.lock
5│ hugo.yaml
6│
7├─.github
8│ └─workflows
9│ hugo.yaml
10│
11├─archetypes
12│ default.md
13│
14├─assets
15│ └─css
16│ └─extended
17│ blank.css
18│ chroma-styles-overrides.css
19│
20├─content
21│ │ about.md
22│ │ archives.md
23│ │ search.md
24│ │
25│ └─posts
26│ my-first.md
27│
28├─data
29├─i18n
30├─layouts
31│ ├─partials
32│ │ comments.html
33│ │ extend_head.html
34│ │ mathjax.html
35│ │
36│ └─_default
37│ about.html
38│
39├─public
40│ │ 404.html
41│ │ index.html
42│ │ index.json
43│ │ index.xml
44│ │ robots.txt
45│ │ sitemap.xml
46│ │
47│ ├─about
48│ │ index.html
49│ │
50│ ├─archives
51│ │ index.html
52│ │
53│ ├─assets
54│ │ ├─css
55│ │ │ stylesheet.7e29a6932e46dab2e64f09b88f1364af287effdd98eaff77b2ff32b42c5679e3.css
56│ │ │
57│ │ └─js
58│ │ search.21902eb1eaf2a5055095350eeb73f1755a5d7d2b4f31e302e5fec6a0f4ba4456.js
59│ │
60│ ├─categories
61│ │ │ index.html
62│ │ │ index.xml
63│ │ │
64│ │ └─通用技术
65│ │ │ index.html
66│ │ │ index.xml
67│ │ │
68│ │ └─page
69│ │ └─1
70│ │ index.html
71│ │
72│ ├─page
73│ │ └─1
74│ │ index.html
75│ │
76│ ├─posts
77│ │ │ index.html
78│ │ │ index.xml
79│ │ │
80│ │ ├─my-first
81│ │ │ index.html
82│ │ │
83│ │ └─page
84│ │ └─1
85│ │ index.html
86│ │
87│ ├─search
88│ │ index.html
89│ │
90│ └─tags
91│ │ index.html
92│ │ index.xml
93│ │
94│ ├─bilibili
95│ │ │ index.html
96│ │ │ index.xml
97│ │ │
98│ │ └─page
99│ │ └─1
100│ │ index.html
101│ │
102│ └─博客搭建
103│ │ index.html
104│ │ index.xml
105│ │
106│ └─page
107│ └─1
108│ index.html
109│
110├─resources
111│ └─_gen
112│ ├─assets
113│ └─images
114├─static
115└─themes
116 └─PaperMod
117 │ go.mod
118 │ LICENSE
119 │ README.md
120 │ theme.toml
121 │
122 ├─.github
123 │ │ PULL_REQUEST_TEMPLATE.md
124 │ │
125 │ ├─ISSUE_TEMPLATE
126 │ │ bug.yaml
127 │ │ config.yml
128 │ │ enhancement.yaml
129 │ │
130 │ └─workflows
131 │ gh-pages.yml
132 │
133 ├─assets
134 │ ├─css
135 │ │ ├─common
136 │ │ │ 404.css
137 │ │ │ archive.css
138 │ │ │ footer.css
139 │ │ │ header.css
140 │ │ │ main.css
141 │ │ │ post-entry.css
142 │ │ │ post-single.css
143 │ │ │ profile-mode.css
144 │ │ │ search.css
145 │ │ │ terms.css
146 │ │ │
147 │ │ ├─core
148 │ │ │ license.css
149 │ │ │ reset.css
150 │ │ │ theme-vars.css
151 │ │ │ zmedia.css
152 │ │ │
153 │ │ ├─extended
154 │ │ │ blank.css
155 │ │ │
156 │ │ └─includes
157 │ │ chroma-mod.css
158 │ │ chroma-styles.css
159 │ │ scroll-bar.css
160 │ │
161 │ └─js
162 │ fastsearch.js
163 │ fuse.basic.min.js
164 │ license.js
165 │
166 ├─i18n
167 │ ar.yaml
168 │ be.yaml
169 │ bg.yaml
170 │ bn.yaml
171 │ ca.yaml
172 │ ckb.yaml
173 │ cs.yaml
174 │ da.yaml
175 │ de.yaml
176 │ el.yaml
177 │ en.yaml
178 │ eo.yaml
179 │ es.yaml
180 │ fa.yaml
181 │ fr.yaml
182 │ he.yaml
183 │ hi.yaml
184 │ hr.yaml
185 │ hu.yaml
186 │ id.yaml
187 │ it.yaml
188 │ ja.yaml
189 │ ko.yaml
190 │ ku.yaml
191 │ mn.yaml
192 │ ms.yaml
193 │ nl.yaml
194 │ no.yaml
195 │ oc.yaml
196 │ pa.yaml
197 │ pl.yaml
198 │ pnb.yaml
199 │ pt.yaml
200 │ ro.yaml
201 │ ru.yaml
202 │ sk.yaml
203 │ sv.yaml
204 │ sw.yaml
205 │ th.yaml
206 │ tr.yaml
207 │ uk.yaml
208 │ uz.yaml
209 │ vi.yaml
210 │ zh-tw.yaml
211 │ zh.yaml
212 │
213 ├─images
214 │ screenshot.png
215 │ tn.png
216 │
217 └─layouts
218 │ 404.html
219 │ robots.txt
220 │
221 ├─partials
222 │ │ anchored_headings.html
223 │ │ author.html
224 │ │ breadcrumbs.html
225 │ │ comments.html
226 │ │ cover.html
227 │ │ edit_post.html
228 │ │ extend_footer.html
229 │ │ extend_head.html
230 │ │ footer.html
231 │ │ head.html
232 │ │ header.html
233 │ │ home_info.html
234 │ │ index_profile.html
235 │ │ post_canonical.html
236 │ │ post_meta.html
237 │ │ post_nav_links.html
238 │ │ share_icons.html
239 │ │ social_icons.html
240 │ │ svg.html
241 │ │ toc.html
242 │ │ translation_list.html
243 │ │
244 │ └─templates
245 │ │ opengraph.html
246 │ │ schema_json.html
247 │ │ twitter_cards.html
248 │ │
249 │ └─_funcs
250 │ get-page-images.html
251 │
252 ├─shortcodes
253 │ collapse.html
254 │ figure.html
255 │ inTextImg.html
256 │ ltr.html
257 │ rawhtml.html
258 │ rtl.html
259 │
260 └─_default
261 │ archives.html
262 │ baseof.html
263 │ index.json
264 │ list.html
265 │ rss.xml
266 │ search.html
267 │ single.html
268 │ terms.html
269 │
270 └─_markup
271 render-image.html
7. 文章模板
文章模板是文章头部的基本配置，当你使用下面命令创建md文件时，基本配置会自动加入dev\archetypes\default.md修改成下面代码
1---
2title: "{{ replace .Name "-" " " | title }}"
3date: {{ .Date }}
4lastmod: {{ .Date }}
5draft: true # 是否为草稿
6author: ["tkk"]
7
8categories: []
9
10tags: []
11
12keywords: []
13
14description: "" # 文章描述，与搜索优化相关
15summary: "" # 文章简单描述，会展示在主页
16weight: # 输入1可以顶置文章，用来给文章展示排序，不填就默认按时间排序
17slug: ""
18comments: false
19autoNumbering: true # 目录自动编号
20hideMeta: false # 是否隐藏文章的元信息，如发布日期、作者等
21mermaid: true
22cover:
23 image: ""
24 caption: ""
25 alt: ""
26 relative: false
27---
28#不加这个的话图床的图片会被浏览器墙掉
29<meta name="referrer" content="no-referrer" />