Hugo + PaperMod搭建技术博客

安装过程

首先需要安装Hugo，安装Hugo需要利用一个包管理工具，对于Windows系统Hugo可以直接用Winget来安装，打开终端输入
```
winget install Hugo.Hugo.Extended
```
如果提示not recognized as the name of cmdlet，查找C:\Users\Username\AppData\Local\Microsoft\WindowsApps目录下有没有winget.exe，如果存在则添加这个目录到环境变量，否则去应用商店找winget，这是windows官方提供的windows包管理工具，一般系统里都会自带。
Hugo的tutorial介绍了如何创建一个项目，其中step2（.yml的config文件）和step3（下载主题）要根据PaperMod的guide来配置。

文件介绍

content：用于放博客内容
data：不用管
layouts：自定义的HTML
public：项目导出文件
resources：自定义的CSS和JavaScript
static：存放的图片
themes：主题

进入themes/PaperMod则是PaperMod的相关代码，比较主要的目录有：

assets：PaperMod的CSS和JavaScript代码
layouts：PaperMod的HTML

Config.yml

建议直接按照【置顶】hugo博客搭建 | PaperMod主题 | Sulv’s Blog (sulvblog.cn)进行配置。

创建文章

在终端输入hugo new 文章名称.md就会在content文件夹下创建markdown文件，文章头部信息可以修改这篇文章的属性

常见的头部字段功能

基本字段

title: 页面标题，用于显示在浏览器标题、文章标题等地方

date: 创建日期，例如 2024-11-15T20:00:00+00:00

lastmod: 最近修改时间，常用于生成更新时间

draft: 是否为草稿（true 表示草稿，生成站点时会被忽略）

author: 作者名称 description: 页面描述，用于 SEO 和摘要

slug: 页面友好的 URL 片段

url: 自定义页面 URL type: 页面类型（例如 post、page），决定模板的选择
分类和标签

categories: 页面所属分类，例如 [“Tech”, “Programming”]

tags: 页面标签，例如 [“Hugo”, “Static Site Generator”]
页面内容控制

summary: 页面摘要，如果未指定，会自动从内容中提取

weight: 排序权重，数值越小越靠前

aliases: 页面别名，用于创建 URL 重定向，例如 ["/old-url/"]

layout: 指定使用的布局模板，例如 single 或 list

outputs: 输出格式，默认是 HTML，可以是 JSON、AMP 等

resources: 页面资源，用于定义图片、PDF 等
SEO和社交

keywords: 页面关键字，例如 [“Hugo”, “Markdown”, “SEO”]

canonical: Canonical URL，指定搜索引擎的首选页面地址

images: 页面分享时的图片链接（用于社交平台）

创建子文件夹

可以直接用文件夹来管理目录，比如这是我中文博客的目录

@Kunyang ➜ blog git(master) tree /F
D:.
│   _index.md
│
├───Life
│	...
├───Tech
│   │   _index.md
│   │
│   ├───Web
│   │       Papermod.md
|   |       ...
│   │       _index.md
│   │...
│
└───Wool
	...

可以看到每一层都有一个_index.md用来管理文件层级，文件中只包含头部信息。由于我使用了多语言，因此第一层不要添加url字段

# zh/blog/_index.md
title: "博客 📒"
date: 2022-06-11T21:59:32-04:00
draft: false
hidemeta: true

除此之外，在其他的子文件夹中的_index.md建议都添加url字段

# zh/blog/tech/web/_index.md
title: "建站 🚧"
date: 2024-11-15T01:01:32-04:00
draft: false
hidemeta: true
url: "/zh/blog/tech/web/"
weight: 1

可以使用weight字段来排序

最后更新

可以修改post_meta.html加入

{{- $scratch := newScratch }}

{{ $date := .Date }}
{{ $lastmod := "" }}

{{- if not .Lastmod.IsZero -}}
  {{ $lastmod = .Lastmod }}
{{- end }}

{{- if not .Date.IsZero -}}
{{- $scratch.Add "meta" (slice (printf "<span title='%s'>%s</span>" (.Date) (.Date | time.Format (default "January 2, 2006" site.Params.DateFormat)))) }}
{{- end }}

{{- if ne $lastmod $date -}}
{{- $scratch.Add "meta" (slice (printf "<span title='%s'>%s%s</span>" (.Lastmod) (i18n "updated") (.Lastmod | time.Format (default "January 2, 2006" site.Params.DateFormat)))) }}
{{- end }}

...
{{- with ($scratch.Get "meta") }}
{{- delimit . "&nbsp;·&nbsp;" -}}
{{- end -}}

本地预览

在终端输入hugo server -D启动，建议新建一个.bat文件执行这条指令。
启动服务器后，打开浏览器，本地预览网址为localhost:1313。

网站部署

我用的是GitHub Page

在GitHub里创建一个仓库，名称叫做你的名字.github.io
当我们本地预览没问题了的时候，在终端输入hugo -F --cleanDestinationDir，在public文件夹下就会生成输出文件
我们将public文件夹作为GitHub Page的本地仓库，每次生成输出文件就推送到GitHub上，GitHub Page就会自动帮我们部署了

自定义域名

建议早一点买个域名，避免配置完一遍结果更换了域名又得重新再配置一遍。

点击GitHub右上角头像 → Settings → Pages → Add a Domain
填入自己的域名，我的是kyxie.me，然后会生成一个DNS TXT record，相当于一个用户名和密码，验证一下这个域名是属于你的
我的域名是在cloudflare申请的，在kyxie.me -> DNS -> Records -> Add Records，添加三条规则，前两条为

Type Name Target

CNAME @ kyxie.github.io

CNAME www kyxie.github.io

第三条Type是TXT，Name为GitHub生成的Record，TTL选择Auto，Content是GitHub生成的Value
然后在SSL/TLS -> Edge Certificates -> 勾选Always Use HTTPS
配置完后回到GitHub，点击Verify，成功后会如图所示
我的网站框架为Hugo，在static文件下添加一个文件CNAME，没有后缀名，内容为你的域名kyxie.me，然后publish出来push到GitHub就好了

Type	Name	Target
CNAME	@	kyxie.github.io
CNAME	www	kyxie.github.io

多语言

如果我们想要使用多语言（中英为例），就需要在content文件夹下准备两个文件夹，例如Chinese和English，一个放中文，另一个放英文。

在config.yml中需要做以下修改：

defaultContentLanguage: en
defaultContentLanguageInSubdir: true

languages:
    en:
        languageName: "English"
        contentDir: content/English
    zh:
    	languageName: "中文"
        contentDir: content/Chinese

搜索功能

分别在中英文的文件夹下创建search.md（hugo new search.md），修改文件头为
```
title: "Search"
date: ...
draft: false
layout: search
```

config.yml中添加

menu:
	main:
		-identifier: Search
		name: Search
		url: search
		weight: ...

Hover

主要在themes/PaperMod/assets/css/common/header.css中修改。

左上角Home的hover

.logo a:hover {
    transition: 0.15s;
    color: grey;
}

社交媒体hover

svg:hover {
    transition: 0.15s;
}

.social-icons a:nth-child(1) svg:hover{
    color: #C84370 !important;
}

.social-icons a:nth-child(2) svg:hover {
    color: grey !important;
}

...

nth-child可以设置各个图标的hover颜色

黑夜模式和白天模式的hover

#moon:hover {
    transition: 0.15s;
    color: deepskyblue;
}

#sun:hover {
    transition: 0.15s;
    color: gold;
}

menu中链接hover

#menu a:hover {
    transition: 0.15s;
    color: grey;
}

按钮hover，在themes/PaperMod/assets/css/common/profile-mode.css中修改

.button:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    /* box-shadow: 0 0 0 1px grey; */
    transform: scale(1.1) translateZ(0) translate3d(0, 0, 0) rotate(0.01deg);
}

自定义社交媒体图标

利用SVG图标制作网站，比如icons8，找到我们需要的图标，例如微信
可以利用左侧菜单栏的Stroke调节线条粗细
点击download，SVG Embed，自定义图标大小为24*24，然后点击copy HTML
在themes/PaperMod/layouts/partials/svg.html中粘贴复制的HTML
需要修改为fill=currentColor stroke=currentColor，才能适应白天黑夜切换

微信和微博的图标

{{- else if (eq $icon_name "wechat") -}}
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 50 50">
    <g fill="currentColor" stroke="currentColor" stroke-width="2">
        <path
            d="M 19 6 C 9.746094 6 2 12.359375 2 20.5 C 2 24.894531 4.292969 28.679688 7.835938 31.324219 L 5.179688 39.304688 L 13.472656 34.167969 C 15.1875 34.707031 17.082031 35 19 35 C 19.746094 35 20.472656 34.945313 21.195313 34.863281 C 23.378906 39.105469 28.328125 42 34 42 C 35.722656 42 37.316406 41.675781 38.796875 41.234375 L 45.644531 45.066406 L 43.734375 38.515625 C 46.3125 36.375 48 33.394531 48 30 C 48 23.789063 42.597656 18.835938 35.75 18.105469 C 34.398438 11.125 27.324219 6 19 6 Z M 19 8 C 26.308594 8 32.328125 12.351563 33.703125 18.011719 C 26.183594 18.148438 20 23.355469 20 30 C 20 31.019531 20.160156 32.003906 20.4375 32.941406 C 19.964844 32.980469 19.484375 33 19 33 C 17.101563 33 15.199219 32.710938 13.632813 32.15625 L 13.183594 32 L 8.820313 34.699219 L 10.1875 30.59375 L 9.5625 30.171875 C 6.082031 27.820313 4 24.445313 4 20.5 C 4 13.640625 10.65625 8 19 8 Z M 13 14 C 11.898438 14 11 14.898438 11 16 C 11 17.101563 11.898438 18 13 18 C 14.101563 18 15 17.101563 15 16 C 15 14.898438 14.101563 14 13 14 Z M 25 14 C 23.898438 14 23 14.898438 23 16 C 23 17.101563 23.898438 18 25 18 C 26.101563 18 27 17.101563 27 16 C 27 14.898438 26.101563 14 25 14 Z M 34 20 C 40.746094 20 46 24.535156 46 30 C 46 32.957031 44.492188 35.550781 42.003906 37.394531 L 41.445313 37.8125 L 42.355469 40.933594 L 39.105469 39.109375 L 38.683594 39.25 C 37.285156 39.71875 35.6875 40 34 40 C 27.253906 40 22 35.464844 22 30 C 22 24.535156 27.253906 20 34 20 Z M 29.5 26 C 28.699219 26 28 26.699219 28 27.5 C 28 28.300781 28.699219 29 29.5 29 C 30.300781 29 31 28.300781 31 27.5 C 31 26.699219 30.300781 26 29.5 26 Z M 38.5 26 C 37.699219 26 37 26.699219 37 27.5 C 37 28.300781 37.699219 29 38.5 29 C 39.300781 29 40 28.300781 40 27.5 C 40 26.699219 39.300781 26 38.5 26 Z">
        </path>
    </g>
</svg>
{{- else if (eq $icon_name "weibo") -}}
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 172 172">
    <g fill="currentColor" stroke="currentColor" stroke-width="4">
        <path
            d="M120.4,20.64c-2.67406,0 -5.25406,0.26875 -7.74,0.71219c-1.86781,0.3225 -3.1175,2.10969 -2.795,3.9775c0.3225,1.88125 2.10969,3.13094 3.9775,2.80844c2.17688,-0.38969 4.35375,-0.61813 6.5575,-0.61813c20.93563,0 37.84,16.90438 37.84,37.84c0,4.52844 -0.83312,8.85531 -2.31125,12.91344c-0.45687,1.16906 -0.25531,2.48594 0.5375,3.45344c0.80625,0.9675 2.05594,1.42437 3.29219,1.19594c1.23625,-0.22844 2.24406,-1.11531 2.63375,-2.29781c1.73344,-4.75687 2.72781,-9.87656 2.72781,-15.265c0,-24.65781 -20.06219,-44.72 -44.72,-44.72zM120.4,41.28c-1.46469,0 -2.84875,0.14781 -4.16562,0.37625c-1.86781,0.33594 -3.13094,2.10969 -2.795,3.99094c0.3225,1.86781 2.10969,3.1175 3.9775,2.795c1.00781,-0.17469 2.00219,-0.28219 2.98312,-0.28219c9.54063,0 17.2,7.65938 17.2,17.2c0,2.05594 -0.37625,4.01781 -1.06156,5.87219c-0.645,1.78719 0.28219,3.7625 2.06938,4.4075c1.78719,0.645 3.7625,-0.26875 4.4075,-2.05594c0.92719,-2.55312 1.46469,-5.32125 1.46469,-8.22375c0,-13.26281 -10.81719,-24.08 -24.08,-24.08zM72.46844,42.6775c-11.04562,0 -27.50656,8.66719 -42.18031,23.07219c-14.76781,14.76781 -23.40813,30.24781 -23.40813,43.57781c0,25.9075 33.12344,41.3875 65.88406,41.3875c42.47594,0 70.90969,-24.46969 70.90969,-43.91375c0,-11.87875 -10.07812,-18.35562 -19.08125,-21.23125c-2.15,-0.72562 -3.60125,-1.08844 -2.52625,-3.96406c0.72563,-1.73344 1.77375,-5.01219 1.77375,-9.36594c0,-4.945 -3.44,-9.23156 -10.32,-9.9975c-0.79281,-0.08062 -2.13656,-0.14781 -3.82969,-0.14781c-5.6975,0 -15.48,0.71219 -22.52125,3.66844c0,0 -1.38406,0.57781 -2.49938,0.57781c-1.00781,0 -1.80062,-0.48375 -1.11531,-2.37844c2.52625,-7.91469 2.16344,-14.39156 -1.80063,-18.00625c-2.23062,-2.23062 -5.42875,-3.27875 -9.28531,-3.27875zM72.46844,49.5575c1.43781,0 3.37281,0.215 4.43438,1.26313l0.1075,0.12094l0.12094,0.1075c1.54531,1.41094 1.51844,5.61687 -0.09406,10.72312c-1.38406,3.99094 -0.09406,6.75906 0.81969,8.04906c1.51844,2.16344 4.00437,3.39969 6.81281,3.39969c2.28438,0 4.39406,-0.79281 5.14656,-1.11531c5.50938,-2.31125 13.88094,-3.13094 19.87406,-3.13094c1.53187,0 2.60687,0.05375 3.07719,0.1075c2.78156,0.30906 4.1925,1.37063 4.1925,3.15781c0,3.23844 -0.77937,5.61688 -1.23625,6.73219l-0.05375,0.1075l-0.04031,0.09406c-1.075,2.88906 -1.06156,5.50938 0.04031,7.80719c1.62594,3.39969 4.82406,4.46125 6.54406,5.03906l0.28219,0.09406c5.34813,1.70656 14.2975,5.88562 14.2975,14.68719c0,7.90125 -6.81281,17.65688 -18.90656,25.16844c4.77031,-5.54969 7.47125,-12.05344 7.47125,-19.05437c0,-21.01625 -24.37562,-37.47719 -55.48344,-37.47719c-31.10781,0 -55.47,16.46094 -55.47,37.47719c0,0.645 0.01344,1.27656 0.05375,1.90812c-0.45687,-1.76031 -0.69875,-3.60125 -0.69875,-5.49594c0,-11.16656 7.59219,-24.91312 21.33875,-38.65969c14.86188,-14.59313 29.48188,-21.11031 37.36969,-21.11031zM69.875,82.33156c26.84813,0 48.60344,13.69281 48.60344,30.59719c0,16.89094 -21.75531,30.58375 -48.60344,30.58375c-26.83469,0 -48.59,-13.69281 -48.59,-30.58375c0,-16.90437 21.75531,-30.59719 48.59,-30.59719zM66.27375,89.52063c-10.38719,0.08062 -20.47875,5.76469 -24.85937,14.52594c-5.40188,11.13969 -0.36281,23.38125 12.59094,27.33187c12.95375,4.31344 28.42031,-2.16344 33.82219,-14.02875c5.38844,-11.5025 -1.43781,-23.73062 -14.39156,-26.95562c-2.365,-0.61813 -4.77031,-0.88688 -7.16219,-0.87344zM71.63531,104.06c1.98875,0 3.60125,1.59906 3.60125,3.58781c0,1.98875 -1.6125,3.60125 -3.60125,3.60125c-1.98875,0 -3.60125,-1.6125 -3.60125,-3.60125c0,-1.98875 1.6125,-3.58781 3.60125,-3.58781zM56.47781,107.64781c1.12875,0.01344 2.2575,0.18812 3.31906,0.55094c4.60906,1.46469 6.02,5.83188 3.18469,9.47344c-2.4725,3.64156 -8.12969,5.45563 -12.38938,3.64156c-4.23281,-1.81406 -5.29437,-6.19469 -2.82187,-9.46c1.85437,-2.74125 5.30781,-4.24625 8.7075,-4.20594z">
        </path>
    </g>
    <path d="" fill="none"></path>
</svg>

目录栏目放侧边

详见：Hugo博客目录放在侧边 | PaperMod主题 | Sulv’s Blog (sulvblog.cn)。

Markdown渲染风格

详见：折腾 Hugo & PaperMod 主题 - Dvel’s Blog

流量统计

这里我使用了不蒜子，在themes/PaperMod/layouts/partials/footer.html中修改：

{{- if not (.Param "hideFooter") }}
<footer class="footer">
    {{- if site.Copyright }}
    <span>{{ site.Copyright | markdownify }}</span>
    {{- else }}
    <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
    {{- end }}
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        Visitors: <span id="busuanzi_value_site_uv"></span>
        Views: <span id="busuanzi_value_site_pv"></span>
    </span>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const uvElement = document.getElementById('busuanzi_value_site_uv');
            const pvElement = document.getElementById('busuanzi_value_site_pv');
            const initialUv = 10000;
            const initialPv = 20000;
            if (!uvElement || !pvElement) {
                console.error("Busuanzi elements not found.");
                return;
            }
            const uvObs = new MutationObserver((mutationsList) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        uvObs.disconnect();
                        mutation.target.innerHTML = parseInt(mutation.target.innerHTML || 0) + initialUv;
                        break;
                    }
                }
            });
            const pvObs = new MutationObserver((mutationsList) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        pvObs.disconnect();
                        mutation.target.innerHTML = parseInt(mutation.target.innerHTML || 0) + initialPv;
                        break;
                    }
                }
            });
            uvObs.observe(uvElement, { childList: true });
            pvObs.observe(pvElement, { childList: true });
        });
    </script>
</footer>
{{- end }}

其中initialUV和initialPV可以用于添加初始值，我由于换了个域名初始值都没了，可以在这里添加上

插入B站，YouTube视频或PPT

详见：Hugo博客自定义shortcodes | Sulv’s Blog (sulvblog.cn)

插入音乐播放器

~~详见：Hugo插入音乐播放器~~

~~隐藏歌词：lrc-type=0~~

修改全局字体

首先找到喜欢的字体，然后可以在Google Fonts中查询字体，我目前的文章字体为CodeNewRoman。Google Fonts会生成HTML和css，将HTML插入到themes/PaperMod/layouts/partials/extend_head.html中，将CSS插入到themes/PaperMod/assets/css/extended/blank.css。

body {
    font-family: 'Code New Roman', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

修改代码字体

与全局字体类似，区别为CSS代码插入的位置不同。

.post-content pre, code {
    font-family: 'Code New Roman', sans-serif;
    max-height: 40rem;
}

评论功能

详见：Hugo博客添加Twikoo评论 | Sulv’s Blog (sulvblog.cn)

Gmail邮箱配置

在Twikoo中进行配置：

SENDER_EMAIL：你的gmail邮箱
SENDER_NAME：发件人名，我写的是Notification from Kunyang’s Blog
SMTP_SERVICE：Gmail
SMTP_HOST：smtp.gmail.com
SMTP_PORT：587
SMTP_SECURE：true
SMTP_USER：你的gmail邮箱
SMTP_PASS：16位的应用密码
SMTP_SUBJECT：邮件主题，我写的是You have received a response from Kunyang’s Blog

MAIL_TEMPLATE：邮件模板，我的是

<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
    <h2 style="border-bottom:1px solid #dddddd;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
        You have received a new response from <a style="text-decoration:none;color:#12ADDB;" href="https://kyxie.github.io/" target="_blank">Kunyang's Blog</a>
    </h2>
    ${PARENT_NICK} Your comment:
    <div style="padding:0 12px 0 12px;margin-top:18px">
        <div style="background-color:#f5f5f5;padding:10px 15px;margin:18px 0;word-wrap:break-word;">
            ${PARENT_COMMENT}
        </div>
        <p>
            <strong>${NICK}</strong> says:
        </p>
        <div style="background-color:#f5f5f5;padding:10px 15px;margin:18px 0;word-wrap:break-word;">
            ${COMMENT}
        </div>
        <p>
            Click <a style="text-decoration:none;color:#12ADDB;" href="${POST_URL}" target="_blank">to view the reply</a>, welcome to <a style="text-decoration:none;color:#12ADDB;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>。<br>
        </p>
    </div>
</div>

配置完成后评论消息就会有gmail邮箱发送的邮件提醒了，outlook邮箱配置见：关于邮箱配置的问题？ · twikoojs/twikoo · Discussion #249 (github.com)。

自定义邮箱回复模板

详见：自定义Twikoo邮件通知模板 | Guo Le’s Blog

代码高亮

在两个地方修改

一个是themes/PaperMod/assets/css/common/post-single.css：

.post-content pre code {
    display: block;
    margin: auto 0;
    padding: 10px;
    /* 主要代码颜色 */
    color: #abb2bf;
    font-weight: 200;
    overflow-x: auto;
    word-break: break-all;
}

另一个是在themes/PaperMod/assets/css/hljs/an-old-hope.min.css，这是我自己修改的：

/* 注释 */
.hljs-comment,
.hljs-quote {
    font-weight: 200;
    color: #7f848e;
}

.hljs-deletion,
/* html标签 */
.hljs-name,
.hljs-regexp,
.hljs-tag {
    font-weight: 200;
    color: #e06c75;
}

/* html属性 */
.hljs-tag {
    font-weight: 200;
    color: #d19a66;
}

/* css类名 */
.hljs-template-variable,
.hljs-variable,
.hljs-selector-class,
.hljs-selector-id {
    font-weight: 200;
    color: #a9b600;
}

/* 内置函数 */
.hljs-built_in,
.hljs-builtin-name {
    font-weight: 200;
    color: #56b6c2;
}

/* 函数输入 */
.hljs-params {
    font-weight: 200;
    color: #e5c07b;
}

/* 数字 */
.hljs-number {
    font-weight: 200;
    color: #d19a66;
}

/* css属性 */
.hljs-attribute {
    font-weight: 200;
    color: #ee7c2b;
}

/* 字符串 */
.hljs-addition,
.hljs-bullet,
.hljs-symbol,
.hljs-string {
    font-weight: 200;
    color: #98c379;
}

/* 函数名称 */
.hljs-section,
.hljs-title {
    font-weight: 200;
    color: #56b6c2;
}

/* 关键字 */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-link,
.hljs-meta,
.hljs-type {
    font-weight: 200;
    color: #c678dd;
}

.hljs {
    display: block;
    overflow-x: auto;
    background: #1c1d21;
    color: #c0c5ce;
    padding: 0.5em;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 700;
}

/* 选中时的背景颜色 */
.hljs ::selection,
.hljs::selection {
    background-color: #3d4556;
}

代码边框圆角

themes/PaperMod/assets/css/common/post-single.css中修改：

.post-content .highlight pre {
    background-color: var(--theme) !important;
    margin: 0;
}

添加友链

详见：Hugo博客添加友链 | Sulv’s Blog (sulvblog.cn)

图床

之前一直在使用Imgur的图床，但是国内的小伙伴说即使挂了梯子也看不到图片，现在有了域名打算利用Cloudflare自己做一个图床

首先下载PicGo，Windows用户可以在GitHub下载.exe文件，Mac用户则建议使用Homebrew下载，命令为
```
brew install picgo --cask
```
下载完之后在LaunchPad出现了PicGo的图标，但是假如显示损坏让你移动到垃圾桶，这时只需要在终端输入
```
sudo xattr -r -d com.apple.quarantine /Applications/PicGo.app
```
就可以解决问题了，安装完之后出现在顶部状态栏（Windows在右下角）
然后回到Cloudflare，创建一个R2 bucket，我就叫img，将地址选在美国西部（这是因为后面的CDN也在美西）
然后回到R2 Overview -> 右上角Manage R2 API Tokens，取个名字，然后选择Object Read and Write，可以选择只应用于特定的Bucket，也可以不选
然后会生成一堆信息，有Token value，Access Key ID，Secret Access Key和jurisdiction-specific endpoints，这个页面只显示一遍，建议拿个小本本记好
再来到img桶 -> Setting，里面有个R2.dev subdomain选择为Allow
然后需要绑定一个域名，注意这里不能再使用kyxie.me了，但是可以设置一个子域名，比如img.kyxie.me，cloudflare会自动在DNS中添加一个Record
回到PicGo，插件设置里搜索S3，然后安装S3插件，注意这里需要下载Node.js环境
然后在图床设置中打开Amazon S3，然后配置信息，如图所示
下面还有个自定义域名可以暂时填写img.kyxie.me，为了让国内小伙伴也能打开图片，我使用WebP Cloud Services将图像缓存，这样会打开更快
注册用户后点击Create Proxy -> 选择美国Hillsboro, OR -> Proxy Origin Url就是http://img.kyxie.me，选择确定之后系统会生成一个url类似于http://xxx.webp.li，再把这个url粘贴到PicGo的自定义域名，配置好之后如图所示
这样我们的图床就搭建好了，PicGo也可以使用了，经过测试国内的小伙伴也都能打开图片了
如果想添加水印，详细见这里

安装过程#

文件介绍#

Config.yml#

创建文章#

创建子文件夹#

最后更新#

本地预览#

网站部署#

自定义域名#

多语言#

搜索功能#

Hover#

自定义社交媒体图标#

目录栏目放侧边#

Markdown渲染风格#

流量统计#

插入B站，YouTube视频或PPT#

插入音乐播放器#

修改全局字体#

修改代码字体#

评论功能#

Gmail邮箱配置#

自定义邮箱回复模板#

代码高亮#

代码边框圆角#

添加友链#

图床#