Hugo on ifanticの小屋

Hugo-stackの美化 III

Thu, 08 May 2025 18:42:25 +0800

按照惯例，如果没有特别说明，css样式都是在 assets/scss/custom.scss 文件里修改，短代码的html文件放在 layouts/shortcodes 文件夹里。

谷歌robots

hugo博客seo优化

【建站技术】在你的 Hugo 博客中使用 Google Analytics 来统计和分析流量数据

链接样式

偶然看到了一个自己很喜欢的链接样式: https://www.shirakii.com/post/latex-chinese-record/

但是作者没有公开它的配置，于是自己手搓了一版：

 1a.link {
 2  color: dodgerblue;
 3  font-weight: 600;
 4  padding: 0 2px;
 5  box-shadow: none;
 6  cursor: url('/img/link.png'), pointer !important;
 7  position: relative;
 8  display: inline;
 9  box-decoration-break: clone;
10  -webkit-box-decoration-break: clone;
11  
12  background-image: linear-gradient(to right, dodgerblue, dodgerblue);
13  background-size: 0 2px;
14  background-position: left 100%;
15  background-repeat: no-repeat;
16  transition: background-size 0.3s ease, background-position 0s ease 0.3s;
17  padding-bottom: 2px; /* 增加底部内边距 */
18}
19
20a.link:hover {
21  background-size: 100% 2px;
22  box-shadow: none;
23  text-decoration: none;
24  background-position: left 100%;
25  transition: background-size 0.3s ease;
26}
27
28a.link:not(:hover) {
29  background-position: right 100%;
30  background-size: 0 2px;
31  transition: background-size 0.3s ease;
32}
33
34[data-scheme="light"] a.link {
35  color: deepskyblue;
36  background-image: linear-gradient(to right, deepskyblue, deepskyblue);
37}

不过发现用这种跳转链接不会出现上面的scss效果：<a href="/shortcodes" target="_blank">点我看看</a>

点我看看。修改代码：

 1a[linkscss="true"],
 2a.link {
 3  color: dodgerblue;
 4  font-weight: 600;
 5  padding: 0 2px;
 6  box-shadow: none;
 7  cursor: url('/img/link.png'), pointer !important;
 8  position: relative;
 9  display: inline;
10  box-decoration-break: clone;
11  -webkit-box-decoration-break: clone;
12  
13  background-image: linear-gradient(to right, dodgerblue, dodgerblue);
14  background-size: 0 2px;
15  background-position: left 100%;
16  background-repeat: no-repeat;
17  transition: background-size 0.3s ease, background-position 0s ease 0.3s;
18  padding-bottom: 4px; /* 增加底部内边距 */
19}
20
21a[linkscss="true"]:hover,
22a.link:hover {
23  background-size: 100% 2px;
24  box-shadow: none;
25  text-decoration: none;
26  background-position: left 100%;
27  transition: background-size 0.3s ease;
28}
29
30a[linkscss="true"]:not(:hover),
31a.link:not(:hover) {
32  background-position: right 100%;
33  background-size: 0 2px;
34  transition: background-size 0.3s ease;
35}
36
37[data-scheme="light"] a[linkscss="true"],
38[data-scheme="light"] a.link {
39  color: deepskyblue;
40  background-image: linear-gradient(to right, deepskyblue, deepskyblue);
41}

于是 <a href="/shortcodes" target="_blank" linkscss="true">点这里</a> 就能出现scss效果了：点这里

文章添加点赞按钮

参考■■Loading：《hugo装修日志10》■■，说的很详细了。

系列文章

参考在 Hugo 里显示系列文章，新建 layouts/partials/series.html：

 1{{ range $index, $series := .Params.series }}
 2<div class="article-list article-series">
 3    <header>
 4        <div class="series-section-title">
 5            {{ i18n "partOf" }}
 6            <a href="{{ "/series/" | relLangURL }}{{ . | urlize }}" linkscss="true">{{ $series }}</a>
 7            {{ i18n "series" }}:
 8        </div>
 9    </header>
10    
11    <div class="article-series-container">
12        <ol>
13            {{ range $ind, $post := $.Site.Pages.ByDate }}
14                {{ if in $post.Params.series $series }}
15                    <li class="article-series-item">
16                        {{ if eq $post.Permalink $.Page.Permalink }}
17                            <span class="article-series-active">{{ $post.Params.title }} ({{ i18n "currentArticle" }})</span>
18                        {{ else }}
19                            <a href="{{ $post.Permalink }}" linkscss="true">{{ $post.Params.title }}</a>
20                        {{ end }}
21                    </li>
22                {{ end }}
23            {{ end }}
24        </ol>
25    </div>
26</div>
27{{ end }}

在 layouts/_default/single.html 对应位置加入：

1{{ if .Params.links }}
2    {{ partial "article/components/links" . }}
3{{ end }}
4
5<!-- Add the series partial here -->
6{{ partial "series.html" . }}
7
8{{ partial "article/components/related-content" . }}

在 hugo.yaml 最后加入：

1taxonomies:
2    category: categories
3    tag: tags
4    series: series

在多语言配置文件 i18n/zh-cn.yaml 最后面加入：

1partOf:
2    other: "本文属于"
3
4series:
5    other: "系列"
6
7currentArticle:
8    other: "本文"

在 assets/scss/custom.scss 最后加入：

 1.article-series {
 2  margin: 2rem 0;
 3  padding: 1rem;
 4  gap: 0;
 5  color: var(--card-text-color-main);
 6  background-color: var(--card-background);
 7  border-radius: var(--card-border-radius);
 8  box-shadow: var(--shadow-l1);
 9}
10
11.article-series-item {
12  margin-bottom: 0.8rem;
13}
14
15.series-section-title {
16  margin-top: 8px;
17  margin-left: 8px;
18}
19
20.section-description {
21  color: var(--card-text-color-main);
22  font-weight: bold;
23}
24
25.article-series-container {
26  margin-bottom: -8px;
27}

新建 layouts/series/list.html：

 1{{ define "body-class" }}template-series{{ end }}
 2{{ define "main" }}
 3    <header>
 4        {{/* Display the series title and description */}}
 5        <h2 class="section-title">{{ .Title }} {{ i18n "series" }}</h2>
 6        {{ if .Description }}
 7        <div class="section-description">
 8            {{ .Description }}
 9        </div>
10        {{ end }}
11    </header>
12
13    {{/* Get the pages associated with this specific series term */}}
14    {{ $pagesInSeries := .Pages }}
15
16    {{/* Check if there are any pages in this series */}}
17    {{ if $pagesInSeries }}
18        {{/* Group the pages in this series by year, ordered reverse chronologically (newest year first) */}}
19        {{ range ($pagesInSeries.GroupByDate "2006").Reverse }}
20            {{/* Create an ID for the year group, e.g., "2023" */}}
21            {{ $id := lower (replace .Key " " "-") }}
22            <div class="archives-group" id="{{ $id }}">
23                {{/* Display the year as a section title, linking to the ID */}}
24                <h2 class="archives-date section-title"><a href="{{ $.RelPermalink }}#{{ $id }}">{{ .Key }}</a></h2>
25                {{/* Use the compact article list style */}}
26                <div class="article-list--compact">
27                    {{/* Range through the pages within this year group (already sorted by date by Hugo) */}}
28                    {{ range .Pages }}
29                        {{/* Display each article using the compact partial */}}
30                        {{ partial "article-list/compact" . }}
31                    {{ end }}
32                </div>
33            </div>
34        {{ end }}
35    {{ else }}
36        <p>{{ i18n "noPostsInSeries" | default "There are no articles in this series yet." }}</p>
37        {{/* Optional: Add a default message or translation for when a series is empty */}}
38        {{/* You might need to add "noPostsInSeries" to your i18n files */}}
39    {{ end }}
40
41    {{/* Footer partial */}}
42    {{ partialCached "footer/footer" . }}
43{{ end }}

新建 layouts/series/terms.html：

 1{{ define "body-class" }}template-series{{ end }}
 2{{ define "main" }}
 3    <header>
 4        {{- $taxonomy := $.Site.GetPage "taxonomyTerm" "series" -}}
 5        {{- $terms := $taxonomy.Pages -}}
 6        {{ if $terms }}
 7        <h2 class="section-title">{{ i18n "series" }}</h2>
 8        <div class="subsection-list">
 9            <div class="article-list--tile" style="display: flex; flex-direction: column;">
10                {{ range $terms }}
11                    <div class="series-group" style="flex: 1 auto; margin: 10px;">
12                        <h3 class="series-title">
13                            <a href="{{ .Permalink }}">{{ .Title }}</a>
14                        </h3>
15                        {{ if .Description }}
16                        <div class="series-description">
17                            {{ .Description }}
18                        </div>
19                        {{ end }}
20                        <div class="article-list--horizontal" style="display: flex; overflow-x: auto;">
21                            {{ $articles := where .Site.RegularPages "Params.series" "intersect" (slice .Title) }}
22                            {{ range $index, $element := $articles }}
23                            <div class="article-tile" style="flex: 0 0 auto; margin: 5px;">
24                                {{ partial "article-list/tile" (dict "context" $element "size" "250x150" "Type" "taxonomy") }}
25                            </div>
26                            {{ end }}
27                        </div>
28                    </div>
29                {{ end }}
30            </div>
31        </div>
32        {{ end }}
33    </header>
34
35    {{ partialCached "footer/footer" . }}
36{{ end }}

然后只需要在文章头部加入：series: ["Hugo 博客搭建"] 就可以啦。

过期提醒

参考在 MemE 主题文章开头添加过时提醒。由于我不想每篇文章开头都加上这个提醒，所以把它写成了短代码：

 1<!-- layouts/shortcodes/expiration-notice.html -->
 2<div id="update-info" class="article-notice update-notice">
 3    <span class="notice-icon">
 4        {{ partial "helper/icon" "clock" }}
 5    </span>
 6    <span class="notice-content">
 7        <p id="update-text">上次更新于 {{ .Page.Lastmod.Format "2006-01-02" }}，部分内容可能已经过期。</p>
 8    </span>
 9</div>
10
11<script>
12    document.addEventListener('DOMContentLoaded', function() {
13        const lastModified = new Date("{{ .Page.Lastmod.Format "2006-01-02T15:04:05-0700" }}");
14        const now = new Date();
15        const duration = now - lastModified;
16        const days = Math.floor(duration / (1000 * 60 * 60 * 24));
17        const years = Math.floor(days / 365);
18        const remainingDays = days % 365;
19        
20        let updateText = "";
21        if (years >= 1) {
22            updateText = `上次更新于 ${years} 年 ${remainingDays} 天前，部分内容可能已经过期。`;
23        } else {
24            updateText = `上次更新于 ${days} 天前，部分内容可能已经过期。`;
25        }
26        
27        document.getElementById("update-text").textContent = updateText;
28    });
29</script>

 1.article-notice {
 2  display: flex;
 3  align-items: center;
 4  padding: 0.75rem 1rem;
 5  margin: 1rem 0;
 6  border-radius: 0.8rem;
 7  background-color: var(--card-background);
 8  border-left: 3.5px solid var(--accent-color);
 9}
10
11.update-notice {
12  background-color: rgba(var(--primary-color-rgb), 0.1);
13  border-left-color: var(--primary-color);
14}
15
16.notice-icon {
17  margin-right: 0.75rem;
18  color: var(--primary-color);
19  margin-top: 0.75rem;
20}
21
22.notice-content p {
23  margin: 0;
24  color: crimson;
25  font-weight: bold;
26}
27
28[data-scheme=dark] .notice-content p {
29  color: gold;
30}

在文章开头或者任意地方加入：

1{{< expiration-notice >}}

上次更新于 2026-04-08，部分内容可能已经过期。

代码变化显示

参考实验田-diffcode，新建 /layouts/partials/diffcode.html：

 1{{- $diffBlock := (. | replaceRE "(?m:^```\\w+)" "```diff") -}}
 2{{- $diffBlock := (index (split $diffBlock "```") 1) -}}
 3{{- $diffBlock := ($diffBlock | replaceRE "(?m:^([+\\-~])?.*$)" "$1") -}}
 4{{- $diffBlock := ($diffBlock | replaceRE "(?m:^$)" "." | replaceRE "\n" "") -}}
 5
 6{{- $lines := split $diffBlock "" -}}
 7{{- $mainBlock := (. | replaceRE "(?m:^[+\\-~])" "") | markdownify -}}
 8
 9{{- $lineCount := 0 -}}
10{{- $output := "" -}}
11
12{{- $diffBlock := (. | replaceRE "(?m:^```\\w+)" "```diff") -}}
13{{- $diffBlock := (index (split $diffBlock "```") 1) -}}
14{{- $diffBlock := ($diffBlock | replaceRE "(?m:^([+\\-~])?.*$)" "$1") -}}
15{{- $diffBlock := ($diffBlock | replaceRE "(?m:^$)" "." | replaceRE "\n" "") -}}
16
17{{- $lines := split $diffBlock "" -}}
18{{- $mainBlock := (. | replaceRE "(?m:^[+\\-~])" "") | markdownify -}}
19
20{{- $lineCount := 0 -}}
21{{- $output := "" -}}
22
23{{- range $i, $l := (split $mainBlock `<span class="line">`) -}}
24    {{- if gt $i 0 -}}
25        {{- $lineClass := "" -}}
26        {{- if and (gt $lineCount 0) (lt $lineCount (len $lines)) -}}
27            {{- if eq (index $lines (sub $lineCount -1)) "+" -}}
28                {{- $lineClass = "diff-add" -}}
29            {{- else if eq (index $lines (sub $lineCount -1)) "-" -}}
30                {{- $lineClass = "diff-remove" -}}
31            {{- else if eq (index $lines (sub $lineCount -1)) "~" -}}
32                {{- $lineClass = "diff-highlight" -}}
33            {{- end -}}
34        {{- end -}}
35        
36        {{- if $lineClass -}}
37            {{- $output = printf "%s<span class=\"line %s\">" $output $lineClass -}}
38        {{- else -}}
39            {{- $output = printf "%s<span class=\"line\">" $output -}}
40        {{- end -}}
41        
42        {{- $lineCount = add $lineCount 1 -}}
43    {{- else -}}
44        {{- $output = $l -}}
45    {{- end -}}
46    
47    {{- if gt $i 0 -}}
48        {{- $output = printf "%s%s" $output $l -}}
49    {{- end -}}
50{{- end -}}
51
52{{ $output | safeHTML }}

新建 /layouts/shortcodes/diffcode.html：

1{{ partial "diffcode.html" .Inner }}

在 /assets/scss/custom.scss 中加入：

 1.highlight {
 2  .line {
 3      &.diff-add {
 4          background-color: rgba(0, 255, 0, 0.2);
 5          
 6          &::before {
 7              content: "+";
 8              color: green;
 9              position: absolute;
10              left: 0.5em;
11              user-select: none;
12          }
13      }
14      
15      &.diff-remove {
16          background-color: rgba(255, 0, 0, 0.2);
17          
18          &::before {
19              content: "-";
20              color: red;
21              position: absolute;
22              left: 1.1rem;
23              user-select: none;
24          }
25      }
26      
27      &.diff-highlight {
28          background-color: rgba(255, 255, 0, 0.2);
29          
30          &::before {
31              content: "~";
32              color: orange;
33              position: absolute;
34              left: 0.5em;
35              user-select: none;
36          }
37      }
38  }
39}
40
41// 确保行号正确对齐
42.highlight table td {
43  padding: 5px;
44}
45
46.highlight table pre {
47  margin: 0;
48}
49
50// 为行号留出足够空间
51.highlight .lnt, .highlight .ln {
52  margin-right: 0.8em;
53  padding: 0 0.4em 0 0.4em;
54}

可以这样使用这个短代码：

1{{< diffcode >}}
2```python
3def hello_world():
4+    print("Hello, World!")
5-    print("Goodbye, World!")
6~    return None
7{{< /diffcode >}}

1def hello_world():
2    print("Hello, World!")
3    print("Goodbye, World!")
4    return None

代码块字体样式更改

代码块的字体还是用 ‘JetBrains Mono’ 更有味道。在自定义的scss里加入：

1.highlight *,
2.highlight pre,
3.highlight code,
4.chroma *,
5.chroma code,
6.chroma pre {
7  font-family: 'JetBrains Mono', "LXGW WenKai TC", "Gowun Batang", monospace;
8  font-size: 14px;
9}

个人主页

成品展示：ifantic.de

無名の主页

简单的小主页，原来的看够了，重新弄了一个

Vue

我用的是赛博菩萨 CloudFlare Pages 部署的。先把项目clone到本地，安装node，然后安装pnpm，安装依赖：

1npm install -g pnpm
2pnpm install
3// 预览
4pnpm dev
5// 构建
6pnpm build

然后把 .env.example 文件的名称修改为 .env，修改其中的配置。本地运行 pnpm dev 预览即可。

预览后部署到 Cloudflare Pages：

创建项目：点击 创建应用程序 -> 选择 Pages 选项卡 -> 点击 上传资源。
上传文件：给你的项目起个名字，然后将本地 dist 文件夹内的所有文件和子文件夹拖拽到上传区域，或者通过浏览文件选择 dist 文件夹。
部署站点：点击部署站点。Cloudflare 会上传你的文件并完成部署。

修复站点名称字体不一致

将 public/font 的 Pacifico-Regular-all.ttf 替换原来的 Pacifico-Regular.ttf。

修复默认的天气api

修改 src/api/index.js 第73行：

1// https://api.oioweb.cn/doc/weather/GetWeather
2export const getOtherWeather = async () => {
3  const res = await fetch("https://api.oioweb.cn/api/weather/GetWeather");
4  const res = await fetch("https://weather.sl.al/");
5  return await res.json();
6};

更改 src/components/Weather.vue 为以下内容：

  1<template>
  2  <div class="weather" v-if="weatherData.adCode.city && weatherData.weather.weather">
  3    <span v-if="!mainKey">{{ weatherData.adCode.region }}&nbsp;</span>
  4    <span>{{ weatherData.adCode.city }}&nbsp;</span>
  5    <span>{{ weatherData.weather.weather }}&nbsp;</span>
  6    <span>{{ weatherData.weather.temperature }}℃</span>
  7<!--
  8    <span class="sm-hidden">
  9      &nbsp;{{
 10        weatherData.weather.winddirection?.endsWith("风")
 11          ? weatherData.weather.winddirection
 12          : weatherData.weather.winddirection + "风"
 13      }}&nbsp;
 14    </span>
 15    <span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span>
 16-->
 17    <template v-if="mainKey">
 18    <span class="sm-hidden">
 19        &nbsp;{{
 20            weatherData.weather.winddirection?.endsWith("风")
 21            ? weatherData.weather.winddirection
 22            : weatherData.weather.winddirection + "风"
 23        }}&nbsp;
 24    </span>
 25    <span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span>
 26    </template>
 27  </div>
 28  <div class="weather" v-else>
 29    <span>天气数据获取失败</span>
 30  </div>
 31</template>
 32
 33
 34
 35
 36
 37<script setup>
 38import { getAdcode, getWeather, getOtherWeather } from "@/api";
 39import { Error } from "@icon-park/vue-next";
 40
 41// 高德开发者 Key
 42const mainKey = import.meta.env.VITE_WEATHER_KEY;
 43
 44// 天气数据
 45const weatherData = reactive({
 46  adCode: {
 47    city: null, // 城市
 48    adcode: null, // 城市编码
 49  },
 50  weather: {
 51    weather: null, // 天气现象
 52    temperature: null, // 实时气温
 53    winddirection: null, // 风向描述
 54    windpower: null, // 风力级别
 55  },
 56});
 57
 58// 取出天气平均值
 59const getTemperature = (min, max) => {
 60  try {
 61    // 计算平均值并四舍五入
 62    const average = (Number(min) + Number(max)) / 2;
 63    return Math.round(average);
 64  } catch (error) {
 65    console.error("计算温度出现错误：", error);
 66    return "NaN";
 67  }
 68};
 69
 70// 获取天气数据
 71const getWeatherData = async () => {
 72  try {
 73    // 获取地理位置信息
 74    if (!mainKey) {
 75      
 76/*
 77      console.log("未配置，使用备用天气接口");
 78      const result = await getOtherWeather();
 79      console.log(result);
 80      const data = result.result;
 81      weatherData.adCode = {
 82        city: data.city.City || "未知地区",
 83        // adcode: data.city.cityId,
 84      };
 85      weatherData.weather = {
 86        weather: data.condition.day_weather,
 87        temperature: getTemperature(data.condition.min_degree, data.condition.max_degree),
 88        winddirection: data.condition.day_wind_direction,
 89        windpower: data.condition.day_wind_power,
 90      };
 91*/
 92
 93      console.log("未配置，使用备用天气接口");
 94      const result = await getOtherWeather();
 95      console.log(result);
 96      const data = result;  // 不需要 .result 了，因为数据在顶层
 97      
 98      weatherData.adCode = {
 99          city: data.location?.city || "未知地区",
100          // 如果需要 region 也可以加上
101          region: data.location?.region
102      };
103      
104      weatherData.weather = {
105          weather: data.current?.description,        // 天气描述
106          temperature: data.current?.temperature,     // 温度
107          // 如果需要体感温度
108          // feelsLike: data.current?.feelsLike,
109          
110          // 如果新的数据结构中没有风向和风力数据，可以设置默认值
111          //winddirection: "暂无数据",
112          //windpower: "暂无数据",
113          
114          // 如果需要添加空气质量信息
115          //airQuality: {
116          //  category: data.current?.airQuality?.category,
117          //  statement: data.current?.airQuality?.statement
118          //}
119      };
120
121    } else {
122      // 获取 Adcode
123      const adCode = await getAdcode(mainKey);
124      console.log(adCode);
125      if (adCode.infocode !== "10000") {
126        throw "地区查询失败";
127      }
128      weatherData.adCode = {
129        city: adCode.city,
130        adcode: adCode.adcode,
131      };
132      // 获取天气信息
133      const result = await getWeather(mainKey, weatherData.adCode.adcode);
134      weatherData.weather = {
135        weather: result.lives[0].weather,
136        temperature: result.lives[0].temperature,
137        winddirection: result.lives[0].winddirection,
138        windpower: result.lives[0].windpower,
139      };
140    }
141  } catch (error) {
142    console.error("天气信息获取失败:" + error);
143    onError("天气信息获取失败");
144  }
145};
146
147// 报错信息
148const onError = (message) => {
149  ElMessage({
150    message,
151    icon: h(Error, {
152      theme: "filled",
153      fill: "#efefef",
154    }),
155  });
156  console.error(message);
157};
158
159onMounted(() => {
160  // 调用获取天气
161  getWeatherData();
162});
163</script>

小记

好像什么都没干一年就过去了。。。

Hugo 短代码

Tue, 15 Apr 2025 12:42:25 +0800

合集墙详见这里。如果没有特别说明，css样式都是在 assets/scss/custom.scss 文件里修改，短代码的html文件放在 layouts/shortcodes 文件夹里。

重点标记

新建 mark.html，内容为：

1<mark>{{ .Get "text" }}</mark>

在 custom.scss 中添加：

1//重点标记
2mark{
3    background: hsla(199, 64%, 63%, 0.696);
4}

使用：

1{{< mark text="标记" >}}

指定颜色文本

红色文本橙色文本黄色文本绿色文本深青色文本蓝色文本紫色文本

使用：

1<span style="color:red;">红色文本</span>

147种标准颜色

基础颜色 (16种)

序号	颜色名称	效果
1	`black` ; `#000080`	黑色文本
2	`silver` ; `#C0C0C0`	银色文本
3	`gray` / `grey` ; `#808080`	灰色文本
4	`white` ; `#FFFFFF`	白色文本
5	`maroon` ; `#800000`	栗色/褐红色文本
6	`red` ; `#FF0000`	红色文本
7	`purple` ; `#800080`	紫色文本
8	`fuchsia` (等同于 `magenta`) ; `#FF00FF`	紫红色/洋红色文本
9	`green` ; `#008000`	绿色文本
10	`lime` ; `#00FF00`	酸橙绿文本
11	`olive` ; `#808000`	橄榄绿文本
12	`yellow` ; `#FFFF00`	黄色文本
13	`navy` ; `#000080`	海军蓝文本
14	`blue` ; `#0000FF`	蓝色文本
15	`teal` ; `#008080`	水鸭色/蓝绿色文本
16	`aqua` (等同于 `cyan`) ; `#00FFFF`	水色/浅青色文本

扩展颜色 (131种)

红色系

红色系

序号	颜色名称	效果
1	`indianred`	红色文本
2	`lightcoral`	红色文本
3	`salmon`	红色文本
4	`darksalmon`	红色文本
5	`lightsalmon`	红色文本
6	`crimson`	红色文本
7	`firebrick`	红色文本
8	`darkred`	红色文本

粉红色系

粉红色系

序号	颜色名称	效果
1	`pink`	粉色文本
2	`lightpink`	浅粉色文本
3	`hotpink`	亮粉色文本
4	`deeppink`	深粉色文本
5	`mediumvioletred`	中紫红色文本
6	`palevioletred`	淡紫红色文本

橙色系

橙色系

序号	颜色名称	效果
1	`coral`	珊瑚色文本
2	`tomato`	番茄色文本
3	`orangered`	橙红色文本
4	`darkorange`	暗橙色文本
5	`orange`	橙色文本

黄色系

黄色系

序号	颜色名称	效果
1	`gold`	金色文本
2	`yellow`	黄色文本
3	`lightyellow`	浅黄色文本
4	`lemonchiffon`	柠檬绸色文本
5	`lightgoldenrodyellow`	浅金黄色文本
6	`papayawhip`	番木瓜色文本
7	`moccasin`	鹿皮色文本
8	`peachpuff`	桃肉色文本
9	`palegoldenrod`	苍金棒色文本
10	`khaki`	卡其色文本
11	`darkkhaki`	深卡其色文本

紫色系

紫色系

序号	颜色名称	效果
1	`lavender`	淡紫色文本
2	`thistle`	蓟色文本
3	`plum`	李子色文本
4	`violet`	紫罗兰色文本
5	`orchid`	兰花色文本
6	`fuchsia` (`magenta`)	洋红色文本
7	`mediumorchid`	中兰花色文本
8	`mediumpurple`	中紫色文本
9	`rebeccapurple`	丽贝卡紫色文本
10	`blueviolet`	蓝紫色文本
11	`darkviolet`	深紫罗兰色文本
12	`darkorchid`	深兰花色文本
13	`darkmagenta`	深洋红色文本
14	`purple`	紫色文本
15	`indigo`	靛蓝色文本
16	`slateblue`	板岩蓝文本
17	`darkslateblue`	深板岩蓝文本
18	`mediumslateblue`	中板岩蓝文本

绿色系

绿色系

序号	颜色名称	效果
1	`greenyellow`	绿黄色文本
2	`chartreuse`	黄绿色文本
3	`lawngreen`	草绿色文本
4	`lime`	亮绿色文本
5	`limegreen`	酸橙绿文本
6	`palegreen`	浅绿色文本
7	`lightgreen`	亮绿色文本
8	`mediumspringgreen`	中春绿色文本
9	`springgreen`	春绿色文本
10	`mediumseagreen`	中海绿色文本
11	`seagreen`	海绿色文本
12	`forestgreen`	森林绿文本
13	`green`	绿色文本
14	`darkgreen`	深绿色文本
15	`yellowgreen`	黄绿色文本
16	`olivedrab`	橄榄褐文本
17	`olive`	橄榄色文本
18	`darkolivegreen`	深橄榄绿文本
19	`mediumaquamarine`	中碧绿色文本
20	`darkseagreen`	深海绿色文本
21	`lightseagreen`	亮海绿色文本
22	`darkcyan`	深青色文本
23	`teal`	凫蓝文本

蓝色系

蓝色系

序号	颜色名称	效果
1	`aqua` (`cyan`)	水蓝色文本
2	`lightcyan`	浅青色文本
3	`paleturquoise`	苍绿色文本
4	`aquamarine`	碧绿色文本
5	`turquoise`	青绿色文本
6	`mediumturquoise`	中青绿色文本
7	`darkturquoise`	深青绿色文本
8	`cadetblue`	军蓝色文本
9	`steelblue`	钢蓝色文本
10	`lightsteelblue`	亮钢蓝色文本
11	`powderblue`	粉蓝色文本
12	`lightblue`	浅蓝色文本
13	`skyblue`	天蓝色文本
14	`lightskyblue`	亮天蓝色文本
15	`deepskyblue`	深天蓝色文本
16	`dodgerblue`	闪蓝色文本
17	`cornflowerblue`	矢车菊蓝色文本
18	`royalblue`	皇家蓝色文本
19	`blue`	纯蓝色文本
20	`mediumblue`	中蓝色文本
21	`darkblue`	深蓝色文本
22	`navy`	海军蓝色文本
23	`midnightblue`	午夜蓝色文本

棕色系

棕色系

序号	颜色名称	效果
1	`cornsilk`	浅玉米丝色文本
2	`blanchedalmond`	漂白杏仁色文本
3	`bisque`	乳脂色文本
4	`navajowhite`	纳瓦白文本
5	`wheat`	小麦色文本
6	`burlywood`	硬木色文本
7	`tan`	棕褐色文本
8	`rosybrown`	玫瑰棕色文本
9	`sandybrown`	沙棕色文本
10	`goldenrod`	金菊色文本
11	`darkgoldenrod`	深金菊色文本
12	`peru`	秘鲁色文本
13	`chocolate`	巧克力色文本
14	`saddlebrown`	鞍棕色文本
15	`sienna`	赭色文本
16	`brown`	棕色文本
17	`darkbrown`	深棕色文本

白色系

白色系

序号	颜色名称	效果
1	`white`	白色文本
2	`snow`	雪白文本
3	`honeydew`	蜜露色文本
4	`mintcream`	薄荷奶油色文本
5	`azure`	天蓝色文本
6	`aliceblue`	爱丽丝蓝文本
7	`ghostwhite`	幽灵白文本
8	`whitesmoke`	烟白文本
9	`seashell`	贝壳白文本
10	`beige`	米色文本
11	`oldlace`	旧蕾丝色文本
12	`floralwhite`	花卉白文本
13	`ivory`	象牙白文本
14	`antiquewhite`	古董白文本
15	`linen`	亚麻色文本

灰色系

灰色系

序号	颜色名称	效果
1	`gainsboro`	浅灰文本
2	`lightgray` / `lightgrey`	亮灰文本
3	`silver`	银灰文本
4	`darkgray` / `darkgrey`	暗灰文本
5	`gray` / `grey`	标准灰文本
6	`dimgray` / `dimgrey`	昏灰文本
7	`lightslategray` / `lightslategrey`	亮岩灰文本
8	`slategray` / `slategrey`	岩灰文本
9	`darkslategray` / `darkslategrey`	暗岩灰文本
10	`black`	纯黑文本

文本缩写

这个短代码只在电脑端生效

新建 abbr.html，内容为：

1<abbr title="{{ .Get "title" }}">{{ .Get "text" }}</abbr>

使用：

1{{< abbr title="感觉很神秘" text="这个短代码只在电脑端生效" >}}

文本折叠

点击显示

让我看看！

新建 detail.html，内容为：

1<details>
2    <summary>{{ (.Get 0) | markdownify }}</summary>
3    {{ .Inner | markdownify }}
4</details>

使用：

1{{< spoiler "点击显示" >}}
2让我看看！
3{{< /spoiler >}}

高斯模糊

手动打码效果

在 custom.scss 中添加：

 1//文本高斯模糊
 2.blur {
 3    color: transparent;
 4    text-shadow:0px 0px 8px var(--card-text-color-main)
 5}
 6 
 7.blur:hover {
 8    color: transparent;
 9    text-shadow:0px 0px 0px var(--card-text-color-main)
10   
11}

使用：

1<span class="blur">手动打码效果</span>

文本黑幕

数据删除！

在 custom.scss 中添加：

 1//文本黑幕效果
 2.shady {
 3    color:#000;
 4    font-weight: bold;
 5    box-shadow: 0px -20px 0px rgba(0,0,0,1) inset; 
 6    transition: all 0.3s ease;
 7}
 8.shady:hover{
 9   font-weight: bold;
10    color:#FFF;
11    box-shadow: 0px -20px 0px rgba(0,0,0,1) inset; 
12}

使用：

1<span class="shady">数据删除！</span>

文字抖动

这是基本的摇晃效果。

这个段落持续摇晃。

新建shake.html，内容为：

 1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" />
 2
 3<div class="shake {{ .Get "effect" }}">{{ .Inner }}</div>
 4
 5<div class="shake"></div> 
 6<div class="shake shake-hard"></div> 
 7<div class="shake shake-slow"></div> 
 8<div class="shake shake-little"></div> 
 9<div class="shake shake-horizontal"></div> 
10<div class="shake shake-vertical"></div> 
11<div class="shake shake-rotate"></div> 
12<div class="shake shake-opacity"></div> 
13<div class="shake shake-crazy"></div>
14<!-- Freeze the animation at that point when :hover --> 
15<div class="shake shake-freeze"></div> 
16<!-- Continuous animation instead on :hover --> 
17<div class="shake shake-constant"></div>

使用：

1{{< shake effect="shake" >}}这是基本的摇晃效果。{{< /shake >}}

文字渐变

我挑的配色好看吧！

在 custom.scss 中添加：

1//文字颜色渐变
2.colorfulfont {
3    background: linear-gradient(to right, rgb(25, 221, 238), #ed4588); //第一个颜色代码是渐变起始色，第二个颜色代码是渐变结束色；
4    -webkit-background-clip: text;
5    background-clip: text;
6    color: transparent;
7}

使用：

1<font class="colorfulfont"> 我挑的配色好看吧！</font>

文本位置

文字居左

文字居中

文字居右

新建 align.html，内容为：

1<p style="text-align:{{ index .Params 0 }}">{{ index .Params 1 | markdownify }}</p>

使用：

1{{< align left "文字居左" >}}
2{{< align center "文字居中" >}}
3{{< align right "文字居右" >}}

摘录引用

“年复一年，创作的冲动随年衰减，创作的能力逐渐消失——也许两者根本上是一回事，我们常把自己的写作冲动误认为自己的写作才能，自以为要写就意味着会写。”

钱钟书 《围城》重印前记

新建 blockquote.html，内容为：

 1<!-- reset scratch variables at the start -->
 2{{ $.Scratch.Set "bl_author" false }}
 3{{ $.Scratch.Set "bl_source" false }}
 4{{ $.Scratch.Set "bl_link" false }}
 5{{ $.Scratch.Set "bl_title" false }}
 6
 7{{ if .IsNamedParams }}
 8  {{ $.Scratch.Set "bl_author" (.Get "author") }}
 9  {{ $.Scratch.Set "bl_source" (.Get "source") }}
10  {{ $.Scratch.Set "bl_link" (.Get "link") }}
11  {{ $.Scratch.Set "bl_title" (.Get "title") }}
12{{ else }}
13  <!-- for the positional version if any -->
14{{ end }}
15
16<!-- if title is not set explicitly then we need to beautify the link
17     if length of link is more than 32 chars, we will cut it off by 32 and
18     then drop everything after the last / if any and put it in into title -->
19
20{{ with $.Scratch.Get "bl_title" }}
21  <!-- do nothing -->
22{{ else }}
23  {{ with $.Scratch.Get "bl_link" }}    <!-- if link is given -->
24    {{ range last 1 (split ($.Scratch.Get "bl_link" ) "://") }}  <!-- split by :// and then only take the items after it to remove protocol:// -->
25      {{ $.Scratch.Set "title_without_protocol" . }}
26    {{ end }}
27    {{ range last 1 (split ($.Scratch.Get "title_without_protocol" ) "www.")  }} <!-- also remove the www. at the start if any. we are using a second split because all URLS may not start with it -->
28      {{ $.Scratch.Set "title_without_protocol" . }}
29    {{ end }}
30    {{ $.Scratch.Set "bl_title" ($.Scratch.Get "title_without_protocol") }}
31
32    <!-- if link is longer than 32 bytes we should trim it -->
33    {{ if (gt (len ($.Scratch.Get "title_without_protocol") ) 32) }}
34      {{ $title := (slicestr ($.Scratch.Get "title_without_protocol") 0 32) }}   <!-- get the first 32 characters of title_without_protocol -->
35      {{ $split_by_fw_slash := split $title "/" }}   <!-- now split on / because we want to stop after the last forward slash -->
36      {{ $count := (sub (len $split_by_fw_slash) 1) }}   <!-- we want everything but the last part so we adjust the count accordingly -->
37
38      {{ $.Scratch.Set "tempstring" "" }}   <!-- temp variable to hold the concatinated string -->
39      {{ range first $count $split_by_fw_slash  }}  <!-- loop through all parts except last and concat them (add / between halves) -->
40        {{ $.Scratch.Set "tempstring" ( . | printf "%s%s/" ($.Scratch.Get "tempstring") | printf "%s" ) }}
41      {{ end }}
42      {{ $.Scratch.Set "bl_title" ( printf "%s..." ($.Scratch.Get "tempstring") | printf "%s" ) }}
43    {{ end }}
44  {{ end }}
45{{ end }}
46
47<blockquote>
48  <p>{{ .Inner | markdownify }}</p>
49  <footer style="text-align:right">
50    <strong>{{ with $.Scratch.Get "bl_author" }}{{ . }}{{ end }}</strong>
51    {{ with $.Scratch.Get "bl_source" }}
52      <cite>{{ . }}</cite>
53    {{ else }}
54      {{ with $.Scratch.Get "bl_link" }}
55        <cite>
56          <a href="{{ . }}" title="{{ . }}" rel="noopener noreferrer">{{ $.Scratch.Get "bl_title" }}</a> <!-- can't have new lines here -->
57        </cite>
58      {{ else }}
59        {{ with $.Scratch.Get "bl_title" }}
60          <cite>
61            {{ $.Scratch.Get "bl_title" }}</a>
62          </cite>
63        {{ end }}
64      {{ end }}
65    {{ end }}
66  </footer>
67</blockquote>

使用：

1{{< blockquote author="作者" link="#" title="作品名" >}}
2这里写引用内容
3{{< /blockquote >}}

评分样式

新建 rating.html，内容为：

 1<span class="star-rating">
 2    {{- if ge (.Get 0) (.Get 1) -}}
 3        {{- $star_outline := sub (int (.Get 0)) (int (.Get 1)) -}}
 4        {{- range $i, $sequence :=  (seq (.Get 1)) -}}
 5            <i class="star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg></i>
 6        {{- end -}}
 7        {{- range $i, $sequence :=  (seq $star_outline) -}}
 8            <i class="star-outline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg></i>
 9        {{- end -}}
10    {{- end -}}
11</span>

在 custom.scss 中添加：

 1//星星评级
 2i.star{
 3    color: hsl(61, 79%, 63%); /*星星的颜色*/
 4  }
 5  
 6  i.star-outline{
 7    color: hsl(211, 31%, 74%);/*空星星的颜色*/
 8  }
 9  
10  i.star svg, i.star-outline svg{
11    width: 20px;
12    fill: currentColor;
13}

使用：

1{{< rating 10 7 >}}

键盘样式

Ctrl+Alt+Del

在 custom.scss 中添加：

 1//键盘标签样式
 2nkbd {
 3  margin: 0 .1em;
 4  padding: .1em .6em;
 5  font-size: .8em;
 6  color: #242729;
 7  background: #fff;
 8  border: 1px solid #adb3b9;
 9  border-radius: 3px;
10  box-shadow: 0px 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #fff inset;
11  white-space: nowrap;
12  vertical-align: middle;
13  font-family: SourceHanSerifSC;
14}

使用：

1<nkbd>Ctrl</nkbd>+<nkbd>Alt</nkbd>+<nkbd>Del</nkbd>

卡片样式

新建 card.html，内容为：

1{{- $raw := (markdownify .Inner | chomp) -}} {{- $block := findRE
2    "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b"
3    $raw 1 -}}
4    <div class="mycard">
5      <div class="content">{{- if or $block (not $raw) }}{{ $raw }}{{ else }} {{ $raw }} {{ end -}}</div>
6    </div>

在 custom.scss 中添加：

 1// 卡片样式
 2.mycard {
 3    padding: 10px 20px;
 4    margin: 20px 0;
 5    border-radius: 4px;
 6    word-break: break-all;
 7    background: #d2e5eb14;
 8    box-shadow: 0 6px 10px 0 #00000033;
 9    .content {
10      line-height: 30px;
11    }
12}

使用：

1{{< card >}}卡片样式{{< /card >}}

仿Github样式

ifanticの小屋

鸳鸯帐里暖芙蓉此生何处不相逢

Hugo

新建 github.html，内容为：

 1<div class="github">
 2    <div class="logo">
 3        {{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
 4        <a class="name" href={{ .Get "link" }} target="_blank">{{ .Get "name" }}</a>
 5    </div>
 6    <div class="description">{{ .Get "description" }}</div>
 7    <div class="language">
 8        <span class="language-color" style="background-color: {{ .Get "color" }}"></span>
 9        <span class="language-name">{{ .Get "language" }}</span>
10    </div>
11</div>

在 custom.scss 中添加：

 1//github样式
 2.github {
 3    border: 1px solid var(--card-text-color-main);
 4    border-radius: 3px;
 5    margin: 0 auto;
 6    margin-bottom: 1em;
 7    padding: 1em;
 8    .github-icon {
 9      width: 1.2em;
10      height: 1.2em;
11      margin-right: 0.5em;
12      margin-bottom: 0.2em;
13      fill: var(--card-text-color-main);
14      transition: all 0.5s;
15    }
16    .name {
17      font-weight: bold;
18      color: #2e97d9;
19      text-decoration: underline;
20      margin-left: 0.5em;
21      position: relative;
22      top: -5px; //加这个属性是因为我的图标和名称无法对齐，实际使用的时候要根据自己的网站修改
23    }
24    .description {
25      margin-top: 0.5em;
26      margin-bottom: 0.5em;
27      color: var(--card-text-color-main);
28      text-align: justify;
29      font-size: 90%;
30      transition: all 0.5s;
31    }
32    .language-color {
33      position: relative;
34      top: 1px;
35      display: inline-block;
36      width: 0.75em;
37      height: 0.75em;
38      border-radius: 50%;
39    }
40    .language-name {
41      color: var(--card-text-color-main);
42      font-size: 90%;
43      margin-left: 0.5em;
44      transition: all 0.5s;
45    }
46}

在 data/SVG.toml 中加入图标（给出的代码是Github自己的图标，我已经换成了自定义的）：

1repository = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/></svg>'

使用：

1{{< github
2  name="链接标题"
3  link="#"
4  description="内容描述"
5  color="#F48201"
6  language="Go"
7>}}

标签块样式

Warning

info

note

tips

新建 notice.html，内容为：

 1<!-- 文件位置：~/layouts/shortcodes/notice.html -->
 2
 3<!--https://github.com/martignoni/hugo-notice-->
 4{{- $noticeType := .Get 0 -}}
 5
 6{{- $raw := (markdownify .Inner | chomp) -}}
 7
 8{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
 9
10{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
11<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
12    <div class="notice-title">{{ $icon | safeHTML }}</div>
13    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
14</div>

在 custom.scss 中添加：

 1//增加notice短代码
 2.notice {
 3  position:relative;
 4  padding: 1em 1em 1em 2.5em;
 5  margin-bottom: 1em;
 6  border-radius: 4px;
 7  p:last-child {
 8      margin-bottom: 0;
 9  }
10  .notice-title {
11      position: absolute;
12      left: 0.8em;
13      .notice-icon {
14          width: 1.2em;
15          height: 1.2em;
16      }
17  }
18  &.notice-warning {
19      background: hsla(0, 65%, 65%, 0.15);
20      border-left: 5px solid hsl(0, 65%, 65%);
21      .notice-title {
22          color: hsl(0, 65%, 65%);
23      }
24  }
25  &.notice-info {
26      background: hsla(30, 80%, 70%, 0.15);
27      border-left: 5px solid hsl(30, 80%, 70%);
28      .notice-title {
29          color: hsl(30, 80%, 70%);
30      }
31  }
32  &.notice-note {
33      background: hsla(200, 65%, 65%, 0.15);
34      border-left: 5px solid hsl(200, 65%, 65%);
35      .notice-title {
36          color: hsl(200, 65%, 65%);
37      }
38  }
39  &.notice-tip {
40      background: hsla(140, 65%, 65%, 0.15);
41      border-left: 5px solid hsl(140, 65%, 65%);
42      .notice-title {
43          color: hsl(140, 65%, 65%);
44      }
45  }
46}
47
48[data-theme="dark"] .notice {
49  &.notice-warning {
50      background: hsla(0, 25%, 35%, 0.15);
51      border-left: 5px solid hsl(0, 25%, 35%);
52      .notice-title {
53          color: rgba(224, 108, 108, 0.5);
54      }
55  }
56  &.notice-info {
57      background: hsla(30, 25%, 35%, 0.15);
58      border-left: 5px solid hsl(30, 25%, 35%);
59      .notice-title {
60          color: rgba(240, 178, 117, 0.5);
61      }
62  }
63  &.notice-note {
64      background: hsla(200, 25%, 35%, 0.15);
65      border-left: 5px solid hsl(200, 25%, 35%);
66      .notice-title {
67          color: rgba(108, 185, 224, 0.5);
68      }
69  }
70  &.notice-tip {
71      background: hsla(140, 25%, 35%, 0.15);
72      border-left: 5px solid hsl(140, 25%, 35%);
73      .notice-title {
74          color: rgba(108, 224, 147, 0.5);
75      }
76  }
77}

在 data/SVG.toml 中加入：

1# Notice Icon
2notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
3notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
4notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
5notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'

使用：

1{{< notice notice-warning >}}
2Warning
3{{< /notice >}}

时间轴

2024

我是萌新

2025

我还是萌新

新建 timeline.html，内容为：

  1{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}
  2
  3<div class="timeline__row">
  4    <div class="timeline__time">
  5        <div class="timeline__time">{{ $date }}</div>
  6        <div class="timeline__split-line"></div>
  7    </div>
  8    <div class="timeline__content">
  9        <div class="timeline__tags">
 10            {{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
 11            <span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
 12            <span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
 13            <span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
 14            <span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
 15        </div>
 16            <div class="timeline__title">{{ $title }}</div>
 17        <div class="timeline__description">
 18            {{ $description }}
 19        </div>
 20    </div>
 21</div>
 22
 23<style>
 24    .timeline {
 25        display: flex;
 26        flex-direction: column;
 27    }
 28    
 29    .timeline__row {
 30        display: flex;
 31        padding-left: 4%;
 32        height: 90px;
 33    }
 34    
 35    .timeline__time {
 36        flex: 0 0 110px;
 37        color: #5d5d5d;
 38        font-size: 17px;
 39        text-transform: uppercase;
 40        position: relative;
 41        display: flex;
 42        flex-direction: column;
 43        align-items: center;
 44        padding: 0.5rem 0;
 45    }
 46    
 47    .timeline__time-text {
 48        margin: 0;
 49    }
 50    
 51    .timeline__split-line {
 52        position: absolute;
 53        top: 0.5rem;
 54        right: -20px;
 55        height: 100%;
 56        width: 2px;
 57        background-color: #84c4e240;
 58        z-index: 0;
 59    }
 60    
 61    .timeline__split-line:before {
 62        content: "";
 63        position: absolute;
 64        top: 24%;
 65        right: -4px;
 66        transform: translateY(-50%);
 67        width: 10px;
 68        height: 10px;
 69        background-color: #c9e5f2;
 70        box-shadow: 0 0 0 4px var(--theme);
 71        border-radius: 50%;
 72        border: 0px solid #84c4e2;
 73        z-index: -1;
 74    }
 75    
 76    .timeline__content {
 77        flex: 1;
 78        margin-left: 4.5rem;
 79        padding: 0.5rem 0 1.2rem 0;
 80    }
 81    
 82    .timeline__title {
 83        margin: 0;
 84        margin-bottom: 2px;
 85        padding-top: 3px;
 86        margin-left: 0.5rem;
 87        color: var(--content);
 88        font-family: var(--font-family-teshu);
 89        font-size: 19px;
 90        font-weight: 600;
 91        width: fit-content;
 92        display: inline-block;
 93        vertical-align: middle;
 94        /* 垂直居中对齐 */
 95    }
 96    
 97    .timeline__tags {
 98        display: inline-block;
 99        padding: 0;
100        margin-left: 0.3rem;
101        align-items: center;
102        gap: 0.3rem;
103    }
104    
105    .timeline__tag {
106        display: inline-block;
107        color: var(--secondary);
108        background-color: #84c4e230;
109        border: 1.5px solid #84c4e230;
110        border-radius: 999px;
111        padding: 0rem 0.5rem;
112        font-size: 12px;
113        white-space: nowrap;
114        line-height: 1.4rem;
115        opacity: 0.8;
116        vertical-align: middle;
117        /* 垂直居中对齐 */
118    }
119    
120    .timeline__description {
121        font-size: 15px;
122        line-height: 1.6;
123        color: #5d5d5d;
124        overflow: hidden;
125        text-overflow: ellipsis;
126        margin: 0.5rem 0 0.4rem 1.5rem;
127        /* 添加 1.5rem 的左侧内边距 */
128    }
129    /* 为类名为 "timeline__tag-style" 的标签定义颜色 */
130    
131    .timeline__tag-style {
132        background-color: #c581da;
133        /* 替换为你希望的颜色 */
134        border-color: #c581da;
135        /* 与背景色相同或不同，根据需要自定义 */
136        color: #FFFFFF;
137        /* 根据需要选择文本颜色 */
138    }
139    /* 为类名为 "timeline__tag-article" 的标签定义颜色 */
140    
141    .timeline__tag-article {
142        background-color: #92d392;
143        /* 替换为你希望的颜色 */
144        border-color: #92d392;
145        /* 与背景色相同或不同，根据需要自定义 */
146        color: #000000;
147        /* 根据需要选择文本颜色 */
148    }
149    /* 为类名为 "timeline__tag-page" 的标签定义颜色 */
150    
151    .timeline__tag-page {
152        background-color: #707070;
153        /* 替换为你希望的颜色 */
154        border-color: #707070;
155        /* 与背景色相同或不同，根据需要自定义 */
156        color: #FFFFFF;
157        /* 根据需要选择文本颜色 */
158    }
159    
160    @media screen and (max-width: 768px) {
161        .timeline__time {
162            font-size: 14px;
163            /* 在小屏幕上使用较小的字体大小 */
164        }
165        .timeline__title {
166            font-size: 16px;
167            /* 在小屏幕上使用较小的字体大小 */
168        }
169        .timeline__description {
170            font-size: 14px;
171            /* 在小屏幕上使用较小的字体大小 */
172        }
173    }
174</style>

使用：

1{{< timeline date="2024" title="First Time" description="我是萌新" tags="past"  >}}{{< timeline date="2025" title="Second Time" description="我还是萌新" tags="now"  >}}

图片轮播

新建 imgloop.html，内容为：

 1{{ if .Site.Params.enableimgloop }}
 2    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
 3    <!-- Swiper -->
 4    <div class="swiper-container">
 5        <div class="swiper-wrapper">
 6            {{$itItems := split (.Get 0) ","}}
 7            {{range $itItems }}
 8            <div class="swiper-slide">
 9                <img src="{{.}}" alt="">
10            </div>
11            {{end}}
12        </div>
13        <!-- Add Pagination -->
14        <div class="swiper-pagination"></div>
15    </div>
16
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
18     <!-- Initialize Swiper -->
19     <script>
20        var swiper = new Swiper('.swiper-container', {
21            pagination: '.swiper-pagination',
22            paginationClickable: true,
23        //自动调节高度
24        autoHeight: true,
25        //键盘左右方向键控制
26        keyboardControl : true,
27        //鼠标滑轮控制
28        mousewheelControl : true,
29        //自动切换
30        //autoplay : 5000,
31        //懒加载
32        lazyLoading : true,
33		lazyLoadingInPrevNext : true,
34		//无限循环
35		loop : true,
36        });
37        </script>
38{{ end }}

在 custom.scss 中添加：

 1//图片轮播
 2.swiper-container {
 3    max-width: 820px;
 4    margin: 2em auto;
 5}
 6.swiper-slide {
 7    text-align: center;
 8    font-size: 18px;
 9    background-color: #fff;
10    /* Center slide text vertically */
11    display: flex;
12    justify-content: center;
13    align-items: center;
14    img {
15        margin: 0 !important;
16    }
17}

在 config.yaml 找到 params:，添加 enableimgloop: true。
使用：

1{{< imgloop "1.jpg,2.jpg,3.jpg" >}}

瀑布流相册

新建 gallery.html，内容为：

 1{{ $baseURL := .Site.BaseURL }}
 2{{- with (.Get 0) -}}
 3{{- $files := readDir (print "/static/" .) }}
 4<div class="gallery-photos">
 5  {{- range (sort $files "Name" "asc") -}}
 6    {{- if ( .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)") }}
 7    {{- $linkURL := print $baseURL "/" ($.Get 0) "/" .Name | absURL }}
 8    <div class="gallery-photo">
 9      <img class="photo-img" loading='lazy' decoding="async" src="{{  $linkURL  }}" alt="{{ .Name }}" />
10      <span class="photo-title">{{ .Name | replaceRE "\\..*" ""}}</span>
11    </div>
12    {{- end }}
13  {{- end }}
14</div>
15{{- end }}

在 layouts/partials/footer/custom.html 中插入：

 1<!-- 瀑布流相册 -->
 2<script src="https://immmmm.com/waterfall.min.js"></script>
 3<script src="https://immmmm.com/imgStatus.min.js"></script>
 4<script>
 5document.addEventListener('DOMContentLoaded', () => {
 6  //外链 gallery 标签相册瀑布流
 7  var photosAll = document.getElementsByTagName('gallery') || '';
 8  if(photosAll){
 9    for(var i=0;i < photosAll.length;i++){
10      photosAll[i].innerHTML = '<div class="gallery-photos">'+photosAll[i].innerHTML+'</div>'
11      var photosIMG = photosAll[i].getElementsByTagName('img')
12      for(var j=0;j < photosIMG.length;j++){
13        wrap(photosIMG[j], document.createElement('div'));
14      }
15    }
16  }
17  function wrap(el, wrapper) {
18    wrapper.className = "gallery-photo";
19    el.parentNode.insertBefore(wrapper, el);
20    wrapper.appendChild(el);
21  }
22  //相册瀑布流
23  let galleryPhotos = document.querySelectorAll('.gallery-photos') || ''
24  if(galleryPhotos){
25    imgStatus.watch('.gallery-photo img', function(imgs) {
26      if(imgs.isDone()){
27        for(var i=0;i < galleryPhotos.length;i++){
28          waterfall(galleryPhotos[i]);
29          let pagePhoto = galleryPhotos[i].querySelectorAll('.gallery-photo');
30          for(var j=0;j < pagePhoto.length;j++){pagePhoto[j].className += " visible"};
31        }
32      }
33    });
34    window.addEventListener('resize', function () {
35      for(var i=0;i < galleryPhotos.length;i++){
36        waterfall(galleryPhotos[i]);
37      }
38    });
39  }
40});
41</script>

在 layouts/partials/head/custom.html 中插入：

 1<style>
 2  .gallery-photos{width:100%;break-inside: avoid;margin-bottom: 10px;}
 3  .gallery-photo{width:33.3%;position: relative;padding:0px 4px 0px 4px;visibility: hidden;overflow: hidden;}
 4  .gallery-photo.visible{visibility: visible;}
 5  .gallery-photo img{width: 100%;height: 100%;object-fit: cover;border-radius: 5px;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}
 6  @media screen and (min-width: 1200x) {
 7    .gallery-photo{
 8    width: 100%;
 9    columns: 3;
10    column-gap: 20px;
11    }
12  }
13  @media screen and (min-width: 860px) and (max-width: 1323.98px) {
14    .gallery-photo{    
15    width: 100%;
16    columns: 2;
17    column-gap: 20px;}
18  }
19  @media screen and (max-width: 860px) {
20    .gallery-photo{    
21    width: 100%;
22    columns: 1;}
23  }
24  @media (max-width: 767.98px){
25    .photo-time{display: none;}
26  }
27</style>

使用：

1<gallery>![](https://www.sleepymoon.cyou/2023/hugo-shortcodes/2.jpg)![](https://www.sleepymoon.cyou/2023/hugo-shortcodes/1.jpg)</gallery>

PDF/PPT插入

嵌入PDF

新建 pdf.html，内容为：

 1<div class="pdf" style="
 2    padding-bottom: 66%;
 3    position: relative;
 4    display: block;
 5    width: 100%;
 6    border-bottom: 5px solid;
 7">
 8    <iframe
 9        width="100%"
10        height="100%"
11        src="{{ .Get "src" }}"
12        frameborder="0"
13        allowfullscreen=""
14        style="
15            position: absolute;
16            top: 0;
17            left: 0" >
18    </iframe>
19</div>

使用：

1{{< pdf src="https://www.blatchingtonmill.org.uk/assets/Uploads/All-Of-Me-Sheet-Music-John-Legend-All-Of-Me-Piano-Sheet-Music-Medium-Vocals-Piano-Guitar.pdf" >}}

手动输入NeoDB条目

《八度空间》 [台] 周杰伦

< 9.2 >

歌曲可以拥有与电影媲美的叙事性吗？在短短四分钟左右的歌曲里，43 分钟的专辑《八度空间》中，周杰伦用旺盛的创作力和狂想尝试构建出这样的“空间”。“八度空间”意指西方的八度音阶，在看似局限的音乐空间中，周杰伦用他平时从电影和 MV 得来的灵感，给每首歌曲赋予了情节，打造没有维度限制的音乐异想世界。

Album

新建 book.html，内容为：

 1<div class="db-card">
 2    <div class="db-card-subject">
 3        <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ .Get "image" }}"></div>
 4        <div class="db-card-content">
 5            <div class="db-card-title"><a href="{{ .Get "url" }}" class="cute" target="_blank" rel="noreferrer">{{ .Get "title" }}</a></div>
 6            <div class="rating">
 7                <span class="rating_nums"></span><span class="allstardark"><span class="allstarlight" style="width:{{ .Get "rate" }}0%"></span></span><span class="rating_float"></span></span>
 8                <span class="rating_float">< {{ .Get "rate_float" }} ></span>
 9            </div>
10            <div class="db-card-abstract">{{ .Get "brief" }}</div>
11        </div>
12        <div class="db-card-cate">{{ .Get "tag" }}</div>
13    </div>
14</div>

在 custom.scss 中添加：

 1/* db-card -------- start*/
 2.db-card{margin:2.5rem 3rem;background:var(--card-background);border-radius: 7px;box-shadow: 0 6px 10px 0 #00000053;margin-left:auto;margin-right:auto;}
 3.db-card-subject{display: flex;align-items:flex-start;line-height:1.6;padding:12px;position:relative;}
 4.dark .db-card{background:var(--card-background);}
 5.db-card-content {flex:1 1 auto;}
 6.db-card-post {width: 100px;margin-right: 15px;display: flex;flex: 0 0 auto;}
 7.db-card-title {margin-bottom: 3px;font-size: 14px;color: var(--card-text-color-main);;}
 8.db-card-title a{text-decoration: none!important}
 9.db-card-abstract,.db-card-comment{font-size:13px;overflow: auto;max-height:10rem;color: var(--card-text-color-main);;}
10.db-card-cate{position: absolute;top:0;right:0;background:#f99b01;padding:1px 8px;font-size:small;font-style:italic;border-radius:0 8px 0 8px;text-transform:capitalize;}
11.db-card-post img{width: 100px!important;height: 150px!important;border-radius: 4px;-o-object-fit: cover;object-fit: cover;}
12.rating{margin: 0 0 5px;font-size:13px;line-height: 1;display: flex;align-items: center;}
13.rating .allstardark{position:relative;color: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
14}
15.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}
16@media (max-width:550px) {
17	.db-card{margin:0.8rem 1rem;}
18	.db-card-comment{display: none;}
19}
20/* db-card -------- end */

使用：

1{{< book url="#" image="1.png" title="《JAY》 [台] 周杰倫" rate="9" rate_float="9.2" brief="text" tag="Album" >}}

居中引用

人生代代无穷已，江月年年望相似。
不知江月待何人，但见长江送流水。

新建 quote-center.html，内容为：

1<div class="quote-center">
2  {{- $content := .Inner | markdownify -}} 
3  {{- if not (strings.HasPrefix $content "<p>") }} 
4    {{ printf `</p><p>%s</p>` $content | safeHTML }} 
5  {{- else }} 
6    {{- $content }} 
7  {{- end -}}
8</div>

在 custom.scss 中添加：

 1.quote-center {
 2  background-color:#84c4e230!important;
 3  position: relative;
 4  border-left: none;
 5  padding-left: 0;
 6  padding: 20px!important;
 7  border-radius: 5px!important;
 8  border-top: 0px solid var(--color-markdown-blockquote-border);
 9  border-bottom: 0px solid var(--color-markdown-blockquote-border);
10  p {
11    text-align: center !important;
12    margin-top: 1.5em!important;
13    margin-bottom: 1.5em!important;
14    font-weight: bold;
15  }
16  &::before {
17    position: absolute;
18    left: 0;
19    content: '“---';
20    color: #8aa2d3;
21    font-size: 2.5em;
22    font-weight: normal;
23    margin-top: -5%;
24    margin-left: 1%;
25    height: 90%;
26  }
27  &::after {
28    position: absolute;
29    right: 0;
30    content: '---”';
31    color: #8aa2d3;
32    font-size: 2.5em;
33    font-weight: normal;
34    margin-top: -6%;
35    margin-right: 1%;
36    height: 90%;
37  }
38}

使用：

1{{< quote-center >}}
2人生代代无穷已，江月年年望相似。<br>不知江月待何人，但见长江送流水。
3{{< /quote-center >}}

古书排版

沧海一声笑
滔滔两岸潮
浮沉随浪
只记今朝
苍天笑
纷纷世上潮
谁负谁胜出
天知晓
江山笑
烟雨遥
涛浪淘尽红尘俗世
几多娇
清风笑
竟惹寂寥
豪情还剩了一襟晚照
苍生笑
不再寂寥
豪情仍在痴痴笑笑

新建 verticaltext.html，内容为：

 1<style>
 2.mainvlr {
 3  margin:20px;
 4  font-size: 20px;
 5  letter-spacing: 2px;
 6}
 7
 8.vlr{
 9  writing-mode: vertical-lr;
10}
11
12.vrl{
13  writing-mode: vertical-rl;
14  unicode-bidi: bidi-override;
15  border: 1px solid;
16  padding: 5px;
17  margin: 5px;
18  margin-right: 5px;
19  word-wrap: break-word;
20  overflow-y:auto;
21  height: {{ .Get "height" | default "500" }}px;
22  width: 100%;
23}
24</style>
25
26<div class="vrl" id="vrlmain">
27
28<div class="mainvlr">
29
30{{ .Inner | markdownify }}
31
32</div>
33
34</div>
35
36<script>
37window.scrollTo(document.body.scrollWidth - 500, 0);
38</script>

使用：（默认高度为500px，可以自定义）

1{{< verticaltext height="300px" >}}
2沧海一声笑
3滔滔两岸潮
4{{< /verticaltext >}}

对话样式

John Doe 2023-09-12 14:30

这是左边的消息内容。

2023-09-12 14:45 Alice

这是右边的消息内容。你好呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀

新建 chat.html，内容为：

  1{{ if eq (.Get "position") "left" }}
  2<div class="chat --other">
  3    <div class="chat__inner">
  4        <div class="chat__meta">{{ .Get "name" }}&nbsp;&nbsp;&nbsp;{{ .Get "timestamp" }}</div>
  5        <div class="chat__text">
  6            {{ .Inner }}
  7        </div>
  8    </div>
  9</div>
 10{{ else if eq (.Get "position") "right" }}
 11<div class="chat --self">
 12    <div class="chat__inner">
 13        <div class="chat__meta" style="text-align: right;">{{ .Get "timestamp" }}&nbsp;&nbsp;&nbsp;{{ .Get "name" }}</div>
 14        <div class="chat__text">
 15            {{ .Inner }}
 16        </div>
 17    </div>
 18</div>
 19{{ end }}
 20
 21<style>
 22    .chat {
 23        margin: 10px;
 24        padding: 10px;
 25        position: relative;
 26        /* 添加相对定位，以便定位尖角箭头 */
 27        transition: transform 0.2s;
 28        /* 添加过渡效果，使放大平滑 */
 29        max-width: 80%;
 30        min-width: 15%;
 31    }
 32    
 33    .chat:hover {
 34        transform: scale(1.05);
 35    }
 36    
 37    .chat.--self {
 38        text-align: left;
 39        background-color: #ecf5ff;
 40        color: #000000;
 41        border-radius: 15px;
 42        width: fit-content;
 43        margin-left: auto;
 44    }
 45    /* 尖角箭头 */
 46    
 47    .chat.--self::before {
 48        content: "";
 49        position: absolute;
 50        right: -18px;
 51        /* 调整箭头位置 */
 52        bottom: 5px;
 53        transform: translateY(-50%);
 54        border-width: 15px 0 0 20px;
 55        border-style: solid;
 56        border-color: transparent transparent transparent #ecf5ff;
 57        /* 箭头颜色与对话框背景颜色一致 */
 58    }
 59    /* 左边对话框样式 */
 60    
 61    .chat.--other {
 62        text-align: left;
 63        background-color: #ffecec;
 64        color: #333;
 65        border-radius: 15px;
 66        position: relative;
 67        width: fit-content;
 68    }
 69    /* 左边对话框的尖角箭头 */
 70    
 71    .chat.--other::before {
 72        content: "";
 73        position: absolute;
 74        left: -18px;
 75        bottom: 5px;
 76        transform: translateY(-50%);
 77        border-width: 15px 20px 0 0;
 78        border-style: solid;
 79        border-color: transparent #ffecec transparent transparent;
 80    }
 81    /* 消息元数据样式（名称和时间戳） */
 82    
 83    .chat__meta {
 84        font-weight: bold;
 85        font-size: 0.67em;
 86        color: #707070;
 87        margin-bottom: 5px;
 88    }
 89    /* 消息文本样式 */
 90    
 91    .chat__text {
 92        font-size: 0.9em;
 93        margin-left: 10px;
 94        word-break: break-all;
 95    }
 96    
 97    [data-scheme="dark"] {
 98        .chat.--self {
 99            color: #fefefe;
100            background-color: #253958;
101        }
102        .chat.--self::before {
103            border-color: transparent transparent transparent #253958;
104        }
105        .chat.--other {
106            color: #fefefe;
107            background-color: #1a1a1a;
108        }
109        .chat.--other::before {
110            border-color: transparent #1a1a1a transparent transparent;
111        }
112        .chat__meta {
113            color: #b1b1b1;
114        }
115    }
116</style>

使用：

1{{< chat position="left" name="John Doe" timestamp="2023-09-12 14:30" >}}这是左边的消息内容。{{< /chat >}}
2{{< chat position="right" name="Alice" timestamp="2023-09-12 14:45" >}}这是右边的消息内容。{{< /chat >}}

脚注

第一层引用¹

第二层引用²

第三层引用³

单独引用²

新建 layouts/shortcodes/inner.html，内容为：

1{{ .Inner }}

新建 layouts/shortcodes/outer.html，内容为：

1{{ .Inner }}

使用：（outer 是外层引用或用作单独脚注，inner仅用作内部嵌套的脚注）

 1{{% outer %}}
 2footnote[^1]
 3{{< inner >}}
 4footnote[^2]
 5{{< /inner >}}
 6{{% /outer %}}
 7
 8...
 9...
10
11[^1]: footnote 1
12[^2]: footnote 2

简化版引用

十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。

新建 simple-notice.html，内容为：

 1<!-- 文件位置：~/layouts/shortcodes/notice.html -->
 2
 3<!--https://github.com/martignoni/hugo-notice-->
 4{{- $noticeType := .Get 0 -}}
 5
 6{{- $raw := (markdownify .Inner | chomp) -}}
 7
 8{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
 9
10{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon simple-notice-icon") }}
11<div class="simple-notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
12    <div class="simple-notice-title">{{ $icon | safeHTML }}</div>
13    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
14</div>

在 custom.scss 中添加：

  1// 文件位置：~/assets/scss/custom.scss
  2
  3.simple-notice {
  4    position:relative;
  5    padding: 1em 0 1em 2em;
  6    margin-bottom: 1em;
  7    transition: all .5s;
  8    p:last-child {
  9        margin-bottom: 0;
 10    }
 11    .simple-notice-title {
 12        position: absolute;
 13        left: 0.8em;
 14        .simple-notice-icon {
 15            width: 1em;
 16            height: 1em;
 17            margin-left: -0.8em;
 18        }
 19    }
 20    &.simple-notice-warning {
 21        border-top: 2px solid hsl(0, 100%, 35%);
 22        color: hsl(0, 100%, 35%);
 23        .simple-notice-title {
 24            color: hsl(0, 100%, 35%);
 25        }
 26        a {
 27            color: hsl(0, 100%, 35%);
 28            text-decoration-color: hsl(0, 100%, 35%);
 29        }
 30    }
 31    &.simple-notice-info {
 32        border-top: 2px solid hsl(40, 80%, 45%);
 33        color: hsl(40, 80%, 45%);
 34        .simple-notice-title {
 35            color: hsl(40, 80%, 45%);
 36        }
 37        a {
 38            color: hsl(40, 80%, 45%);
 39            text-decoration-color: hsl(40, 80%, 45%);
 40        }
 41    }
 42    &.simple-notice-note {
 43        border-top: 2px solid hsl(210, 100%, 25%);
 44        color: hsl(210, 100%, 25%);
 45        .simple-notice-title {
 46            color: hsl(210, 100%, 25%);
 47        }
 48        a {
 49            color: hsl(210, 100%, 25%);
 50            text-decoration-color: hsl(210, 100%, 25%);
 51        }
 52    }
 53    &.simple-notice-tip {
 54        border-top: 2px solid hsl(150, 100%, 25%);
 55        color: hsl(150, 100%, 25%);
 56        .simple-notice-title {
 57            color: hsl(150, 100%, 25%);
 58        }
 59        a {
 60            color: hsl(150, 100%, 25%);
 61            text-decoration-color: hsl(150, 100%, 25%);
 62        }
 63    }
 64}
 65
 66[data-theme="dark"] .simple-notice {
 67    &.simple-notice-warning {
 68        border-top: 2px solid hsl(0, 65%, 65%);
 69        color: hsl(0, 65%, 65%);
 70        .simple-notice-title {
 71            color: hsl(0, 65%, 65%);
 72        }
 73        a {
 74            color: hsl(0, 65%, 65%);
 75            text-decoration-color: hsl(0, 65%, 65%);
 76        }
 77    }
 78    &.simple-notice-info {
 79        border-top: 2px solid hsl(30, 80%, 70%);
 80        color: hsl(30, 80%, 70%);
 81        .simple-notice-title {
 82            color: hsl(30, 80%, 70%);
 83        }
 84        a {
 85            color: hsl(30, 80%, 70%);
 86            text-decoration-color: hsl(30, 80%, 70%);
 87        }
 88    }
 89    &.simple-notice-note {
 90        border-top: 2px solid hsl(200, 65%, 65%);
 91        color: hsl(200, 65%, 65%);
 92        .simple-notice-title {
 93            color: hsl(200, 65%, 65%);
 94        }
 95        a {
 96            color: hsl(200, 65%, 65%);
 97            text-decoration-color: hsl(200, 65%, 65%);
 98        }
 99    }
100    &.simple-notice-tip {
101        border-top: 2px solid hsl(140, 65%, 65%);
102        color: hsl(140, 65%, 65%);
103        .simple-notice-title {
104            color: hsl(140, 65%, 65%);
105        }
106        a {
107            color: hsl(140, 65%, 65%);
108            text-decoration-color: hsl(140, 65%, 65%);
109        }
110    }
111}

在 data/SVG.toml 中插入图标：

1# 文件位置：~/data/SVG.toml
2
3# Notice Icon
4simple-notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M114.57 76.07a45.71 45.71 0 00-67.51-6.41c-17.58 16.18-19 43.52-4.75 62.77l91.78 123-92.33 124.15c-14.23 19.25-13.11 46.59 4.74 62.77a45.71 45.71 0 0067.5-6.41L242.89 262.7a12.14 12.14 0 000-14.23zm355.67 303.51l-92.33-124.13 91.78-123c14.22-19.25 12.83-46.59-4.75-62.77a45.71 45.71 0 00-67.51 6.41l-128 172.12a12.14 12.14 0 000 14.23L398 435.94a45.71 45.71 0 0067.51 6.41c17.84-16.18 18.96-43.52 4.73-62.77z"/></svg>'
5simple-notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512"><path d="M176 432c0 44.11-35.89 80-80 80s-80-35.89-80-80 35.89-80 80-80 80 35.89 80 80zM25.26 25.2l13.6 272A24 24 0 0062.83 320h66.34a24 24 0 0023.97-22.8l13.6-272A24 24 0 00142.77 0H49.23a24 24 0 00-23.97 25.2z"/></svg>'
6simple-notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512"><path d="M20 424.23h20V279.77H20a20 20 0 01-20-20V212a20 20 0 0120-20h112a20 20 0 0120 20v212.23h20a20 20 0 0120 20V492a20 20 0 01-20 20H20a20 20 0 01-20-20v-47.77a20 20 0 0120-20zM96 0a72 72 0 100 144A72 72 0 0096 0z"/></svg>'
7simple-notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.69l240.1-240.1c10-10 26.2-10 36.2 0l36.2 36.21c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z"/></svg>'

使用：

1{{< simple-notice simple-notice-warning >}}
2十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
3{{< /simple-notice >}}

荧光标注

红色萤光笔橙色萤光笔黄色萤光笔绿色萤光笔蓝色萤光笔紫色萤光笔

新建 setSwlColor.html，内容为：

1{{ $color := default "mark_blue" (.Get "color") }}<span class='swl-marker {{ $color }}'>{{ .Inner }}</span>

在 custom.scss 中添加：

 1.swl-marker {
 2    display: inline;
 3    padding: 2px;
 4}
 5
 6.mark_blue {
 7    background: -webkit-linear-gradient(transparent 64%, #b7e3ff 0%);
 8    background: linear-gradient(transparent 64%, #b7e3ff 0%)
 9}
10
11.mark_green {
12    background: -webkit-linear-gradient(transparent 64%, #bdf9c3 0%);
13    background: linear-gradient(transparent 64%, #bdf9c3 0%);
14}
15
16.mark_yellow {
17    background: -webkit-linear-gradient(transparent 64%, #fcf69f 0%);
18    background: linear-gradient(transparent 64%, #fcf69f 0%)
19}
20
21.mark_orange {
22    background: -webkit-linear-gradient(transparent 64%, #ffddbc 0%);
23    background: linear-gradient(transparent 64%, #ffddbc 0%)
24}
25
26.mark_red {
27    background: -webkit-linear-gradient(transparent 64%, #dfa1a1 0%);
28    background: linear-gradient(transparent 64%, #dfa1a1 0%)
29}

使用：

1{{< setSwlColor color="mark_blue" >}}蓝色萤光笔{{< /setSwlColor >}}

警告框

标注

摘要

信息

提示

成功

疑问

警告

失败

危险

漏洞

范例

引用

新建 admonition.html，内容为：

 1{{- /* 使用方法 {{< admonition type=tip title="小标题" open=false >}}内容{{< /admonition >}}，其中type支持note, abstract, info, tip, success, question, warning, failure, danger, bug, example, quote， open表示默认是否为展开状态 */ -}}
 2{{- $inner := .Inner | .Page.RenderString -}}
 3
 4{{- $iconMap := dict "note" "fas fa-pencil-alt fa-fw" -}}
 5{{- $iconMap  = dict "abstract" "fas fa-list-ul fa-fw" | merge $iconMap -}}
 6{{- $iconMap  = dict "info" "fas fa-info-circle fa-fw" | merge $iconMap -}}
 7{{- $iconMap  = dict "tip" "fas fa-lightbulb fa-fw" | merge $iconMap -}}
 8{{- $iconMap  = dict "success" "fas fa-check-circle fa-fw" | merge $iconMap -}}
 9{{- $iconMap  = dict "question" "fas fa-question-circle fa-fw" | merge $iconMap -}}
10{{- $iconMap  = dict "warning" "fas fa-exclamation-triangle fa-fw" | merge $iconMap -}}
11{{- $iconMap  = dict "failure" "fas fa-times-circle fa-fw" | merge $iconMap -}}
12{{- $iconMap  = dict "danger" "fas fa-skull-crossbones fa-fw" | merge $iconMap -}}
13{{- $iconMap  = dict "bug" "fas fa-bug fa-fw" | merge $iconMap -}}
14{{- $iconMap  = dict "example" "fas fa-list-ol fa-fw" | merge $iconMap -}}
15{{- $iconMap  = dict "quote" "fas fa-quote-right fa-fw" | merge $iconMap -}}
16{{- $iconDetails := "fas fa-angle-right fa-fw" -}}
17
18{{- if .IsNamedParams -}}
19    {{- $type := .Get "type" | default "note" -}}
20    <div class="details admonition {{ $type }}{{ if .Get `open` | ne false }} open{{ end }}">
21        <div class="details-summary admonition-title">
22            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
23        </div>
24        <div class="details-content">
25            <div class="admonition-content">
26                {{- $inner -}}
27            </div>
28        </div>
29    </div>
30{{- else -}}
31    {{- $type := .Get 0 | default "note" -}}
32    <div class="details admonition {{ $type }}{{ if .Get 2 | ne false }} open{{ end }}">
33        <div class="details-summary admonition-title">
34            <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
35        </div>
36        <div class="details-content">
37            <div class="admonition-content">
38                {{- $inner -}}
39            </div>
40        </div>
41    </div>
42{{- end -}}

在 custom.scss 中添加：

  1/*!
  2 * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
  3 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  4 */
  5 .fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bacteria:before{content:"\e059"}.fa-bacterium:before{content:"\e05a"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-box-tissue:before{content:"\e05b"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudflare:before{content:"\e07d"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\e052"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-deezer:before{content:"\e077"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edge-legacy:before{content:"\e078"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-faucet:before{content:"\e005"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\e007"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-pay:before{content:"\e079"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guilded:before{content:"\e07e"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-sparkles:before{content:"\e05d"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-hands-wash:before{content:"\e05e"}.fa-handshake:before{content:"\f2b5"}.fa-handshake-alt-slash:before{content:"\e05f"}.fa-handshake-slash:before{content:"\e060"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-head-side-cough:before{content:"\e061"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-head-side-mask:before{content:"\e063"}.fa-head-side-virus:before{content:"\e064"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hive:before{content:"\e07f"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hospital-user:before{content:"\f80d"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-house-user:before{content:"\e065"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\e013"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-innosoft:before{content:"\e080"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\e055"}.fa-instalod:before{content:"\e081"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-house:before{content:"\e066"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lungs:before{content:"\f604"}.fa-lungs-virus:before{content:"\e067"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\e01a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\e056"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-octopus-deploy:before{content:"\e082"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-arrows:before{content:"\e068"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-perbyte:before{content:"\e083"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\e01e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-plane-slash:before{content:"\e069"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pump-medical:before{content:"\e06a"}.fa-pump-soap:before{content:"\e06b"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-rust:before{content:"\e07a"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-virus:before{content:"\e06c"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopify:before{content:"\e057"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sink:before{content:"\e06d"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-soap:before{content:"\e06e"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-stopwatch-20:before{content:"\e06f"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-store-alt-slash:before{content:"\e070"}.fa-store-slash:before{content:"\e071"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-tiktok:before{content:"\e07b"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\e041"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-uncharted:before{content:"\e084"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\e049"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-unsplash:before{content:"\e07c"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-users-slash:before{content:"\e073"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-vest:before{content:"\e085"}.fa-vest-patches:before{content:"\e086"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-virus:before{content:"\e074"}.fa-virus-slash:before{content:"\e075"}.fa-viruses:before{content:"\e076"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-watchman-monitoring:before{content:"\e087"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wodu:before{content:"\e088"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/font/fa/fa-brands-400.eot);src:url(/font/fa/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(/font/fa/fa-brands-400.woff2) format("woff2"),url(/font/fa/fa-brands-400.woff) format("woff"),url(/font/fa/fa-brands-400.ttf) format("truetype"),url(/font/fa/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(/font/fa/fa-regular-400.eot);src:url(/font/fa/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(/font/fa/fa-regular-400.woff2) format("woff2"),url(/font/fa/fa-regular-400.woff) format("woff"),url(/font/fa/fa-regular-400.ttf) format("truetype"),url(/font/fa/fa-regular-400.svg#fontawesome) format("svg")}.fab,.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(/font/fa/fa-solid-900.eot);src:url(/font/fa/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(/font/fa/fa-solid-900.woff2) format("woff2"),url(/font/fa/fa-solid-900.woff) format("woff"),url(/font/fa/fa-solid-900.ttf) format("truetype"),url(/font/fa/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
  6
  7.details .details-summary:hover {
  8  cursor: pointer;
  9}
 10.details i.details-icon {
 11color: var(--content);
 12-webkit-transition: transform 0.2s ease;
 13-moz-transition: transform 0.2s ease;
 14-o-transition: transform 0.2s ease;
 15transition: transform 0.2s ease;
 16}
 17[class=dark] .details i.details-icon {
 18color: var(--content);
 19}
 20.details .details-content {
 21max-height: 0;
 22overflow-y: hidden;
 23word-wrap: break-word;
 24overflow-x: hidden;
 25-webkit-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) 0s;
 26-moz-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) 0s;
 27-o-transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) 0s;
 28transition: max-height 0.8s cubic-bezier(0, 1, 0, 1) 0s;
 29}
 30.details.open i.details-icon {
 31-webkit-transform: rotate(90deg);
 32-moz-transform: rotate(90deg);
 33-ms-transform: rotate(90deg);
 34-o-transform: rotate(90deg);
 35transform: rotate(90deg);
 36}
 37.details.open .details-content {
 38max-height: 12000px;
 39-webkit-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
 40-moz-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
 41-o-transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
 42transition: max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s;
 43overflow-x: hidden;
 44}
 45
 46.admonition {
 47  position: relative;
 48  margin: 1rem 0;
 49  padding: 0 0.75rem;
 50  background-color: rgba(68, 138, 255, 0.1);
 51  border-left: 0.25rem solid #448aff;
 52  border-radius: 8px;
 53  overflow: auto;
 54}
 55.admonition .admonition-title {
 56  font-weight: bold;
 57  margin: 0 -0.75rem;
 58  padding: 0.25rem 3rem;
 59  border-radius: 7px;
 60  border-bottom: 1px solid rgba(68, 138, 255, 0.1);
 61  background-color: rgba(68, 138, 255, 0.25);
 62}
 63.admonition.open .admonition-title {
 64  background-color: rgba(68, 138, 255, 0.1);
 65}
 66.admonition .admonition-content {
 67  padding: 0.5rem 0;
 68}
 69.admonition i.icon {
 70  font-size: 1.45rem;
 71  color: #448aff;
 72  position: absolute;
 73  top: 1.25rem;
 74  left: 0.65rem;
 75}
 76.admonition i.details-icon {
 77  position: absolute;
 78  top: 0.9rem;
 79  right: 0.5rem;
 80}
 81.admonition.note {
 82  border-left-color: #448aff;
 83}
 84.admonition.note i.icon {
 85  color: #448aff;
 86}
 87.admonition.abstract {
 88  border-left-color: #00b0ff;
 89}
 90.admonition.abstract i.icon {
 91  color: #00b0ff;
 92}
 93.admonition.info {
 94  border-left-color: #00b8d4;
 95}
 96.admonition.info i.icon {
 97  color: #00b8d4;
 98}
 99.admonition.tip {
100  border-left-color: #00bfa5;
101}
102.admonition.tip i.icon {
103  color: #00bfa5;
104}
105.admonition.success {
106  border-left-color: #00c853;
107}
108.admonition.success i.icon {
109  color: #00c853;
110}
111.admonition.question {
112  border-left-color: #64dd17;
113}
114.admonition.question i.icon {
115  color: #64dd17;
116}
117.admonition.warning {
118  border-left-color: #ff9100;
119}
120.admonition.warning i.icon {
121  color: #ff9100;
122}
123.admonition.failure {
124  border-left-color: #ff5252;
125}
126.admonition.failure i.icon {
127  color: #ff5252;
128}
129.admonition.danger {
130  border-left-color: #ff1744;
131}
132.admonition.danger i.icon {
133  color: #ff1744;
134}
135.admonition.bug {
136  border-left-color: #f50057;
137}
138.admonition.bug i.icon {
139  color: #f50057;
140}
141.admonition.example {
142  border-left-color: #651fff;
143}
144.admonition.example i.icon {
145  color: #651fff;
146}
147.admonition.quote {
148  border-left-color: #9e9e9e;
149}
150.admonition.quote i.icon {
151  color: #9e9e9e;
152}
153.admonition.note {
154  background-color: rgba(68, 138, 255, 0.1);
155}
156.admonition.note .admonition-title {
157  border-bottom-color: rgba(68, 138, 255, 0.1);
158  background-color: rgba(68, 138, 255, 0.25);
159}
160.admonition.note.open .admonition-title {
161  background-color: rgba(68, 138, 255, 0.1);
162}
163.admonition.abstract {
164  background-color: rgba(0, 176, 255, 0.1);
165}
166.admonition.abstract .admonition-title {
167  border-bottom-color: rgba(0, 176, 255, 0.1);
168  background-color: rgba(0, 176, 255, 0.25);
169}
170.admonition.abstract.open .admonition-title {
171  background-color: rgba(0, 176, 255, 0.1);
172}
173.admonition.info {
174  background-color: rgba(0, 184, 212, 0.1);
175}
176.admonition.info .admonition-title {
177  border-bottom-color: rgba(0, 184, 212, 0.1);
178  background-color: rgba(0, 184, 212, 0.25);
179}
180.admonition.info.open .admonition-title {
181  background-color: rgba(0, 184, 212, 0.1);
182}
183.admonition.tip {
184  background-color: rgba(0, 191, 165, 0.1);
185}
186.admonition.tip .admonition-title {
187  border-bottom-color: rgba(0, 191, 165, 0.1);
188  background-color: rgba(0, 191, 165, 0.25);
189}
190.admonition.tip.open .admonition-title {
191  background-color: rgba(0, 191, 165, 0.1);
192}
193.admonition.success {
194  background-color: rgba(0, 200, 83, 0.1);
195}
196.admonition.success .admonition-title {
197  border-bottom-color: rgba(0, 200, 83, 0.1);
198  background-color: rgba(0, 200, 83, 0.25);
199}
200.admonition.success.open .admonition-title {
201  background-color: rgba(0, 200, 83, 0.1);
202}
203.admonition.question {
204  background-color: rgba(100, 221, 23, 0.1);
205}
206.admonition.question .admonition-title {
207  border-bottom-color: rgba(100, 221, 23, 0.1);
208  background-color: rgba(100, 221, 23, 0.25);
209}
210.admonition.question.open .admonition-title {
211  background-color: rgba(100, 221, 23, 0.1);
212}
213.admonition.warning {
214  background-color: rgba(255, 145, 0, 0.1);
215}
216.admonition.warning .admonition-title {
217  border-bottom-color: rgba(255, 145, 0, 0.1);
218  background-color: rgba(255, 145, 0, 0.25);
219}
220.admonition.warning.open .admonition-title {
221  background-color: rgba(255, 145, 0, 0.1);
222}
223.admonition.failure {
224  background-color: rgba(255, 82, 82, 0.1);
225}
226.admonition.failure .admonition-title {
227  border-bottom-color: rgba(255, 82, 82, 0.1);
228  background-color: rgba(255, 82, 82, 0.25);
229}
230.admonition.failure.open .admonition-title {
231  background-color: rgba(255, 82, 82, 0.1);
232}
233.admonition.danger {
234  background-color: rgba(255, 23, 68, 0.1);
235}
236.admonition.danger .admonition-title {
237  border-bottom-color: rgba(255, 23, 68, 0.1);
238  background-color: rgba(255, 23, 68, 0.25);
239}
240.admonition.danger.open .admonition-title {
241  background-color: rgba(255, 23, 68, 0.1);
242}
243.admonition.bug {
244  background-color: rgba(245, 0, 87, 0.1);
245}
246.admonition.bug .admonition-title {
247  border-bottom-color: rgba(245, 0, 87, 0.1);
248  background-color: rgba(245, 0, 87, 0.25);
249}
250.admonition.bug.open .admonition-title {
251  background-color: rgba(245, 0, 87, 0.1);
252}
253.admonition.example {
254  background-color: rgba(101, 31, 255, 0.1);
255}
256.admonition.example .admonition-title {
257  border-bottom-color: rgba(101, 31, 255, 0.1);
258  background-color: rgba(101, 31, 255, 0.25);
259}
260.admonition.example.open .admonition-title {
261  background-color: rgba(101, 31, 255, 0.1);
262}
263.admonition.quote {
264  background-color: rgba(60,60,60,.1);
265}
266.admonition.quote .admonition-title {
267  border-bottom-color: rgba(60, 60, 60, 0.1);
268  background-color: rgba(60, 60, 60, 0.25);
269}
270.admonition.quote.open .admonition-title {
271  background-color: rgba(60, 60, 60, 0.1);
272}
273.admonition:last-child {
274  margin-bottom: 0.75rem;
275}
276.admonition.note.open .admonition-title:hover,
277.admonition.note .admonition-title:hover {
278  background-color: rgba(68, 138, 255, 0.5);
279  cursor: url('/img/link.png'), pointer !important;
280}
281
282.admonition.abstract.open .admonition-title:hover,
283.admonition.abstract .admonition-title:hover {
284  background-color: rgba(0, 176, 255, 0.5);
285  cursor: url('/img/link.png'), pointer !important;
286}
287
288.admonition.info.open .admonition-title:hover,
289.admonition.info .admonition-title:hover {
290  background-color: rgba(0, 184, 212, 0.5);
291  cursor: url('/img/link.png'), pointer !important;
292}
293
294.admonition.tip.open .admonition-title:hover,
295.admonition.tip .admonition-title:hover {
296  background-color: rgba(0, 191, 165, 0.5);
297  cursor: url('/img/link.png'), pointer !important;
298}
299
300.admonition.success.open .admonition-title:hover,
301.admonition.success .admonition-title:hover {
302  background-color: rgba(0, 200, 83, 0.5);
303  cursor: url('/img/link.png'), pointer !important;
304}
305
306.admonition.question.open .admonition-title:hover,
307.admonition.question .admonition-title:hover {
308  background-color: rgba(100, 221, 23, 0.5);
309  cursor: url('/img/link.png'), pointer !important;
310}
311
312.admonition.warning.open .admonition-title:hover,
313.admonition.warning .admonition-title:hover {
314  background-color: rgba(255, 145, 0, 0.5);
315  cursor: url('/img/link.png'), pointer !important;
316}
317
318.admonition.failure.open .admonition-title:hover,
319.admonition.failure .admonition-title:hover {
320  background-color: rgba(255, 82, 82, 0.5);
321  cursor: url('/img/link.png'), pointer !important;
322}
323
324.admonition.danger.open .admonition-title:hover,
325.admonition.danger .admonition-title:hover {
326  background-color: rgba(255, 23, 68, 0.5);
327  cursor: url('/img/link.png'), pointer !important;
328}
329
330.admonition.bug.open .admonition-title:hover,
331.admonition.bug .admonition-title:hover {
332  background-color: rgba(245, 0, 87, 0.5);
333  cursor: url('/img/link.png'), pointer !important;
334}
335
336.admonition.example.open .admonition-title:hover,
337.admonition.example .admonition-title:hover {
338  background-color: rgba(101, 31, 255, 0.5);
339  cursor: url('/img/link.png'), pointer !important;
340}
341
342.admonition.quote.open .admonition-title:hover,
343.admonition.quote .admonition-title:hover {
344  background-color: rgba(60, 60, 60, 0.5);
345  cursor: url('/img/link.png'), pointer !important;
346}
347[data-scheme="dark"] .admonition.quote.open .admonition-title:hover,
348[data-scheme="dark"] .admonition.quote .admonition-title:hover {
349  background-color: rgba(160, 160, 160, 0.5);
350}

在 layouts/partials/footer/custom.html 最后添加：

 1{{- /* admonition toggle */}}
 2<script>
 3    let details = document.getElementsByClassName('details')
 4    details = details || [];
 5    for (let i = 0; i < details.length; i++) {
 6        let element = details[i]
 7        const summary = element.getElementsByClassName('details-summary')[0];
 8        if (summary) {
 9            summary.addEventListener('click', () => {
10                element.classList.toggle('open');
11            }, false);
12        }
13    }
14</script>

复制字体文件

将字体文件复制到 static/font/fa/ 中。所有用到的文件目录结构如下：

 1tree hugo/
 2# hugo/
 3# ├─ assets
 4# │    └─ scss
 5# │           └─ custom.scss
 6# ├─ layouts
 7# │    ├─ partials
 8# │    │     └─ footer
 9# │    │            └─ custom.html
10# │    └─ shortcodes
11# │           └─ admonition.html
12# └─ static
13#        └─ font
14#               └─ fa
15#                      ├─ fa-brands-400.eot
16#                      ├─ fa-brands-400.svg
17#                      ├─ fa-brands-400.ttf
18#                      ├─ fa-brands-400.woff
19#                      ├─ fa-brands-400.woff2
20#                      ├─ fa-regular-400.eot
21#                      ├─ fa-regular-400.svg
22#                      ├─ fa-regular-400.ttf
23#                      ├─ fa-regular-400.woff
24#                      ├─ fa-regular-400.woff2
25#                      ├─ fa-solid-900.eot
26#                      ├─ fa-solid-900.svg
27#                      ├─ fa-solid-900.ttf
28#                      ├─ fa-solid-900.woff
29#                      └─ fa-solid-900.woff2

使用：

1{{< admonition type=note title="标注" open=false >}}标注{{< /admonition >}}

小记

参考

‫ ‫ ‫

忙忙忙，只能又水一篇了

脚注参考链接 1 : 续・深入探究 Hugo 短代码：我今天还就非得把这个脚注写出来不可 ↩︎
脚注参考链接 2 : Footnotes are not rendered as expected in nested shortcodes ↩︎ ↩︎
footnote 3 ：点返回试试 → ↩︎

用 CF Workers 加密文章

Mon, 07 Apr 2025 11:21:13 +0800

前言

之前在这篇文章里加入了给文章进行密码加密的功能。

但是不用脑子想都知道，这种加密方式只是掩耳盗铃图一乐。为什么呢？来看一下它的实现原理：

前端密码存储：

1const correctPassword = {{ .Params.password }};

这里的密码是从 Hugo 的文章前置参数 (front matter) 中获取的，直接插入到 JavaScript 代码中。

用户输入密码：

1const enteredPassword = prompt('请输入文章密码：');

使用浏览器内置的 prompt 弹窗，让用户输入密码。

密码校验：

 1if (enteredPassword !== correctPassword) {
 2    alert('密码错误！');
 3    if (history.length <= 1) {
 4        window.opener = null;
 5        window.open('', '_self');
 6        window.close();
 7    } else {
 8        history.back();
 9    }
10}

如果用户输入的密码与前端存储的密码不一致，则提示密码错误，并尝试关闭页面或返回上一页。

所以，存在的问题与安全隐患也就很明显了：

1. 密码明文暴露问题：

由于 Hugo 是静态网站生成器，所有模板渲染后的内容都是静态 HTML 和 JavaScript 文件。因此，{{ .Params.password }} 会直接以明文形式暴露在生成的 HTML 源代码中。用户只需打开浏览器的“查看源代码”或开发者工具，即可轻松看到密码明文，完全失去了密码保护的意义。

2. 前端校验不安全：

纯前端的密码校验本质上是不安全的，因为前端代码完全暴露给用户，用户可以轻松绕过或修改校验逻辑。用户甚至可以直接在浏览器控制台中修改 JavaScript 变量，绕过密码检查。

例如，用户可以在控制台中执行：

1enteredPassword = correctPassword; // 直接绕过密码检查

3. 用户体验问题（次要）：

使用浏览器原生的 prompt 弹窗，界面不美观，用户体验较差。

那么一般来讲，要怎么解决呢？

1. 后端校验：

真正安全的密码保护必须在后端实现。静态网站本身无法安全地实现密码保护功能。
可以使用服务器端（如 Node.js、PHP、Python 等）实现密码校验，只有密码正确时才返回文章内容。

2. 第三方服务或 API 校验：

如果一定要使用静态网站，可以考虑使用第三方服务（如 Netlify Identity、Firebase Authentication）实现安全的身份验证和密码保护。

3. 客户端加密（次优方案）：

如果一定要纯前端实现，可以考虑使用客户端加密方案（如 AES 加密），密码不直接暴露在源码中，而是存储加密后的内容，用户输入密码后再解密内容。
但即使如此，密钥管理仍然是个问题，安全性仍然有限。

然而，Hugo 是静态网站生成器，生成的内容都是静态文件；Cloudflare Pages 作为一个静态网站托管服务，专门用于托管静态内容（HTML、CSS、JS 等），并不支持动态后端代码（如 PHP、Node.js 等）。

应用到 Cloudflare Pages 上面，这些加密手段如何呢？

一、后端校验（不可行）

原因：Cloudflare Pages 仅支持静态文件托管，不支持运行后端代码（如 Node.js、PHP、Python 等）。
结论：无法直接在 Cloudflare Pages 上实现后端密码校验。

二、第三方服务或 API 校验（推荐，可行）

虽然 Cloudflare Pages 本身不支持后端代码，但你可以借助第三方服务实现安全的密码保护：

实现思路：

使用第三方身份验证服务（如 Firebase Authentication、Auth0、Netlify Identity 等）实现用户登录和密码保护。
用户访问页面时，前端调用第三方服务的 API 进行身份验证，验证通过后再加载受保护的内容。
受保护的内容可以存储在 Cloudflare Pages 上，但内容本身是加密的，只有通过第三方服务验证后才能解密显示。

优点：

安全性高，密码不会暴露在前端代码中。
用户体验较好，支持多种登录方式（邮箱、Google、GitHub 等）。

缺点：

需要额外的第三方服务，增加了一定的复杂性。

三、客户端加密方案（可行，但安全性有限）

实现思路：

使用 AES 等对称加密算法，在发布文章前对文章内容进行加密。
加密后的内容存储在 Hugo 生成的静态页面中。
用户访问页面时，输入密码后，前端 JavaScript 使用用户输入的密码尝试解密内容。
如果密码正确，内容解密成功并显示；密码错误则无法解密，显示错误提示。

具体实现步骤：

在本地使用 AES 加密工具（如 CryptoJS）对文章内容进行加密。
将加密后的内容放入 Hugo 的 Markdown 文件或模板中。
在 Hugo 模板中引入 CryptoJS 库，用户输入密码后尝试解密内容。

示例代码（简化版）：

 1<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>
 2<script>
 3  const encryptedContent = "{{ .Params.encryptedContent }}"; // 加密后的内容
 4  const password = prompt("请输入密码：");
 5  try {
 6    const bytes = CryptoJS.AES.decrypt(encryptedContent, password);
 7    const originalText = bytes.toString(CryptoJS.enc.Utf8);
 8    if (!originalText) throw new Error("解密失败");
 9    document.getElementById("content").innerHTML = originalText;
10  } catch (e) {
11    alert("密码错误或解密失败！");
12  }
13</script>
14<div id="content"></div>

优点：

不需要额外的第三方服务，纯静态实现。
密码不会直接暴露在源码中（但加密后的内容仍然暴露）。

缺点：

安全性有限，攻击者仍然可以暴力破解或尝试解密。
用户体验一般，且每次修改内容都需要重新加密。

Hugo Encryptor 加密

还有这个Hugo的加密项目：

Hugo Encryptor

Hugo-Encryptor 是一款能够帮助作者保护文章内容的工具。它使用 AES-256 来对文章的内容进行加密，并且通过在文章中嵌入内联 JavaScript 代码来验证读者输入的密码是否正确。没有正确的文章密码，读者将无法看到文章的加密内容。

Python

它的实现原理是：

在 Hugo 构建阶段（本地构建时），使用 AES 算法对文章内容进行加密。
加密后的内容以密文形式存储在生成的静态 HTML 文件中。
用户访问页面时，前端 JavaScript 提示用户输入密码，输入密码后尝试解密内容。
如果密码正确，内容解密成功并显示；密码错误则无法解密，提示错误。

这种方式属于我们之前提到的客户端 AES 加密方案。

由于 Cloudflare Pages 是纯静态托管服务，hugo_encryptor 生成的内容也是纯静态的 HTML 和 JavaScript 文件，完全适合 Cloudflare Pages。而且 hugo_encryptor 不需要任何后端代码或动态服务，完全依靠客户端 JavaScript 解密，理论上是适合 Cloudflare Pages 这种静态托管环境的。

缺点也很明显：

密文内容仍然暴露在前端，理论上存在暴力破解的可能性（但 AES 算法本身安全性较高，暴力破解难度较大）。
密码管理和更改内容时需要重新加密，稍显麻烦。

主要是每次修改提交都要加密一次，实在是有点不胜其烦，于是不想用这个方法。

Workers 加密

所以，还有什么方法吗？那当然是~~继续薅赛博佛祖的羊毛啦！~~用万能的 Cloudflare Workers 啦！

新建一个 Workers，然后替换成以下代码：

  1// 内存中存储随机令牌与路径的映射关系
  2const tokenStore = new Map();
  3
  4async function handleRequest(request, env) {
  5  const url = new URL(request.url);
  6  const pathname = url.pathname;
  7
  8  // 强制 HTTPS 协议访问
  9  if (url.protocol !== "https:") {
 10    url.protocol = "https:";
 11    return Response.redirect(url.toString(), 301);
 12  }
 13
 14  // 配置受保护的文章
 15  const ARTICLES = {
 16    "/post/your-private-post/": { // 你要加密的文章URL
 17      password: env.PRIVATE_POST_PASSWORD, // 环境变量名称
 18      authType: "permanent", // 永久授权
 19    },
 20    "/post/your-secret-post/": { // 你要加密的文章URL
 21      password: env.SECRET_POST_PASSWORD, // 环境变量名称
 22      authType: "temporary", // 临时授权
 23    },
 24  };
 25
 26  const articleConfig = ARTICLES[pathname];
 27  if (!articleConfig) {
 28    return fetch(request); // 如果路径未配置保护，直接返回原始请求
 29  }
 30
 31  const { password: correctPassword, authType } = articleConfig;
 32
 33  // 检查 Cookie 中的随机令牌
 34  const cookie = request.headers.get("Cookie") || "";
 35  const cookies = Object.fromEntries(cookie.split("; ").map((c) => c.split("=")));
 36  const token = cookies[`auth_${pathname}`];
 37
 38  if (token && tokenStore.get(token) === pathname) {
 39    // 如果令牌有效，返回原始请求
 40    return fetch(request);
 41  }
 42
 43  // 如果是 POST 请求，验证密码
 44  if (request.method === "POST") {
 45    const formData = await request.formData();
 46    const enteredPassword = formData.get("password");
 47
 48    if (enteredPassword === correctPassword) {
 49      // 密码正确，生成随机令牌
 50      const randomToken = crypto.randomUUID();
 51      tokenStore.set(randomToken, pathname); // 将令牌与路径映射存储
 52
 53      // 设置 Cookie
 54      const headers = {
 55        Location: pathname,
 56      };
 57      if (authType === "permanent") {
 58        // 永久授权：Cookie 有效期 1 年
 59        headers["Set-Cookie"] = `auth_${pathname}=${randomToken}; Path=${pathname}; HttpOnly; Secure; SameSite=Lax; Max-Age=31536000`;
 60      } else if (authType === "temporary") {
 61        // 临时授权：Cookie 有效期 1 分钟
 62        headers["Set-Cookie"] = `auth_${pathname}=${randomToken}; Path=${pathname}; HttpOnly; Secure; SameSite=Lax; Max-Age=1`;
 63      }
 64
 65      return new Response(null, {
 66        status: 302,
 67        headers,
 68      });
 69    } else {
 70      // 密码错误，返回密码输入页面
 71      return new Response(passwordPage(pathname, true), {
 72        headers: { "Content-Type": "text/html;charset=UTF-8" },
 73      });
 74    }
 75  }
 76
 77  // 默认返回密码输入页面
 78  return new Response(passwordPage(pathname), {
 79    headers: { "Content-Type": "text/html;charset=UTF-8" },
 80  });
 81}
 82
 83function passwordPage(pathname, error = false) {
 84  return `
 85  <!DOCTYPE html>
 86  <html lang="zh">
 87  <head>
 88    <meta charset="UTF-8">
 89    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 90    <title>请输入密码</title>
 91    <style>
 92      body {
 93        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 94        background-image: url('your img url'); //你的验证页面背景图URL
 95        background-size: cover;
 96        background-position: center;
 97        background-repeat: no-repeat;
 98        display: flex;
 99        justify-content: center;
100        align-items: center;
101        height: 100vh;
102        margin: 0;
103        padding: 0;
104      }
105      body::before {
106        content: '';
107        position: fixed;
108        top: 0;
109        left: 0;
110        width: 100%;
111        height: 100%;
112        z-index: -1;
113        backdrop-filter: blur(2px);
114        background-color: rgba(255, 255, 255, 0.7);
115      }
116      .container {
117        background-color: rgba(255, 255, 255, 0.9);
118        padding: 30px;
119        border-radius: 10px;
120        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
121        text-align: center;
122        width: 90%;
123        max-width: 320px;
124        margin: 15px;
125      }
126      h3 {
127        margin-bottom: 20px;
128        color: #333;
129        font-size: 18px;
130      }
131      input[type="password"] {
132        width: 90%;
133        padding: 12px;
134        margin-bottom: 15px;
135        border-radius: 5px;
136        border: 1px solid #ccc;
137        font-size: 16px;
138      }
139      button {
140        padding: 12px 24px;
141        background-color: #4CAF50;
142        color: white;
143        border: none;
144        border-radius: 5px;
145        cursor: pointer;
146        font-size: 16px;
147        width: 100%;
148      }
149      button:hover {
150        background-color: #45a049;
151      }
152      .error {
153        color: red;
154        margin-bottom: 15px;
155        font-size: 14px;
156      }
157    </style>
158  </head>
159  <body>
160    <div class="container">
161      <h3>此文章受密码保护，请输入密码：</h3>
162      ${error ? "<p class='error'>密码错误，请重试！</p>" : ""}
163      <form method="POST">
164        <input type="password" name="password" required placeholder="请输入密码" />
165        <button type="submit">提交</button>
166      </form>
167    </div>
168  </body>
169  </html>
170  `;
171}
172
173export default {
174  async fetch(request, env) {
175    return handleRequest(request, env);
176  },
177};

实现原理

实现原理：

身份验证流程：

用户访问受保护的文章路径
系统检查用户是否有有效的认证令牌(Cookie)
如果没有有效令牌，显示密码输入页面
用户输入密码后提交，系统验证密码
密码验证成功后，生成随机令牌并设置对应的 Cookie
最后重定向用户到原始文章页面

令牌管理：

使用内存中的 Map(tokenStore) 存储令牌与路径的映射
支持两种授权类型：永久授权（Cookie 有效期1年）和临时授权（Cookie 有效期1分钟）

使用方法

部署好 Workers 后在 设置 -> 变量和机密 点击 添加

变量名称 一定要大写，对应的是 Workers 里的 PRIVATE_POST_PASSWORD 或者 SECRET_POST_PASSWORD（如 TEST），值就是你要加密文章所要设定的密码（如 password）。

变量名称一定要大写！变量名称一定要大写！变量名称一定要大写！

然后同样是在设置里，选择第一项 域和路由，添加 路由，区域 选你的主域名，路由填你要加密的文章路径，就完成咯！

举例与测试

以我测试的两篇文章为例：

首先创建了两篇测试文章，一篇用于永久验证的URL是 /post/cf-auth，另一篇用于单次验证的URL是 /post/cf-pwd。然后在 Workers 里修改参数：

 1// 配置受保护的文章
 2const ARTICLES = {
 3  "/post/cf-auth/": { // 你要加密的文章URL
 4    password: env.AUTH_PWD, // 环境变量名称
 5    authType: "permanent", // 永久授权
 6  },
 7  "/post/cf-pwd/": { // 你要加密的文章URL
 8    password: env.TEST_PWD, // 环境变量名称
 9    authType: "temporary", // 临时授权
10  },
11};

修改完部署后去配置环境变量：

添加路由

区域选择你的博客域名，我这里是 iftcblog.me。然后路由要填你要加密的文章路径，但是前面不要加 https://，也不要把后面的星号 * 忘了。

前面不要加 https://！记得后面要加上星号 *！

然后访问永久验证文章与短暂验证文章，就搞定啦！（密码已经写在上面了哦）

小结

当然还是有潜在的安全问题，如 CSRF 保护和适当的令牌存储机制等等。但是我又不是专业的，感觉做到这个程度已经差不太多了。顺便贴一篇查到的关于 cookies 的文章：Cookie 的 SameSite 属性 | 阮一峰的网络日志
至于页面的美化么，我又完全不懂前端。不想折腾了，先这么将就着吧，等日后有好的想法再说。

Hugo-stackの美化 II

Sun, 30 Mar 2025 15:12:25 +0800

移动端显示目录

找了很多别人的代码，发现在移动端都是显示不了。收到大佬的启发，我觉得有可能是移动端在垂直排布时会把右边栏隐藏掉，所以找到 assets/scss/partials/sidebar.scss 找到第73行 display: none; ，把它注释掉：

 1.right-sidebar {
 2    width: 100%;
 3    display: none;
 4    flex-direction: column;
 5    gap: var(--widget-separation);
 6
 7    &.sticky {
 8        top: 0;
 9    }
10
11    @include respond(lg) {
12        padding-top: var(--main-top-padding);
13        padding-bottom: var(--main-top-padding);
14    }
15}

然后修改 layouts/partials/widget/toc.html 为：

  1{{ if (.Context.Scratch.Get "TOCEnabled") }}
  2    <!-- TOC Toggle Button (visible on small screens) -->
  3    <button id="toc-toggle" class="toc-toggle-button" aria-label="Toggle Table of Contents">
  4        {{ partial "helper/icon" "hash" }}
  5    </button>
  6
  7    <section class="widget archives" id="toc-container">
  8        <div class="widget-icon">
  9            {{ partial "helper/icon" "hash" }}
 10        </div>
 11        <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
 12        
 13        <div class="widget--toc">
 14            {{ .Context.TableOfContents }}
 15        </div>
 16    </section>
 17
 18    <style>
 19        /* TOC responsive styles */
 20        @media screen and (max-width: 768px) {
 21            #toc-container {
 22                position: fixed;
 23                top: 0;
 24                left: -300px; /* Hide off-screen by default */
 25                width: 280px;
 26                height: 100vh;
 27                background: linear-gradient(
 28                    to bottom, 
 29                    rgba(82, 37, 70, 0.9), 
 30                    rgba(136, 48, 78, 0.85)
 31                );
 32                box-shadow: 2px 0 8px rgba(94, 95, 92, 0.943);
 33                z-index: 1000;
 34                overflow-y: auto;
 35                transition: left 0.6s ease;
 36                padding: 20px;
 37            }
 38
 39            #toc-container.show {
 40                left: 0; /* Show when class is added */
 41            }
 42
 43            .toc-toggle-button {
 44                position: fixed;
 45                right: 10px;
 46                top: 50%;
 47                transform: translateY(-50%);
 48                z-index: 999;
 49                width: 40px;
 50                height: 40px;
 51                border-radius: 50%;
 52                background: rgba(226, 235, 61, 0.943);
 53                border: 1px solid rgba(226, 235, 61, 0.943);
 54                display: flex;
 55                align-items: center;
 56                justify-content: center;
 57                cursor: pointer;
 58                box-shadow: 0 2px 5px #e84242e4;
 59            }
 60
 61            body.toc-open {
 62                overflow: hidden; /* Prevent scrolling when TOC is open */
 63            }
 64        }
 65
 66        @media screen and (min-width: 769px) {
 67            .toc-toggle-button {
 68                display: none; /* Hide button on larger screens */
 69            }
 70        }
 71    </style>
 72
 73    <script>
 74        document.addEventListener('DOMContentLoaded', function() {
 75            const tocToggle = document.getElementById('toc-toggle');
 76            const tocContainer = document.getElementById('toc-container');
 77            const body = document.body;
 78
 79            tocToggle.addEventListener('click', function() {
 80                tocContainer.classList.toggle('show');
 81                body.classList.toggle('toc-open');
 82            });
 83
 84            // Close TOC when clicking outside of it
 85            document.addEventListener('click', function(e) {
 86                if (window.innerWidth <= 768) {
 87                    const isClickInsideTOC = tocContainer.contains(e.target);
 88                    const isClickOnButton = tocToggle.contains(e.target);
 89                    
 90                    if (!isClickInsideTOC && !isClickOnButton && tocContainer.classList.contains('show')) {
 91                        tocContainer.classList.remove('show');
 92                        body.classList.remove('toc-open');
 93                    }
 94                }
 95            });
 96            
 97            // Add this: Close TOC when clicking on any link inside the TOC
 98            tocContainer.querySelectorAll('a').forEach(link => {
 99                link.addEventListener('click', function() {
100                    if (window.innerWidth <= 768) {
101                        tocContainer.classList.remove('show');
102                        body.classList.remove('toc-open');
103                    }
104                });
105            });
106        });
107    </script>
108{{ end }}

这样就能在左边显示目录的按钮啦！但是由于上面的方法是简单粗暴的取消右边栏的隐藏，所以就算是在主页往下滑也能看见搜索、归档、标签和分类栏，我是觉得这样还不错，就不折腾了（其实是懒得改）。

多语言文字字体修改

参考大佬的教程去Google fonts上找了一下，发现简中的都是抽象得不能再抽象的字体。然后转头去找繁体的字体，发现虽然同样只有8种字体，但这不比简中的好看多了？

然后我惊奇的发现，我用的 LXGW WenKai TC 字体是能支持简中的。好你个谷歌做的什么**玩意（骂骂咧咧）
比如我选择 LXGW WenKai TC 这个字体，点击右上角的Get font

然后点击左侧的Get embed code

复制右边的代码，把原先 layouts/partials/footer/components/custom-font.html 里的内容全部注释掉，贴进去

如果想选多种字体，就按相同的步骤在 family= 后面跟上你想用的字体名称。
我修改后的 custom-font.html 内容如下：

 1<!-- <script>
 2    (function () {
 3        const customFont = document.createElement('link');
 4        customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";
 5
 6        customFont.type = "text/css";
 7        customFont.rel = "stylesheet";
 8
 9        document.head.appendChild(customFont);
10    }());
11</script> -->
12
13<link rel="preconnect" href="https://fonts.googleapis.com">
14<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15<link href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&family=Gowun+Batang&family=Noto+Serif+SC:wght@300&family=Noto+Serif+TC:wght@300&display=swap" rel="stylesheet">

然后我又发现了一个问题：多语言要怎么设置呢？网上找了一圈也没找着答案，凭我三脚猫的功夫看文档也搞不定这个问题啊。在我抓耳挠腮几近放弃的时候，突然想起了近几年最伟大的发明————AI！于是去问了Claude3.7，终于解决了（不愧是代码届的神）。大佬的老方法是在 custom.scss 最后加入：

1body, .article-content {
2    // font-family: 'Long Cang', cursive;
3    // font-family: 'Ma Shan Zheng', cursive;
4    // font-family: 'Noto Sans SC', sans-serif;
5    font-family: 'Noto Serif SC', serif;
6    // font-family: 'Zhi Mang Xing', cursive;
7}

但是我韩语的字体还是默认的。按照Claude3.7的回答，只需要在 custom.scss 最后加入：

1/* 为中英韩文内容设置字体 */
2:lang(en), 
3:lang(zh-cn), 
4:lang(ko),
5:lang(zh-hk) {
6  font-family: "LXGW WenKai TC", "Gowun Batang", serif;
7}

这样简中、繁中都是 LXGW WenKai TC 字体，韩语都是 Gowun Batang 字体啦！
英语是 LXGW WenKai TC 附带的字体，我觉得还不错就不改了。
我还添加了第二字体，比如说韩语界面如果有中文的话就不会回退到默认的中文字体，而是用 LXGW WenKai TC 字体。
至于韩语界面，我发现如果把 Gowun Batang 放前面 LXGW WenKai TC 放后面的话，那英文字体就会用 Gowun Batang 的，跟后者相比感觉略逊一筹。所以直接把 LXGW WenKai TC 放在最前面，然后四种语言合并在一起就好了。

但是好像有个问题，因为是谷歌CDN fonts.googleapis.com 的字体，第一次加载会有点慢（有时候不止第一次）。暂时把 fonts.googleapis.com 改成 fonts.googleapis.cn ，其实好像也没差多少，索性不管了，反正也不至于特别慢吧~~。

碎碎念页面

成果展示

前置准备

可以用 Artitalk.js 来完成一个碎碎念的页面。

在 hugo.yaml 中找到 homepage，在下方添加 - type: artitalk 。
在 content/page 文件夹下新建 artitalk 文件夹，其中新建 index.md。
前往 LeanCloud 国际版，注册账号。
注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
绑定完成之后点击创建应用，应用名称随意。

接着在 结构化数据 中创建 class，命名为 shuoshuo。

在你新建的应用中找到 结构化数据 下的 用户 。点击 添加用户 ，输入想用的用户名及密码。

回到 结构化数据 中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限 中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。

然后再新建一个名为 atComment 的class，权限什么的使用默认的即可。
点击 _User，添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url。这一项如果不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。

在最菜单栏中找到设置 -> 应用 keys，记下来 AppID 和 AppKey ，一会会用。

最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。

踩坑记录

~~由于 LeanCloud 的域名疑似被墙了，最好在 cloudflare 中创建 workers 进行部署。在 workers 中填入以下代码：~~

 1//此脚本由MHuiG - MiniValine写成，ChenYFan将其做少量修改制成，此脚本仅适用于Artitalk
 2
 3async function handleRequest(event) {
 4  AppId = (function () { try { return APPID } catch (e) { return "" } })()
 5  AppKey = (function () { try { return APPKEY } catch (e) { return "" } })()
 6  if (AppId == "" || AppKey == "") { return new Response('Artitalk-Safe异常：您没有设定appid和appkey') }
 7  ServerDomain = (function () { try { return SERVERDOMAIN } catch (e) { return `${(AppId.substr(0, 8)).toLowerCase()}.api.lncldglobal.com` } })()
 8  atComment = (function () { try { return ATCOMMENT == "true" ? true : false } catch (e) { return true } })()
 9  CORS = (function () { try { return CORS } catch (e) { return '*' } })()
10  const request = event.request
11  const url = new URL(request.url)
12  const urlObj = new URL(url)
13  const path = urlObj.href.substr(urlObj.origin.length)
14  const classac = l(rp(path).split('/'))
15  if (classac == "atComment" && !atComment) { return new Response('{"code":101,"error":"Artitalk-Safe：评论功能未开启"}', { headers: { "content-type": "application/json;charset=utf-8" } }) }
16  if (classac == "_File" || classac == "_Followee" || classac == "_Follower" || classac == "_Installation" || classac == "_Role") { return new Response('{"code":101,"error":"Artitalk-Safe：操作是禁止的"}', { headers: { "content-type": "application/json;charset=utf-8" } }) }
17
18  url.hostname = ServerDomain
19  reqHEDNew = new Headers(request.headers)
20  if (reqHEDNew.get("X-LC-Id")) {
21    reqHEDNew.set("X-LC-Id", AppId)
22    reqHEDNew.set("X-LC-Key", AppKey)
23  }
24  if (reqHEDNew.get("x-lc-sign")) {
25    reqHEDNew.delete("X-LC-Sign")
26  }
27  reqNew = new Request(request, { headers: reqHEDNew })
28  responsefetch = await fetch(url.toString(), reqNew)
29  resHEDNew = new Headers(responsefetch.headers)
30  resHEDNew.set("Access-Control-Allow-Origin", CORS)
31  response = new Response(responsefetch.body, { headers: resHEDNew })
32  return response
33}
34function rp(p) {
35  return p.split("?")[0]
36}
37function l(p) {
38  return p[getJsonLength(p) - 1]
39}
40
41
42function getJsonLength(jsonData) {
43
44  var jsonLength = 0;
45
46  for (var item in jsonData) {
47
48    jsonLength++;
49
50  }
51
52  return jsonLength;
53}
54addEventListener("fetch", event => {
55  event.respondWith(handleRequest(event))
56})

~~设置两个变量 APPID 和 APPKEY~~

~~变量名务必大写！！！~~

~~最后在 layouts/_default/ 下新增 artitalk.html , 并修改样式如下。~~

~~注意，用 cloudflare workers 是 Artitalk.js 推荐的 Artitalk_SafeMode~~（貌似无法正常使用），通过中间件的方式，在中间件替换 APPID 和 APPKEY 保护两者，避免两者暴露被刷。因此你可以在前端随意伪造 APPID 和 APPKEY ，然后将 serverurl 修改为中间件网址即可。

 1{{ define "main" }}
 2    <!-- 引用 artitalk -->
 3    <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
 4    <!-- 存放说说的容器 -->
 5    <div id="artitalk_main"></div>
 6    <script>
 7        new Artitalk({
 8            appId: '', // 随便填
 9            appKey: '', // 随便填
10            pageSize: 15, // 每页说说数量
11            color3: "var(--card-text-color-main)", // 文字颜色
12            color1: "var(--card-background)", // 背景颜色1
13            color2: "var(--card-background)", // 背景颜色2
14            serverURL: "", // 你的cloudflare worker域名，可以绑定自己的域名
15        })
16    </script>
17{{ end }}

最后配置

但是发现用cf workers还是会被墙，无法正常使用。只能绕个弯路，给应用绑定一个api域名：点击设置 -> 域名绑定 -> 绑定新域名

然后去cloudflare的对应域名添加上这个 CNAME 记录就可以了。

注意，不要开启小黄云！！！

添加 CNAME 记录之后它会自动帮你申请证书，等待大概几分钟之后显示“已绑定”，就大功告成啦！

最后在 layouts/_default/ 下新增 artitalk.html , 并修改样式如下。

 1{{ define "main" }}
 2    <!-- 引用 artitalk -->
 3    <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
 4    <!-- 存放说说的容器 -->
 5    <div id="artitalk_main"></div>
 6    <script>
 7        new Artitalk({
 8            appId: '', // your appId
 9            appKey: '', // your appKey
10            pageSize: 15, // 每页说说数量
11            color3: "var(--card-text-color-main)", // 文字颜色
12            color1: "var(--card-background)", // 背景颜色1
13            color2: "var(--card-background)", // 背景颜色2
14            serverURL: "", // 上面绑定的api域名
15        })
16    </script>
17{{ end }}

然后我发现这个碎碎念页面加载有时候很慢，感觉还是js的问题。跟热力图的方案一样，把js下载下来放到 static/js 文件夹里，然后把 artitalk.html 里第二行改成：

1<script type="text/javascript" src="/js/artitalk.js"></script>

最后我发现星屑右下角的发布按钮会被我的返回顶部按钮与聊天气泡重叠，并且暗黑模式下预览框的文字是黑色的看不见，于是在 assets/scss/custom.scss 里稍微修改了一下：

 1#artitalk_main .artitalk_child {
 2    margin-right: 15%;
 3}
 4
 5#artitalk_main .power {
 6  margin-right: 15%;
 7  margin-bottom: 2%;
 8}
 9
10[data-scheme="dark"] {
11  #artitalk_main #preview {
12    color: #FFF;
13  }
14}

右侧导航栏动画

参考链接，在 assets/scss/custom.scss 中加入以下代码：

 1/*------------------右侧导航栏--------------*/
 2// 搜索菜单动画
 3.search-form.widget {
 4  transition: transform 0.6s ease;
 5}
 6
 7.search-form.widget:hover {
 8  transform: scale(1.1, 1.1);
 9}
10
11
12//归档小图标放大动画
13.widget.archives .widget-archive--list {
14  transition: transform .3s ease;
15}
16
17.widget.archives .widget-archive--list:hover {
18  transform: scale(1.05, 1.05);
19}
20
21
22//右侧标签放大动画
23.tagCloud .tagCloud-tags a {
24  border-radius: 10px;
25  font-size: 1.4rem;
26  transition: transform .3s ease;
27}
28
29.tagCloud .tagCloud-tags a:hover {
30  transform: scale(1.1, 1.1);
31}

自定义鼠标指针样式

参考了大佬的博客：hugo stack 主题美化 2 - yelleis的博客

Custom Cursor选个喜欢的样式，截图（正方形）；
remove.bg或 RemovePhotos 改成透明底；
在线图片压缩工具尺寸压缩到 50x50；
上传到图床，复制链接到 url('') 内即可。

增添到 assets/scss/custom.scss：

 1body {
 2  cursor: url(/img/pointer.png), auto;
 3}
 4
 5a:hover{
 6  cursor:url('/img/link.png'), pointer !important;
 7} //指向链接时的鼠标样式
 8
 9button:hover {
10  cursor: url('/img/text.png'), pointer !important;
11} //代码复制按钮
12
13input:hover {
14  cursor: url('/img/text.png'), text !important;
15} //评论框(好像没有用欸)

添加背景图片

参考链接，在 assets/scss/custom.scss 修改了一下字体颜色，然后加了个背景图：

 1:root {
 2  --accent-color: #255F38;
 3  --accent-color-darker: #FE4F2D;
 4  --accent-color-text: #FFF;
 5  --body-text-color: #4F1C51;
 6}
 7
 8:root {
 9  --card-background-selected: #EBEBEB;
10  --card-text-color-tertiary: #888B8D;
11}
12
13// 浅色模式背景图片设置
14[data-scheme="light"] body {
15  position: relative;
16  background-image: url('/img/bj.jpg'); // 替换为你的图片路径
17  background-attachment: fixed;
18  background-size: cover;
19  background-position: center;
20}
21
22// 添加遮罩层
23[data-scheme="light"] body::before {
24  content: '';
25  position: fixed;
26  top: 0;
27  left: 0;
28  width: 100%;
29  height: 100%;
30  z-index: -1;
31  backdrop-filter: blur(2px); // 可选：添加模糊效果
32  // 浅色模式遮罩（较浅）
33  background-color: rgba(255, 255, 255, 0.7);
34}

把滚动条换成进度条

弄了背景之后滚动条的背景块会跟随着主题的颜色走，找了很久也没找到解决办法。突然找到Hugo：阅读进度条，那我把滚动条隐藏起来换成进度条不就好了吗？把 assets/scss/custom.scss 里面滚动条的 display 属性改成 none。

1.menu::-webkit-scrollbar {
2  display: display;
3  display: none;
4}

如果在所有页面上都实现这个效果，可以将html代码插入到 layouts\_default\baseof.html 并引用css和js文件，若是只想在文章页面实现，可以插入到 layouts\_default\single.html。

1<progress id="content_progress" value="0"></progress>
2<link rel="stylesheet" href="/css/progress.css">
3<script src="/js/progress.js"></script>

然后新建 static\css\progress.css：

 1#content_progress {
 2    /* Positioning */
 3    position: fixed;
 4    left: 0;
 5    bottom: 0;
 6    z-index: 1000;
 7    width: 100%;
 8    height: 6px;
 9    -webkit-appearance: none;
10    -moz-appearance: none;
11    appearance: none;
12    border: none;
13    background-color: transparent;
14    color: #3F7D58;
15}
16
17#content_progress::-webkit-progress-bar {
18    background-color: transparent;
19}
20
21#content_progress::-webkit-progress-value {
22    background-color: #5F99AE;
23}
24
25#content_progress::-moz-progress-bar {
26    background-color: #5F99AE;
27}

新建 static\js\progress.js:

 1document.addEventListener('DOMContentLoaded', function () {
 2      var winHeight = window.innerHeight,
 3            docHeight = document.documentElement.scrollHeight,
 4            progressBar = document.querySelector('#content_progress');
 5      progressBar.max = docHeight - winHeight;
 6      progressBar.value = window.scrollY;
 7
 8      document.addEventListener('scroll', function () {
 9            progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
10            progressBar.value = window.scrollY;
11      });
12});

但仅仅这么配置的话代码块也没有滚动条了，于是在 .highlight 部分加上滚动条配置。

1.highlight {
2  ::-webkit-scrollbar {
3    display: flex;
4  }
5}

主页添加樱花特效

之前弄的樱花特效，感觉用来配我新的主页背景挺合适的。但是我又觉得这个特效有点眼花缭乱，最后决定只让它在浅色模式下生效。打开 layouts/partials/footer/custom.html 在最后加上：

  1{{ if or .IsHome (eq .Layout "archives") (eq .Type "page") }}
  2<script>
  3(function() {
  4    // 检测当前是否为深色模式
  5    function isDarkTheme() {
  6        const savedTheme = localStorage.getItem('StackColorScheme');
  7        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  8        const htmlHasDarkClass = document.documentElement.classList.contains('dark');
  9
 10        return savedTheme === 'dark' || htmlHasDarkClass || 
 11               (savedTheme !== 'light' && prefersDark);
 12    }
 13
 14    // 完全清理樱花特效
 15    function cleanupSakuraEffect() {
 16        // 移除所有可能的樱花元素（多种可能的类名）
 17        ['sakura', 'ukiis-sakura'].forEach(className => {
 18            document.querySelectorAll('.' + className).forEach(el => el.remove());
 19        });
 20        
 21        // 查找并移除可能的动画容器
 22        document.querySelectorAll('canvas[style*="position: fixed"]').forEach(el => el.remove());
 23        
 24        // 停止可能存在的动画循环
 25        if (window.requestAnimationFrame && window.cancelAnimationFrame) {
 26            if (window.sakuraRequestId) {
 27                window.cancelAnimationFrame(window.sakuraRequestId);
 28                window.sakuraRequestId = null;
 29            }
 30        }
 31        
 32        console.log('Sakura elements completely cleaned up');
 33    }
 34
 35    // 管理樱花特效的加载与移除
 36    function manageSakuraEffect() {
 37        const isDark = isDarkTheme();
 38        const existingScript = document.querySelector('script[src*="UkennWeb"]');
 39
 40        if (!isDark) {
 41            // 浅色模式：如果未加载则加载特效
 42            if (!existingScript) {
 43                const script = document.createElement('script');
 44                script.type = 'text/javascript';
 45                script.src = 'https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@3.0/index/web.js';
 46                document.body.appendChild(script);
 47                console.log('Sakura effect added for light theme');
 48            }
 49        } else {
 50            // 深色模式：先清理特效，再移除脚本
 51            cleanupSakuraEffect();
 52            
 53            // 移除脚本
 54            if (existingScript) {
 55                existingScript.remove();
 56                console.log('Sakura script removed for dark theme');
 57            }
 58            
 59            // 查找并移除其他可能的相关脚本
 60            document.querySelectorAll('script[src*="sakura"]').forEach(el => el.remove());
 61        }
 62    }
 63
 64    // 初始加载时执行一次
 65    manageSakuraEffect();
 66
 67    // 监听localStorage变化（覆盖setItem方法）
 68    const originalSetItem = localStorage.setItem;
 69    localStorage.setItem = function(key, value) {
 70        originalSetItem.apply(this, arguments);
 71        if (key === 'StackColorScheme') {
 72            setTimeout(manageSakuraEffect, 100); // 添加短暂延迟确保DOM更新
 73        }
 74    };
 75
 76    // 精确监听html元素的class变化
 77    const observer = new MutationObserver((mutations) => {
 78        mutations.forEach((mutation) => {
 79            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
 80                setTimeout(manageSakuraEffect, 100); // 添加短暂延迟确保DOM更新
 81            }
 82        });
 83    });
 84
 85    observer.observe(document.documentElement, {
 86        attributes: true,
 87        attributeFilter: ['class']
 88    });
 89
 90    // 监听主题切换按钮点击事件
 91    document.addEventListener('click', (e) => {
 92        if (e.target.closest('.color-scheme-toggle')) {
 93            setTimeout(manageSakuraEffect, 300); // 延长延迟时间以确保主题切换完成
 94        }
 95    });
 96
 97    // 监听系统深色模式变化
 98    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
 99        setTimeout(manageSakuraEffect, 100);
100    });
101    
102    // 额外添加一个全局清理方法，以便在需要时手动调用
103    window.cleanupSakuraEffect = cleanupSakuraEffect;
104})();
105</script>
106{{ end }}

文章生成日历

新建文件 layouts/page/calendar.html ，加入以下代码：

  1{{ define "main" }}
  2
  3<style>
  4    #calendar {
  5        /* max-width: 1200px; */
  6        width: 90%; /* 使其占满可用空间 */
  7        margin: 50px auto;
  8        padding: 0 10px;
  9        border-radius: 8px;
 10        box-shadow: 0 2px 10px rgba(241, 62, 232, 0.9);
 11    }
 12
 13    /* 新增：按钮颜色自定义 */
 14    .fc-button-primary {
 15        background-color: #c511cb !important; /* 紫色 */
 16        border-color: #c511cbd7 !important;
 17    }
 18    .fc-button-primary:hover {
 19        background-color: #f476ffe0 !important; /* 深紫色 */
 20    }
 21
 22    .fc-toolbar-title {
 23        font-size: 1.3em;
 24        font-weight: bold;
 25    }
 26
 27    .fc-event {
 28        font-size: 0.8em;
 29        border-radius: 4px;
 30        padding: 2px;
 31    }
 32
 33    .fc-header-toolbar {
 34        padding: 10px 0;
 35    }
 36
 37    .fc-button {
 38        background-color: #f6ff00e3;
 39        border: none;
 40        border-radius: 4px;
 41        color: white;
 42        padding: 5px 10px;
 43        font-size: 0.9em;
 44        cursor: pointer;
 45    }
 46
 47    .fc-button:hover {
 48        background-color: #0056b3;
 49    }
 50
 51    .fc-button:disabled {
 52        background-color: #e0e0e0;
 53        color: #757575;
 54    }
 55
 56    .fc-toolbar-title {
 57        color: rgba(241, 62, 232, 0.9);
 58    }
 59
 60    .event-tooltip {
 61        position: absolute;
 62        z-index: 10001;
 63        background-color:rgba(234, 255, 0, 0.600);
 64        border: 1px solid #ccc;
 65        padding: 8px;
 66        border-radius: 4px;
 67        box-shadow: 0 2px 10px rgba(207, 50, 50, 0.1);
 68        font-size: 0.9em;
 69    }
 70
 71    /* 修复按钮间距问题 */
 72    .fc-button-group {
 73        gap: 4px; /* 增加按钮间的间隙 */
 74    }
 75    
 76    /* 响应式调整 */
 77    @media (max-width: 768px) {
 78        #calendar {
 79            width: 95%;
 80            margin: 20px auto;
 81        }
 82        .fc-toolbar-title {
 83            font-size: 1em;
 84        }
 85        .fc-button {
 86            padding: 3px 6px;
 87            font-size: 0.8em;
 88        }
 89    }
 90
 91    @media (max-width: 480px) {
 92        #calendar {
 93            width: 100%;
 94            padding: 0 5px;
 95        }
 96        .fc-header-toolbar {
 97            flex-direction: column;
 98            align-items: center;
 99        }
100        .fc-toolbar-chunk {
101            margin-bottom: 5px;
102        }
103    }
104
105    @media (min-width: 1200px) {
106        #calendar {
107            max-width: 1100px;
108        }
109    }
110
111    
112</style>
113
114<div id='calendar'></div>
115<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
116
117<script>
118    document.addEventListener('DOMContentLoaded', function () {
119        const calendarEl = document.getElementById('calendar');
120        const calendar = new FullCalendar.Calendar(calendarEl, {
121            initialView: 'dayGridMonth', // 預設檢視模式
122            locale: "zh-cn",   // 預設語言
123            contentHeight: 600,
124            headerToolbar: { // 工具列
125                left: 'prevYear,prev',
126                center: 'title',
127                right: 'today,next,nextYear'
128            },
129            buttonText: {  // 自訂翻譯
130                today: '今天',
131                month: '月',
132            },
133            events: [
134                {{ range .Site.RegularPages }} // 讀取所有已發表的文章，變成JSON陣列
135            {
136                title: '{{ .Title }}',
137                start: '{{ .Date.Format "2006-01-02" }}',
138                url: '{{ .RelPermalink }}'
139            },
140            {{ end }}
141        ],
142        eventMouseEnter: function (info) { // 加入滑鼠懸浮就顯示完整標題的功能
143            const tooltip = document.createElement('div');
144            tooltip.className = 'event-tooltip';
145            tooltip.innerHTML = `<strong>${info.event.title}</strong>`;
146            document.body.appendChild(tooltip);
147
148            tooltip.style.left = info.jsEvent.pageX + 'px';
149            tooltip.style.top = info.jsEvent.pageY + 'px';
150
151            info.el.addEventListener('mouseleave', function () {
152                tooltip.remove();
153            });
154        }
155    });
156    calendar.render();
157});
158</script>
159
160{{ end }}

在 content/page 下新建 calendar.md ，填入：

1---
2title: 日历
3layout: "calendar"
4menu:
5    main: 
6        weight: 12
7        params:
8            icon: calendar
9---

icon 的话，可以去这里找到你喜欢的svg，新建一个 assets/icons/calendar.svg 粘贴进去就行。

然后就能在侧边栏加入日历，查看你写过的所有文章啦！

不过这个与热力图的功能有点重叠，而且统计的文章不分语言。~~（也好，可以用一些水文章撑一下场面）~~

左边栏网站副标题换行

找到 layouts/partials/sidebar/left.html，修改第36行：

1<div class="site-meta">
2    <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
3    <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
4    <h2 class="site-description">{{ .Site.Params.sidebar.subtitle | safeHTML }}</h2>
5</div>

然后在 hugo.yaml 中在要换行的地方加上 <br>：

1languages:
2    zh-cn:
3        params:
4            sidebar:
5                subtitle: "鸳鸯帐里暖芙蓉<br>此生何处不相逢"

就可以把诗当网站的简介啦！

右侧分类条优化

调整分类的样式并在首页显示分类的条目数量，然后给每个分类增加对应的颜色条。参考链接，把 layouts/partials/widget/categories.html 第11和12行改成：

1{{ range first $limit $context.Site.Taxonomies.categories.ByCount }}
2    <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
3        {{ .Page.Title }}
4    <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}" style="border-left: 6px solid {{ .Page.Params.style.background }}; filter:saturate(1.7);">
5        {{ .Page.Title }}<span class="category-count count-muted"> {{ .Count }}</span>
6    </a>
7{{ end }}

然后在 assets/scss/custom.scss 后面加上：

1.count-muted {
2  color: #b7bec5;  /* 常见灰色值，可根据需要调整 */
3  opacity: 0.8;    /* 可选：如果需要进一步淡化 */
4}

最后在每个分类的 _index.md 添加以下参数：

1---
2style:
3    background: "#d09daa"
4    color: "#fff"
5---

好看的配色可以去Color Hunt找找灵感，需要微调的话可以参考Color Hex。

最底下的标签云也可以照猫画虎，不过我觉得没必要给标签左侧也加上颜色条，还要找配色。所以只在后面加上统计数就算了，修改 layouts/partials/widget/tag-cloud.html：

1<a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
2    {{ .Page.Title }}
3    {{ .Page.Title }}  <span class="category-count count-muted"> {{ .Count }}</span>
4</a>

设置不能被搜索到的文章

找到 /layouts/page/search.json，把第三行换成这两行代码：

1{{- $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections -}}
2{{- $notHidden := where .Site.RegularPages "Params.hidden" "!=" true -}}
3{{- $filtered := ($pages | intersect $notHidden) -}}
4{{- $searchable := where .Site.RegularPages "Params.nosearch" "!=" true -}}
5{{- $filtered := ($pages | intersect $notHidden | intersect $searchable) -}}

然后在你想要不被搜索到的文章头部加上这个参数就可以啦。

1nosearch: true

添加标签墙

参考Hugo stack 主题美化 - 修改标签页页面 | Laphel，新建 layouts/tags/terms.html 填入：

 1{{ define "main" }}
 2  <h1 class="tags-title">📖 Tags</h1>
 3  <p class="tags-subtitle">{{ len .Data.Terms }} Tags To Explore</p>
 4  <div class="tag-cloud">
 5    {{ range shuffle .Data.Terms.Alphabetical }}
 6      <a href="{{ .Page.RelPermalink }}" class="tag" style="font-size: {{ add 12 (mul .Count 2) }}px;">
 7        {{ .Page.Title }} ({{ .Count }})
 8      </a>
 9    {{ end }}
10  </div>
11{{ end }}

assets/scss/custom.scss 添加样式：

 1// Tags 页面样式
 2.tags-title {
 3  text-align: center;
 4  font-size: 2em;
 5  color: #b213b5;
 6}
 7.tags-subtitle {
 8  text-align: center;
 9  margin-top: -30px;
10  font-weight: bold;
11  color: #336D82;
12}
13.tag-cloud {
14  text-align: center;
15  display: flex;
16  flex-wrap: wrap;
17  justify-content: center;
18  align-items: center; /* 上下居中 */
19  min-height: 50vh; /* 可以根据需要调整高度 */
20  padding: 20px 0;
21}
22
23.tag {
24  display: inline-block;
25  margin: 8px;
26  text-decoration: none;
27  padding: 5px 10px 5px 16px; /* 左侧留出更多空间给标签形状 */
28  border-radius: 5px;
29  transition: all 0.3s ease-in-out;
30  background-color: #693382;
31  color: #F5ECE0;
32  position: relative; /* 为伪元素定位 */
33  border-left: none; /* 移除左边框 */
34}
35
36/* 创建标签上的小圆点 */
37.tag:after {
38  content: "";
39  position: absolute;
40  top: 50%;
41  left: 6px;
42  width: 4px;
43  height: 4px;
44  border-radius: 80%;
45  background-color: #EFEFEF;
46  transform: translateY(-50%);
47}
48
49.tag:hover {
50  color: #fff;
51  background-color: #3498db;
52  transform: scale(1.1); /* 悬停时稍微放大 */
53}
54
55/* 悬停时也改变标签形状的颜色 */
56.tag:hover:before {
57  border-color: transparent #3498db transparent transparent;
58}

时光胶囊

参考Hugo：增加年月日时间进度条，我稍加改动改成了短代码。新建 layout/shortcodes/timing.html：

  1{{/* Responsive Progress Bars Shortcode */}}
  2{{ $barColor := .Get "barColor" | default "#9188f199" }}
  3{{ $bgColor := .Get "bgColor" | default "#f8f8f883" }}
  4{{ $maxWidth := .Get "maxWidth" | default "100%" }}
  5
  6<div class="progress-container">
  7    <div class="progress-item">
  8        <div class="label-container">
  9            <span class="progress-label">Day</span>
 10        </div>
 11        <div class="progress-wrapper">
 12            <div class="progress">
 13                <div class="progress-bar" id="todayProgress" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
 14            </div>
 15            <span class="remaining-time" id="dayRemaining"></span>
 16        </div>
 17    </div>
 18    <div class="progress-item">
 19        <div class="label-container">
 20            <span class="progress-label">Month</span>
 21        </div>
 22        <div class="progress-wrapper">
 23            <div class="progress">
 24                <div class="progress-bar" id="monthProgress" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
 25            </div>
 26            <span class="remaining-time" id="monthRemaining"></span>
 27        </div>
 28    </div>
 29    <div class="progress-item">
 30        <div class="label-container">
 31            <span class="progress-label">Year</span>
 32        </div>
 33        <div class="progress-wrapper">
 34            <div class="progress">
 35                <div class="progress-bar" id="yearProgress" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
 36            </div>
 37            <span class="remaining-time" id="yearRemaining"></span>
 38        </div>
 39    </div>
 40</div>
 41
 42<style>
 43.progress-container {
 44    width: 100%;
 45    max-width: {{ $maxWidth }};
 46    margin: 0 auto;
 47}
 48.progress-container .progress-item {
 49    margin-bottom: 10px;
 50    display: flex;
 51    width: 100%;
 52}
 53.progress-container .label-container {
 54    min-width: 70px;
 55    flex-shrink: 0;
 56    text-align: right;
 57}
 58.progress-container .progress-wrapper {
 59    flex-grow: 1;
 60    display: flex;
 61    align-items: center;
 62}
 63.progress-container .progress-label {
 64    margin-right: 10px;
 65}
 66.progress-container .progress {
 67    height: 20px;
 68    flex-grow: 1;
 69    margin-bottom: 0px;
 70    overflow: hidden;
 71    background-color: {{ $bgColor }};
 72    border-radius: 4px;
 73    -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
 74    box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
 75}
 76.progress-container .progress-bar {
 77    float: left;
 78    width: 0;
 79    height: 100%;
 80    font-size: 12px;
 81    line-height: 20px;
 82    color: #fff;
 83    text-align: center;
 84    background-color: {{ $barColor }};
 85    -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
 86    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
 87    -webkit-transition: width .6s ease;
 88    -o-transition: width .6s ease;
 89    transition: width .6s ease;
 90}
 91.progress-container .remaining-time {
 92    margin-left: 10px;
 93    margin-right: 10px;
 94    font-size: 12px;
 95    white-space: nowrap;
 96    width: 80px;
 97    text-align: left;
 98    font-size: 90%;
 99}
100
101</style>
102
103{{ $js := `
104function updateProgress(progressId, newValue, remainingId, remainingValue, unit) {
105    document.getElementById(progressId).style.width = newValue + '%';
106    document.getElementById(progressId).setAttribute('aria-valuenow', newValue);
107    document.getElementById(progressId).textContent = newValue + '%';
108    document.getElementById(remainingId).textContent = '剩余' + remainingValue + unit;
109}
110
111document.addEventListener('DOMContentLoaded', function() {
112    const now = new Date();
113
114    // Calculate elapsed time for the day
115    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
116    const elapsedTime = now - startOfDay;
117    const dayPercentage = Math.round((elapsedTime / (1000 * 60 * 60 * 24)) * 100);
118    const remainingHours = Math.round((24 - now.getHours() - now.getMinutes()/60) * 10) / 10;
119
120    // Calculate elapsed days for the month
121    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
122    const elapsedDays = (now - startOfMonth) / (1000 * 60 * 60 * 24);
123    const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
124    const monthPercentage = Math.round((elapsedDays / daysInMonth) * 100);
125    const remainingDays = Math.ceil(daysInMonth - elapsedDays);
126
127    // Calculate elapsed days for the year
128    const startOfYear = new Date(now.getFullYear(), 0, 1);
129    const elapsedDaysInYear = (now - startOfYear) / (1000 * 60 * 60 * 24);
130    const daysInYear = (new Date(now.getFullYear() + 1, 0, 1) - new Date(now.getFullYear(), 0, 1)) / (1000 * 60 * 60 * 24);
131    const yearPercentage = Math.round((elapsedDaysInYear / daysInYear) * 100);
132    const remainingMonths = 12 - now.getMonth() - (now.getDate()/daysInMonth);
133    const remainingMonthsRounded = Math.ceil(remainingMonths);
134
135    updateProgress('todayProgress', dayPercentage, 'dayRemaining', remainingHours, '小时');
136    updateProgress('monthProgress', monthPercentage, 'monthRemaining', remainingDays, '天');
137    updateProgress('yearProgress', yearPercentage, 'yearRemaining', remainingMonthsRounded, '月');
138});
139` }}
140
141<script>{{ $js | safeJS }}</script>

用 {{< timing >}} 就可以咯 ~

左侧导航栏缩小间距

原先的导航栏样式有点宽，换语言和切换深色模式还要往下滑。于是想着缩小一下这个间距。

参考链接，找到 /assets/scss/partials/menu.scss 中的这段代码，把 gap: 25px; 改成 gap: 15px; 看起来就饱满了。

 1#main-menu {
 2    &, .menu-bottom-section ol {
 3        flex-direction: column;
 4        gap: 30px;
 5
 6        @include respond(xl) {
 7            gap: 25px;
 8            gap: 15px;
 9        }
10    }
11}

提高自定义字体加载速度

偶然看到这篇文章：利用 unicode-range 属性, 提高自定义字体加载速度

立马在 assets/scss/custom.scss 加上：

1@font-face {
2  unicode-range: U+4E00-9FFF,U+0025-00F0,U+3040-30FF,U+1100-11FF,U+3130-318F,U+AC00-D7FF;
3  // U+4E00-9FFF CJK中日韩统一表意文字，包括简繁中文
4  // U+AC00-D7FF 韩语
5  // U+3040-30FF 日语
6  // U+0025-00F0 数字、字母、拉丁语等
7  // U+1100-11FF,U+3130-318F 韩文辅音
8}

好像有点作用 ~~（也可能是心理安慰？~~

短代码合集

有时候想插入短代码还要翻以前的文章，有点烦人。忘记从哪里看到有人弄了个短代码的总结页，但是也没发现有人做过这个的教程，只能自己~~用AI~~手搓一个。
成品：短代码合集

新建一个静态页面 shortcodes.md：

1---
2title: "短代码合集"
3date: 2025-04-13
4layout: "shortcodes"
5slug: shortcodes
6description: "Hugo 博客短代码集合，点击即可复制"
7---

在 layouts/_default/ 目录下新建 shortcodes.html：

  1{{ define "main" }}
  2<div class="shortcodes-container">
  3    <h1>Hugo Shortcodes 速查表</h1>
  4    <div class="shortcodes-intro">
  5        <p>这些是Hugo中常用的Shortcodes列表，点击即可复制使用。</p>
  6    </div>
  7    <div class="category-container">
  8        <div class="category-nav">
  9            <button class="category-btn active" data-category="all">全部</button>
 10            <button class="category-btn" data-category="text">文本格式</button>
 11            <button class="category-btn" data-category="layout">布局排版</button>
 12            <button class="category-btn" data-category="effect">动态效果</button>
 13            <button class="category-btn" data-category="other">其他功能</button>
 14        </div>
 15    </div>
 16    <div id="shortcodesGrid" class="shortcodes-grid"></div>
 17    <div id="copyNotification" class="copy-notification">已复制到剪贴板!</div>
 18</div>
 19
 20<script>
 21document.addEventListener('DOMContentLoaded', function() {
 22    const shortcodes = [
 23        // 文本格式
 24        { name: "文本黑幕", code: "{{ "<span class=\"shady\">数据删除！</span>" | safeHTML }}", category: "text" },
 25        { name: "键盘样式", code: "{{ "<kbd>Ctrl</kbd>" | safeHTML }}", category: "text" },
 26        
 27        // 布局排版
 28        { name: "文字居左", code: "{{ "{{< align left \"文字居左\" >}}" | safeHTML }}", category: "layout" },
 29        { name: "文字居中", code: "{{ "{{< align center \"文字居中\" >}}" | safeHTML }}", category: "layout" },
 30        { name: "文字居右", code: "{{ "{{< align right \"文字居右\" >}}" | safeHTML }}", category: "layout" },
 31        
 32        // 动态效果
 33        { name: "基本摇晃效果", code: "{{ "{{< shake effect=\"shake\" >}}这是基本的摇晃效果。{{< /shake >}}" | safeHTML }}", category: "effect" },
 34        { name: "剧烈摇晃效果", code: "{{ "{{< shake effect=\"shake-hard\" >}}这个段落有剧烈摇晃效果。{{< /shake >}}" | safeHTML }}", category: "effect" },
 35        { name: "慢速摇晃效果", code: "{{ "{{< shake effect=\"shake-slow\" >}}这个段落有慢速摇晃效果。{{< /shake >}}" | safeHTML }}", category: "effect" },
 36        
 37        // 其他功能可以在这里添加
 38        { name: "仿Github样式", code: "{{ "{{< github\n  name=\"链接标题\"\n  link=\"#\"\n  description=\"内容描述\"\n  color=\"#F48201\"\n  language=\"Go\"\n>}}" | safeHTML }}", category: "other" },
 39    ];
 40
 41    const grid = document.getElementById('shortcodesGrid');
 42    const notification = document.getElementById('copyNotification');
 43    const categoryButtons = document.querySelectorAll('.category-btn');
 44
 45    // 计算各分类的短代码数量
 46    const categoryCounts = {
 47        all: shortcodes.length
 48    };
 49    
 50    shortcodes.forEach(item => {
 51        if (!categoryCounts[item.category]) {
 52            categoryCounts[item.category] = 0;
 53        }
 54        categoryCounts[item.category]++;
 55    });
 56    
 57    // 更新分类按钮上显示的数量
 58    categoryButtons.forEach(button => {
 59        const category = button.dataset.category;
 60        const count = categoryCounts[category] || 0;
 61        button.textContent = `${button.textContent} (${count})`;
 62    });
 63
 64    // 创建短代码块的函数
 65    function createShortcodeBlocks(category = 'all') {
 66        // 清空网格
 67        grid.innerHTML = '';
 68        
 69        // 过滤短代码
 70        const filteredShortcodes = category === 'all' 
 71            ? shortcodes 
 72            : shortcodes.filter(item => item.category === category);
 73        
 74        // 创建短代码块
 75        filteredShortcodes.forEach(item => {
 76            const block = document.createElement('div');
 77            block.className = 'shortcode-block';
 78            block.dataset.category = item.category;
 79        
 80            const name = document.createElement('h3');
 81            name.textContent = item.name;
 82        
 83            const code = document.createElement('pre');
 84            code.textContent = item.code;
 85        
 86            block.appendChild(name);
 87            block.appendChild(code);
 88        
 89            // 添加点击复制功能
 90            block.addEventListener('click', function() {
 91                navigator.clipboard.writeText(item.code).then(() => {
 92                    // 显示复制成功通知
 93                    notification.classList.add('active');
 94                    setTimeout(() => {
 95                        notification.classList.remove('active');
 96                    }, 2000);
 97                });
 98            });
 99        
100            grid.appendChild(block);
101        });
102    }
103
104    // 初始加载全部短代码
105    createShortcodeBlocks();
106
107    // 添加分类按钮事件监听
108    categoryButtons.forEach(button => {
109        button.addEventListener('click', function() {
110            // 移除所有按钮的active类
111            categoryButtons.forEach(btn => btn.classList.remove('active'));
112            // 给当前点击的按钮添加active类
113            this.classList.add('active');
114            
115            // 根据选中的分类显示短代码
116            const category = this.dataset.category;
117            createShortcodeBlocks(category);
118        });
119    });
120});
121</script>
122
123<style>
124.shortcodes-container {
125    max-width: 14400px;
126    padding: 10px;
127    margin-top: -3%;
128    transition: color 0.15s ease;
129    color: var(--body-text-color);
130}
131
132.shortcodes-intro {
133    margin-bottom: 30px;
134}
135
136.category-container {
137    margin-bottom: 20px;
138}
139
140.category-nav {
141    display: flex;
142    gap: 10px;
143    margin-bottom: 20px;
144    flex-wrap: wrap;
145}
146
147.category-btn {
148    padding: 8px 16px;
149    border: none;
150    border-radius: 4px;
151    background-color: #f0f0f0;
152    cursor: pointer;
153    transition: all 0.3s ease;
154    font-weight: 500;
155}
156
157.category-btn:hover {
158    background-color: #e0e0e0;
159}
160
161.category-btn.active {
162    background-color: #410445;
163    color: white;
164}
165
166.shortcodes-grid {
167    display: grid;
168    grid-template-columns: repeat(4, 1fr);
169    gap: 15px;
170}
171
172.shortcode-block {
173    background-color: #f9f8fa;
174    border: 1px solid #dee2e6;
175    border-radius: 6px;
176    padding: 15px;
177    cursor: pointer;
178    transition: all 0.3s ease;
179}
180
181.shortcode-block:hover {
182    box-shadow: 0 5px 8px rgba(201, 10, 188, 0.8);
183    transform: translateY(-2px);
184}
185
186.shortcode-block h3 {
187    margin-top: 0;
188    margin-bottom: 10px;
189    color: #333;
190}
191
192.shortcode-block pre {
193    margin: 0;
194    background-color: #ffffff;
195    padding: 5px;
196    border-radius: 4px;
197    white-space: pre-wrap;
198    word-break: break-all;
199    font-size: 14px;
200}
201
202[data-scheme="dark"] {
203    .shortcode-block {
204        background-color: #410445;
205        border: 1px solid #5f0865;
206    }
207    .shortcode-block pre {
208        background-color: #222222;
209    }
210    .shortcode-block h3{
211        color: #FFF8F8;
212    }
213    .shortcodes-container {
214        color: #FFF8F8;
215    }
216    .category-btn {
217        background-color: #333;
218        color: #ddd;
219    }
220    .category-btn:hover {
221        background-color: #444;
222    }
223    .category-btn.active {
224        background-color: #c90abc;
225        color: white;
226    }
227}
228
229.copy-notification {
230    position: fixed;
231    bottom: 20px;
232    left: 50%;
233    transform: translateX(-50%) translateY(100px);
234    background-color: rgba(0,0,0,0.8);
235    color: white;
236    padding: 10px 20px;
237    border-radius: 4px;
238    opacity: 0;
239    transition: all 0.3s ease;
240}
241
242.copy-notification.active {
243    transform: translateX(-50%) translateY(0);
244    opacity: 1;
245}
246
247@media (max-width: 1200px) {
248    .shortcodes-grid {
249        grid-template-columns: repeat(3, 1fr);
250    }
251}
252
253@media (max-width: 900px) {
254    .shortcodes-grid {
255        grid-template-columns: repeat(2, 1fr);
256    }
257}
258
259@media (max-width: 600px) {
260    .shortcodes-grid {
261        grid-template-columns: 1fr;
262    }
263    
264    .category-nav {
265        justify-content: center;
266    }
267}
268</style>
269{{ end }}

注意：要用 Go 模板中形如 {{ "<span class=\"blur\">手动打码效果</span>" | safeHTML }} 的安全函数样式才能避免短代码被渲染出来；有双引号配置的参数要转义内部引号（在 " 前面打上 \）；要换行的直接在对应位置加上 \n。

首页欢迎栏

刚好我的短代码合集不知道放哪里好，又不想放在侧边栏，干脆就放在首页这个欢迎栏上好了。参考Hugo Stack 主题美化 - 阿琦同学，在 layouts/index.html 的 {{ $pag := .Paginate ($filtered) }} 后面加入：

 1<!-- 首页欢迎字幅板块 -->
 2<div class="welcome">
 3    <p style="font-size: 2rem; text-align: center; font-weight: bold">
 4        <a href="/shortcodes" title="Link To Hugo Shortcodes Space">
 5            <span class="shake">👋</span>            
 6            <span class="jump-text1" > Welcome</span>
 7            <span class="jump-text2"> To </span>
 8            <span class="jump-text3" style="color:#e99312">if</span><span class="jump-text4" style="color:#e99312">a</span
 9            ><span class="jump-text5" style="color:#e99312">n</span><span class="jump-text6" style="color:#e99312">t</span
10            ><span class="jump-text7" style="color:#e99312">ic</span>
11            <span class="jump-text8" style="color:#e99312">'s</span>
12            <span class="jump-text9" style="color:#e99312">Blog</span>
13        </a>
14    </p>
15</div>
16<!-- ------首页欢迎字幅板块------ -->

在 assets/scss/partials/sidebar.scss 加入：

  1//首页欢迎板块样式
  2.welcome {
  3  color: var(--card-text-color-main);
  4  background: var(--card-background);
  5  box-shadow: var(--shadow-l2);
  6  border-radius: 30px;
  7  display: inline-block;
  8}
  9
 10// 👋emoji实现摆动效果
 11.shake {
 12  display: inline-block;
 13  animation: shake 1s;
 14  animation-duration: 1s;
 15  animation-timing-function: ease;
 16  animation-delay: 0s;
 17  animation-iteration-count: 1;
 18  animation-direction: normal;
 19  animation-fill-mode: none;
 20  animation-play-state: running;
 21  animation-name: shake;
 22  animation-timeline: auto;
 23  animation-range-start: normal;
 24  animation-range-end: normal;
 25  animation-delay: 2s;
 26  @keyframes shake {
 27    0% {
 28      transform: rotate(0);
 29    }
 30    25% {
 31      transform: rotate(45deg) scale(1.2);
 32    }
 33    50% {
 34      transform: rotate(0) scale(1.2);
 35    }
 36    75% {
 37      transform: rotate(45deg) scale(1.2);
 38    }
 39    100% {
 40      transform: rotate(0);
 41    }
 42  }
 43}
 44// 实现字符跳动动画
 45.jump-text1 {
 46  display: inline-block;
 47  animation: jump 0.5s 1;
 48}
 49
 50.jump-text2 {
 51  display: inline-block;
 52  animation: jump 0.5s 1;
 53  animation-delay: 0.1s;
 54}
 55
 56.jump-text3 {
 57  display: inline-block;
 58  animation: jump 0.5s 1;
 59  animation-delay: 0.2s;
 60}
 61
 62.jump-text4 {
 63  display: inline-block;
 64  animation: jump 0.5s 1;
 65  animation-delay: 0.3s;
 66}
 67
 68.jump-text5 {
 69  display: inline-block;
 70  animation: jump 0.5s 1;
 71  animation-delay: 0.4s;
 72}
 73
 74.jump-text6 {
 75  display: inline-block;
 76  animation: jump 0.5s 1;
 77  animation-delay: 0.5s;
 78}
 79
 80.jump-text7 {
 81  display: inline-block;
 82  animation: jump 0.5s 1;
 83  animation-delay: 0.6s;
 84}
 85
 86.jump-text8 {
 87  display: inline-block;
 88  animation: jump 0.5s 1;
 89  animation-delay: 0.7s;
 90}
 91
 92.jump-text9 {
 93  display: inline-block;
 94  animation: jump 0.5s 1;
 95  animation-delay: 0.9s;
 96}
 97
 98@keyframes jump {
 99  0% {
100    transform: translateY(0);
101  }
102  50% {
103    transform: translateY(-20px);
104  }
105  100% {
106    transform: translateY(0);
107  }
108}

分类和标签页不分页

不修改之前分类页和标签页都会沿用 hugo.yaml 的全局分页配置 pagination: pagerSize: 3，有点难受。把 layouts/_default/list.html 里的所有内容删掉，换成：

 1{{ define "main" }}
 2    <header>
 3        <h3 class="section-title">
 4            {{ if eq .Parent (.GetPage "/") }}
 5                {{ T "list.section" }}
 6            {{ else }}
 7                {{ .Parent.Title }}
 8            {{ end }}
 9        </h3>
10        <div class="section-card">
11            <div class="section-details">
12                <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
13                <h1 class="section-term">{{ .Title }}</h1>
14                {{ with .Params.description }}
15                    <h2 class="section-description">{{ . }}</h2>
16                {{ end }}
17            </div>
18    
19            {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
20            {{ if $image.exists }}
21                <div class="section-image">
22                    {{ if $image.resource }}
23                        {{- $Permalink := $image.resource.RelPermalink -}}
24                        {{- $Width := $image.resource.Width -}}
25                        {{- $Height := $image.resource.Height -}}
26    
27                        {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
28                            {{- $thumbnail := $image.resource.Fill "120x120" -}}
29                            {{- $Permalink = $thumbnail.RelPermalink -}}
30                            {{- $Width = $thumbnail.Width -}}
31                            {{- $Height = $thumbnail.Height -}}
32                        {{- end -}}
33                        
34                        <img src="{{ $Permalink }}" 
35                            width="{{ $Width }}"
36                            height="{{ $Height }}" 
37                            loading="lazy">
38                    {{ else }}
39                        <img src="{{ $image.permalink }}" loading="lazy" />
40                    {{ end }}
41                </div>
42            {{ end }}
43        </div>
44    </header>
45    {{- $subsections := .Sections -}}
46    {{- $pages := .Pages | complement $subsections -}}
47    
48    {{- if eq (len $pages) 0 -}}
49        {{/* If there are no normal pages, display subsections in list style, with pagination */}}
50        {{/* This happens with taxonomies like categories or tags */}}
51        {{- $pages = $subsections -}}
52        {{- $subsections = slice -}}
53    {{- end -}}
54    {{- with $subsections -}}
55        <aside>
56            <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
57            <div class="subsection-list">
58                <div class="article-list--tile">
59                    {{ range . }}
60                        {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
61                    {{ end }}
62                </div>
63            </div>
64        </aside>
65    {{- end -}}
66    
67    {{/* 检查是否是分类页面或标签页面 */}}
68    {{ $isCategoryPage := findRE "^/categories(/|/.+)" .RelPermalink }}
69    {{ $isTagPage := findRE "^/tags(/|/.+)" .RelPermalink }}
70    {{ if or $isCategoryPage $isTagPage }}
71        {{/* 分类和标签页面显示所有文章，不分页 */}}
72        <section class="article-list--compact">
73            {{ range $pages.ByDate.Reverse }}
74                {{ partial "article-list/compact" . }}
75            {{ end }}
76        </section>
77    {{ else }}
78        {{/* 其他页面使用常规分页 */}}
79        {{ $paginator := .Paginate $pages }}
80        <section class="article-list--compact">
81            {{ range $paginator.Pages }}
82                {{ partial "article-list/compact" . }}
83            {{ end }}
84        </section>
85        {{- partial "pagination.html" . -}}
86    {{ end }}
87    
88    {{ partialCached "footer/footer" . }}
89{{ end }}
90{{ define "right-sidebar" }}
91    {{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
92{{ end }}

看起来轻描淡写就改好了，实际上花了我老大劲才定位到问题，解决之后发现自己好蠢（）

最后的碎碎念..

还是看见别人好看的博客就手痒，于是又开始折腾起来。其实主要是移动端目录的问题困扰了我很久，改来改去都不尽人意，最后直接让 Claude 给我生成一版算了。接下来的日子估计会很忙，还是勉励下自己要抓紧学习呀。

加速我的博客

Fri, 07 Mar 2025 16:58:18 +0800

首先你需要确定要使用的优选域名。你可以使用自建的优选域名，也可以使用网友公益维护的优选域名。更多优选内容参考 CloudFlare优选。

为 Workers 项目使用优选域名

由于我的文件快递柜是用 Worker 搭的，因此本教程演示的 Worker 使用的自定义域名示例为 files.ifantic.me 。

设置自定义域 CNAME 记录至优选域名

给你将要使用的域名 ifantic.me，添加一个 CNAME 类型的解析记录，名称为所需的自定义域示例 files，目标为优选域名示例 visa.cn （你想选哪个就选哪个）。点击保存：

重要提示：不要打开小黄云（Cloudflare 的代理功能）！！！

给 Workers 项目添加路由

选中 ifantic.me 域名后，左侧选择 Workers 路由 > 添加路由；

路由填入 Worker 项目最终使用的自定义域 files.ifantic.me/*，Worker 选中对应的Worker项目名后点击保存即可。

注意自定义域末尾必须加上 /*
，也就是 files.ifantic.me/* ！！！

为 Pages 项目使用优选域名

本教程演示的 Pages 使用我的博客，自定义域名示例为 blog.ifantic.me。

为 Pages 项目添加自定义域

先给 Pages 项目添加自定义域，等待自定义域生效。

使用华为云国际版-云解析服务 DNS

注册华为云国际版-云解析服务 DNS（国际版不需要实名，如果注册时频繁跳转国内版本，请打开全局代理模式注册）。

注册华为云国际版

设置您的安全手机(跳过即可)

开通华为云

跳转到完善信息页面说明注册已完成，不用管他，无视绑定提示即可。

添加自定义域至云解析服务 DNS

点击前往云解析服务 DNS，点击公网域名

点击右上角创建公网域名

填入需要优选的 Pages 自定义域名 blog.ifantic.me，然后点击确定

点击 blog.ifantic.me 的管理解析

可能有人发现了，我说的是 blog.ifantic.me 的解析，怎么图中变成了 ifantic.me 的解析呢？待会你就会知道了，你先照着帖子配置下去 🤷

点击右上角的添加记录集

新添加一个 CNAME 记录，线路类型为全网默认，记录值为 Pages 项目分配的域名 hb-81t.pages.dev。

再添加一个 CNAME 记录，线路类型为地域解析 > 中国大陆，记录值为优选域名 visa.cn。

将第一条 NS 记录的4条 NS 记录值复制出来保存，或者你就用我的。

1ns1.huaweicloud-dns.com
2ns1.huaweicloud-dns.cn
3ns1.huaweicloud-dns.net
4ns1.huaweicloud-dns.org

设置自定义域NS 记录至华为云 NS 记录

踩坑

当初我配置的R2图床是用自定义域 static.blog.ifantic.me，但是用了这个pages加速博客之后，图床会报错用不了。华为云cdn折腾了一天，在网上找了一番也没有解决办法，只能把R2换成 static.houhuayuan.me，将就着用吧 🤷

有哪位大佬知道的，欢迎评论交流一下~

参考链接

使用优选域名加速-Workers-Pages-项目

Hugo-stackの美化

Fri, 28 Feb 2025 16:46:21 +0800

博客刚弄好，还是有不少问题的。比如图片不能点击放大，也没有评论功能（虽然没什么人会评论吧）。于是乎想着整一个Waline评论系统，其实Waline文档写的挺详细的，不过还是因自身需求做些改动~~水一下~~好了，感兴趣的可以查阅：

Vercel 部署 | Waline

添加Waline评论系统

博客搭建完成之后，可以添加一个评论系统。这里选用的是 Waline，因为 Hugo Stack 主题支持 Waline，所以配置起来也会方便不少。同时Waline只需几个步骤，就可以在你的网站中启用 Waline 提供评论服务，并对评论配置tg通知。

LeanCloud 设置 (数据库)

登录或注册 LeanCloud 国际版 并进入控制台

点击 创建应用 并起一个你喜欢的名字 (选择免费的开发版):

进入应用，选择左下角的 设置 -> 应用 Key。你可以看到你的 APP ID, APP Key 和 Master Key。请记录它们，以便后续使用。

Vercel 部署 (服务端)

vercel部署

输入一个你喜欢的项目名称并点击 Create 继续

此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。

一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。

点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。

添加 Telegram 通知

Telegram 通知通过 Telegram bot 机器人实现，需要配置以下几个环境变量:

TG_BOT_TOKEN: Telegram 机器人用于访问 HTTP API 的 token，通过 @BotFather 创建机器人获取，必填。
TG_CHAT_ID: 接收消息对象的 chat_id，可以是单一用户、频道、群组，通过 @userinfobot 获取，必填。
AUTHOR_EMAIL: 博主邮箱，用来区分发布的评论是否是博主本身发布的。如果是博主发布的则不进行提醒通知。
SITE_NAME: 网站名称，用于在消息中显示。
SITE_URL: 网站地址，用于在消息中显示。
TG_TEMPLATE: Telegram 使用的通知模板，变量与具体格式可参见下文的通知模板。未配置则使用默认模板。

如果你想让评论要经审核才发布的话，可以加上以下变量：

COMMENT_AUDIT - true

开启后评论需要经过管理员审核后才能显示，所以建议在评论框默认文字上提供提示。
环境变量配置完成并保存后点击 Redeploy 按钮进行重新部署，让刚才设置的环境变量生效。

此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

但是由于vercel.app被污染了，所以你需要添加自定义域（在cf托管的即可）。

主题启用 Waline

在 hugo.yaml 配置文件里找到这一区块：

1params:
2    comments:
3        enabled: true
4        provider:

将 enabled 改 true，provider 改为 waline，然后在 comments.waline 区块设置 waline 的相关配置：

 1# Waline client configuration see: https://waline.js.org/en/reference/component.html
 2waline:
 3    serverURL: your-server-url
 4    lang: zh-CN
 5    pageview: true
 6    emoji:
 7        - https://unpkg.com/@waline/emojis@1.0.1/weibo
 8    requiredMeta:
 9        - name
10        - email
11    locale:
12        admin: Admin
13        placeholder: "快来说点什么吧~~（评论经审核后显示喵）"

serverURL 改为你的 vercel 的服务端地址即可。

部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。

管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。用户也可通过评论框注册账号，登陆后会跳转到自己的档案页。

fancybox灯箱导入使图片能够点击放大

修改 config.toml 或者 hugo.yaml

我使用的是stack主题，配置文件为 hugo.yaml，在params中添加：

1params:
2  fancybox: true

创建并修改 render-image.html

创建路径为 /layouts/_default/_markup/render-image.html，填入以下内容：

1{{if .Page.Site.Params.fancybox }}
2<div class="post-img-view">
3<a data-fancybox="gallery" href="{{ .Destination | safeURL }}">
4<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
5</a>
6</div>
7{{ end }}

在 footer.html 添加内容

在 layouts\partials\article\components\footer.html 中添加

1{{if .Page.Site.Params.fancybox }}
2<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
3<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
4<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
5{{ end }}

即可启用灯箱，舒舒服服地放大图片啦！

取消 markdown 严格换行

参考hugo换行 - Bboysoul’s Blog，不修改之前一定要在markdown换两行才能在博文里换行，实在是太烦了。
其实只要在 hugo.yaml 里面对应的选项里添加： hardWraps: true

1markup:
2  goldmark:
3    renderer:
4      hardWraps: true

文章添加密码

依旧是找找有没有大神的作业能参考，找来找去大差不差，也不知道哪个是源头，姑且贴一个远古的博客链接罢：

Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章 - 雨临Lewis

但是呢，并不适用于hugo-theme-stack，要不输入正确的密码后变成空白页还是打不开，要不就报错不能用。没办法，食過返尋味，再一次施展AI大法，在 layouts/_default/single.html 中找到 {{ define "main" }} 和 {{ partial "article/article.html" . }} 的中间部分，粘贴代码：

 1<!-- 以上代码不变 -->
 2{{ define "main" }}
 3    {{ if .Params.password }}
 4    <div class="post-password-protection">
 5    <script>
 6        (function(){
 7        // Store the password from the front matter
 8        const correctPassword = {{ .Params.password }};
 9        // Prompt for password
10        const enteredPassword = prompt('请输入文章密码：');
11        
12        // Check if password is correct
13        if (enteredPassword !== correctPassword) {
14            alert('密码错误！');
15            // Redirect back or close window
16            if (history.length <= 1) {
17            window.opener = null;
18            window.open('', '_self');
19            window.close();
20            } else {
21            history.back();
22            }
23        }
24        })();
25    </script>
26    </div>
27    {{ end }}
28
29    {{ partial "article/article.html" . }}
30    <!-- 以上下代码不变 -->

然后在你要加密的文章顶部信息处加入密码即可：

1---
2title: 随笔
3password: test
4---

测试链接（密码：test）

然后我又发现一个问题，输错密码在返回的时候会短暂的闪现出加密文章的界面。再次狠狠地CPU Claude3.7，顺便把一次性检验与永久检验做出来了。把整个 single.html 改成如下内容：

  1{{ define "body-class" }}
  2    article-page
  3    {{/* Widget logic remains unchanged */}}
  4    {{- $HasWidgetNotTOC := false -}}
  5    {{- $TOCWidgetEnabled := false -}}
  6    {{- range .Site.Params.widgets.page -}}
  7        {{- if ne .type "toc" -}}
  8            {{ $HasWidgetNotTOC = true -}}
  9        {{- else -}}
 10            {{ $TOCWidgetEnabled = true -}}
 11        {{- end -}}
 12    {{- end -}}
 13
 14    {{- $TOCManuallyDisabled := eq .Params.toc false -}}
 15    {{- $TOCEnabled := and (not $TOCManuallyDisabled) $TOCWidgetEnabled -}}
 16    {{- $hasTOC := ge (len .TableOfContents) 100 -}}
 17    {{- .Scratch.Set "TOCEnabled" (and $TOCEnabled $hasTOC) -}}
 18    
 19    {{- .Scratch.Set "hasWidget" (or $HasWidgetNotTOC (and $TOCEnabled $hasTOC)) -}}
 20{{ end }}
 21
 22{{ define "main" }}
 23    {{ if .Params.password }}
 24    <style>
 25        /* Hide content by default when password protection is enabled */
 26        .article-content, .article-header, .article-footer, .article-image,
 27        .related-content, .article-links, #comments {
 28            display: none;
 29        }
 30        /* Only show content when authorized class is added */
 31        .password-authorized .article-content, 
 32        .password-authorized .article-header,
 33        .password-authorized .article-footer,
 34        .password-authorized .article-image,
 35        .password-authorized .related-content,
 36        .password-authorized .article-links,
 37        .password-authorized #comments {
 38            display: block;
 39        }
 40    </style>
 41    <div class="post-password-protection">
 42    <script>
 43        (function(){
 44            // Generate a unique key for this article
 45            const articleId = "{{ .File.UniqueID | default .Permalink }}";
 46            const storageKey = "article_auth_" + articleId;
 47            const correctPassword = "{{ .Params.password }}";
 48            // Check if persistent authentication is enabled (default: false)
 49            const persistAuth = {{ .Params.persistAuth | default false }};
 50            
 51            let isAuthorized = false;
 52            
 53            // Only check localStorage if persistent auth is enabled
 54            if (persistAuth) {
 55                isAuthorized = localStorage.getItem(storageKey) === "true";
 56            }
 57            
 58            if (!isAuthorized) {
 59                // Prompt for password
 60                const enteredPassword = prompt('请输入文章密码：');
 61                
 62                // 用户点击了取消按钮
 63                if (enteredPassword === null) {
 64                    if (history.length <= 1) {
 65                        window.opener = null;
 66                        window.open('', '_self');
 67                        window.close();                        
 68                    } else {
 69                        history.back();
 70                    }
 71                    return;
 72                }
 73                
 74                // 用户输入了密码但不正确
 75                if (enteredPassword !== correctPassword) {
 76                    alert('密码错误！');
 77                    if (history.length <= 1) {
 78                        window.opener = null;
 79                        window.open('', '_self');
 80                        window.close();   
 81                    } else {
 82                        history.back();
 83                    }
 84                    return;
 85                }
 86                
 87                // 密码正确
 88                if (persistAuth) {
 89                    localStorage.setItem(storageKey, "true");
 90                }
 91                isAuthorized = true;
 92            }
 93            
 94            // If we reach here, user is authorized
 95            document.addEventListener('DOMContentLoaded', function() {
 96                document.body.classList.add('password-authorized');
 97            });
 98        })();
 99
100    </script>
101    </div>
102    {{ end }}
103
104    {{ partial "article/article.html" . }}
105
106    {{ if .Params.links }}
107        {{ partial "article/components/links" . }}
108    {{ end }}
109
110    {{ partial "article/components/related-content" . }}
111     
112    {{ if not (eq .Params.comments false) }}
113        {{ partial "comments/include" . }}
114    {{ end }}
115
116    {{ partialCached "footer/footer" . }}
117
118    {{ partialCached "article/components/photoswipe" . }}
119{{ end }}
120
121{{ define "right-sidebar" }}
122    {{ if .Scratch.Get "hasWidget" }}{{ partial "sidebar/right.html" (dict "Context" . "Scope" "page") }}{{ end}}
123{{ end }}

就把加密文章的问题解决啦！如果你想用一次性验证的话，就用上面那个默认密码设置就好。想永久身份验证的话，就可以添加以下配置：

1---
2title: 测试
3password: test
4persistAuth: true
5---

永久验证测试链接（密码：test）

上面的两个测试链接都有樱花特效哦，具体配置见下面

2025.4.7 更新

上面的加密方法其实只是图一乐而已啦！
想要真正比较安全的加密，可以看看这篇文章 ~

把文章从主页和归档中隐藏

上面整出来的这两篇文章仅仅只是为了测试，放在首页和归档页好像不太好。好在官方有解决办法，在文章的设置里加上：

1---
2title: "测试"
3description: 
4hidden: true
5---

但是我发现这么操作的话，底部卜算子的统计和热力图还是会检索到这篇文章。于是把参数改一下：

1---
2title: "测试"
3description: 
4_build:
5    list: false  # 不在列表（主页/归档）中显示
6    render: true # 仍生成最终页面
7---

这样的话热力图和底下的统计信息也没把他们算进去了，除非你公布链接，不然它们就像销声匿迹了一样 ~

加载进度条

参考博客切换到STACK 主题 - 一不留神的博客，在 layouts/partials/footer/custom.html 后面加入：

1<script src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/nprogress.min.js" integrity="sha384-bHDlAEUFxsRI7JfULv3DTpL2IXbbgn4JHQJibgo5iiXSK6Iu8muwqHANhun74Cqg" crossorigin="anonymous"></script>
2<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/css/nprogress.css" integrity="sha384-KJyhr2syt5+4M9Pz5dipCvTrtvOmLk/olWVdfhAp858UCa64Ia5GFpTN7+G4BWpE" crossorigin="anonymous" />
3<script>
4    NProgress.start();
5    document.addEventListener("readystatechange", () => {
6        if (document.readyState === "interactive") NProgress.inc(0.8);
7        if (document.readyState === "complete") NProgress.done();
8    });
9</script>

分类卡片添加图片

在 content\categories 下添加分类文件夹，如 blog 。然后在文件夹里创建一个 _index.md ，输入以下内容：

1---
2title: "Blog"
3descript: "博客"
4image: "blog.png"
5weight: 4
6---

其中 image 就是你在该分类文件夹下的图片名称，然后 descript 参数发现好像没什么用 🤷‍♂️

归档页分类卡片缩放动画

参考Hugo Stack 魔改美化 - Naive Koala，在 /assets/scss/custom.scss 中加入以下代码：

1/*-----------归档页面----------*/
2//归档页面卡片缩放
3.article-list--tile article {
4  transition: .6s ease;
5}
6
7.article-list--tile article:hover {
8  transform: scale(1.03, 1.03);
9}

移除相关文章中的遮罩

这个相关文章的图片有一层上黑下透的遮罩，我只能说丑爆了好吗 🤷‍♂️

按照这篇文章的做法：如何优雅的从 Hexo 转移 Blog 到 Hugo - SDLMoe，在 assets/scss/partials/layout/article.scss 中删除以下代码：

1&.has-image {
2    .article-details {
3        padding: 20px;
4        background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%);
5    }
6}

然后进一步移除 assets/ts/main.ts 中的 30-59 行，就搞定啦！

樱花特效

无意间撞到【Web】博客、个人网站背景美化的几个方法（sakura / canvas-nest / particles）- 星野睡不醒这篇文章，看别人弄出来的效果有点心动呢

只需要在主页插入：

1<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@3.0/index/web.js"></script>

不过弄了之后觉得有点花里胡哨的，不确定我有哪篇帖子适合（姑且放测试帖子里吧，具体链接在上面

返回顶部按钮

在阅读长文章时，如果想返回顶部没有快捷按钮则是很不方便的，所以添加一个按钮

在 /layouts/partials/footer/custom.html 里面添加如下代码：

  1<!--返回顶部按钮 -->
  2<a href="#" id="back-to-top" title="返回顶部"></a>
  3
  4<!--返回顶部CSS -->
  5<style>
  6  #back-to-top {
  7    display: none;
  8    position: fixed;
  9    bottom: 20px;
 10    right: 55px;
 11    width: 55px;
 12    height: 55px;
 13    border-radius: 7px;
 14    background-color: rgba(64, 158, 255, 0.5);
 15    box-shadow: var(--shadow-l2);
 16    font-size: 30px;
 17    text-align: center;
 18    line-height: 50px;
 19    cursor: pointer;
 20  }
 21
 22  #back-to-top:before {
 23    content: ' ';
 24    display: inline-block;
 25    position: relative;
 26    top: 0;
 27    transform: rotate(135deg);
 28    height: 10px;
 29    width: 10px;
 30    border-width: 0 0 2px 2px;
 31    border-color: var(--back-to-top-color);
 32    border-style: solid;
 33  }
 34
 35  #back-to-top:hover:before {
 36    border-color: #2674e0;
 37  }
 38
 39  /* 在屏幕宽度小于 768 像素时，钮位置调整 */
 40  @media screen and (max-width: 768px) {
 41    #back-to-top {
 42      bottom: 20px;
 43      right: 20px;
 44      width: 40px;
 45      height: 40px;
 46      font-size: 10px;
 47    }
 48  }
 49
 50  /* 在屏幕宽度大于等于 1024 像素时，按钮位置调整 */
 51  @media screen and (min-width: 1024px) {
 52    #back-to-top {
 53      bottom: 20px;
 54      right: 40px;
 55    }
 56  }
 57
 58  /* 在屏幕宽度大于等于 1280 像素时，按钮位置调整 */
 59  @media screen and (min-width: 1280px) {
 60    #back-to-top {
 61      bottom: 20px;
 62      right: 55px;
 63    }
 64  }
 65
 66  /* 目录显示时，隐藏按钮 */
 67  @media screen and (min-width: 1536px) {
 68    #back-to-top {
 69      visibility: hidden;
 70    }
 71  }
 72</style>
 73
 74<!--返回顶部JS -->
 75<script>
 76  function backToTop() {
 77    document.documentElement.scrollIntoView({
 78      behavior: 'smooth',
 79    })
 80  }
 81
 82  window.onload = function () {
 83    let scrollTop =
 84      this.document.documentElement.scrollTop || this.document.body.scrollTop
 85    let totopBtn = this.document.getElementById('back-to-top')
 86    if (scrollTop > 0) {
 87      totopBtn.style.display = 'inline'
 88    } else {
 89      totopBtn.style.display = 'none'
 90    }
 91  }
 92
 93  window.onscroll = function () {
 94    let scrollTop =
 95      this.document.documentElement.scrollTop || this.document.body.scrollTop
 96    let totopBtn = this.document.getElementById('back-to-top')
 97    if (scrollTop < 200) {
 98      totopBtn.style.display = 'none'
 99    } else {
100      totopBtn.style.display = 'inline'
101      totopBtn.addEventListener('click', backToTop, false)
102    }
103  }
104</script>

添加右下角联系小气泡按钮

是一个日本公司提供的服务Channel.io，网页气泡是个入口，实际聊天可以在它们的App里完成。配置过程和山茶花舍说的一样，在官网注册完之后，点击小齿轮 – General – Manage Plug-in – Install plug-in – 点击JavaScript并复制框里的代码，粘贴到 layouts/partials/footer/custom.html 就可以啦。具体可以参考这篇博客：
Hugo Stack主题装修笔记 - 第三夏尔 | Third Shire

如果嫌刚开始弹出来的那个气泡很烦的话，可以在设置里把他关掉：

图片轮播

照抄大佬的博客Hugo | 在文章中插入轮播图片 - 小球飞鱼，在 layout/shortcodes 文件夹中创建 imgloop.html 短代码模板：

 1{{ if .Site.Params.enableimgloop }}
 2    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
 3    <!-- Swiper -->
 4    <div class="swiper-container">
 5        <div class="swiper-wrapper">
 6            {{$itItems := split (.Get 0) ","}}
 7            {{range $itItems }}
 8            <div class="swiper-slide">
 9                <img src="{{.}}" alt="">
10            </div>
11            {{end}}
12        </div>
13        <!-- Add Pagination -->
14        <div class="swiper-pagination"></div>
15    </div>
16
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
18     <!-- Initialize Swiper -->
19     <script>
20        var swiper = new Swiper('.swiper-container', {
21            pagination: '.swiper-pagination',
22            paginationClickable: true,
23        //自动调节高度
24        autoHeight: true,
25        //键盘左右方向键控制
26        keyboardControl : true,
27        //鼠标滑轮控制
28        mousewheelControl : true,
29        //自动切换
30        //autoplay : 5000,
31        //懒加载
32        lazyLoading : true,
33		lazyLoadingInPrevNext : true,
34		//无限循环
35		loop : true,
36        });
37        </script>
38{{ end }}

在 assets/scss/cutom.scss 中加入如下代码：

 1.swiper-container {
 2    max-width: 820px;
 3    margin: 2em auto;
 4
 5}
 6.swiper-slide {
 7    text-align: center;
 8    font-size: 18px;
 9    background-color: #fff;
10    /* Center slide text vertically */
11    display: flex;
12    justify-content: center;
13    align-items: center;
14    img {
15        margin: 0 !important;
16    }
17}

最后在 hugo.yaml 的 params 配置下加入 enableimgloop: true就可以啦！

鼠标烟花特效

参考Hugo | 记录MemE主题美化过程 - Zoe’s Dumpster.，在 layouts/partials/footer/components/script.html 最后加入以下代码：

1<!--鼠标点击特效，烟花效应-->
2<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/mouse-click.js"></script>
3<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

固定代码块高度

参考hugo stack 主题美化 - Yelle🦋 ，把以下内容添加到 assets/scss/partials/article.scss ：

 1    .article-content {
 2        .highlight {
 3            padding: var(--card-padding);
 4            pre {
 5                margin: initial;
 6                padding: var(--card-padding);
 7                margin: 0;
 8                width: auto;
 9                max-height: 20em;
10                scrollbar-width: none;
11                /* Firefox */
12                &::-webkit-scrollbar {
13                    display: auto;
14                    /* Chrome Safari */
15                }
16            }
17        }
18    }

但是我发现代码块有个问题：行号和代码都有滚动条。这怎么回事呢？查来查去翻来覆去踌躇了三天，又问了ai也搞不定。最后才发现代码块与行号居然是分开滚动的。还有这种事？迅速找到 hugo.yaml 的配置里有这么个参数：

1markup:
2  highlight:
3    lineNumbersInTable: true
4    # lineNumbersInTable：使用表来格式化行号和代码, 而不是标签。这个属性一般设置为 true.

把这个 lineNumbersInTable 改成false后，代码块与行号就同步了，行号的滚动条已经消失了。然而新的问题又出现了：复制代码的时候行号也会被带上，鼠标点击选中的时候行号也会被选进去。找到了解决办法：
小白hugo博客装修笔记（2）- B1ain’s Blog

1.首先解决手动选中内容复制带行号的问题

在 /assets/scss/custom.scss 文件中添加如下内容，将行号设定为不可选中

1	// 禁止复制行号
2  .highlight .ln {
3    user-select: none;
4  }

2.解决copy按钮复制带行号的问题

修改 /assets/ts/main.ts 文件中的复制按钮逻辑：

 1highlights.forEach(highlight => {
 2    const copyButton = document.createElement('button');
 3    copyButton.innerHTML = copyText;
 4    copyButton.classList.add('copyCodeButton');
 5    highlight.appendChild(copyButton);
 6
 7    const codeBlock = highlight.querySelector('code[data-lang]');
 8    if (!codeBlock) return;
 9
10    copyButton.addEventListener('click', () => {
11        // 创建一个临时容器来克隆代码块的内容
12        const tempCodeBlock = codeBlock.cloneNode(true) as HTMLElement;
13
14        // 删除行号，行号的元素是 <span class="ln">
15        const lineNumbers = tempCodeBlock.querySelectorAll('.ln');
16        lineNumbers.forEach(lineNumber => lineNumber.remove());
17
18        // 获取没有行号的纯文本内容
19        const codeText = tempCodeBlock.textContent;
20
21        navigator.clipboard.writeText(codeText || '')
22        // navigator.clipboard.writeText(codeBlock.textContent)
23            .then(() => {
24                copyButton.textContent = copiedText;
25
26                setTimeout(() => {
27                    copyButton.textContent = copyText;
28                }, 1000);
29            })
30            .catch(err => {
31                alert(err)
32                console.log('Something went wrong', err);
33            });
34    });
35});

什么乱七八糟的bug

文字统计

在 layouts/partials/footer/footer.html 里增加以下代码，参考：
小白hugo博客装修笔记（1）- B1ain’s Blog

1<!-- Add total page and word count time -->
2<section class="totalcount">
3    {{$scratch := newScratch}}
4    {{ range (where .Site.Pages "Kind" "page" )}}
5        {{$scratch.Add "total" .WordCount}}
6    {{ end }}
7    📝{{$scratch.Get "total" }}字 ·
8    📖{{ len (where .Site.RegularPages "Section" "post") }}篇文章
9</section>

访客量统计

在 layouts/partials/footer/footer.html 里第一部分 <footer class="site-footer"> 中的 <section class="powerby"> 最后参考hugo+Stack 搭建个人博客 - Hyrtee’s Blog，增加以下代码：

 1<!-- insert busuanzi -->
 2{{ if .Site.Params.busuanzi.enable -}}
 3<div class="busuanzi-footer">
 4<span id="busuanzi_container_site_pv">
 5  本站总访问量<span id="busuanzi_value_site_pv"></span>次
 6</span>
 7<span id="busuanzi_container_site_uv">
 8  本站访客数<span id="busuanzi_value_site_uv"></span>人次
 9</span>
10</div>
11{{- end -}}

预览的时候统计数据会很夸张，不过部署之后就会显示真实的数据了。

热力图

热力图由椒盐豆豉设计，由 Yelle 改进。新建 layouts/shortcodes/heatmap.html：

  1<div id="heatmap" style="
  2  max-width: 1900px;
  3  height: 180px;
  4  padding: 2px;
  5  text-align: center;
  6  "
  7></div>
  8<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  9<script type="text/javascript">
 10  var chartDom = document.getElementById('heatmap');
 11  var myChart = echarts.init(chartDom);
 12  window.onresize = function() {
 13      myChart.resize();
 14  };
 15  var option;
 16
 17  // echart heatmap data seems to only support two elements tuple
 18  // it doesn't render when each item has 3 value
 19  // it also only pass first 2 elements when reading event param
 20  // so here we build a map to store additional metadata like link and title
 21  // map format {date: [{wordcount, link, title}]}
 22  // for more information see https://blog.douchi.space/hugo-blog-heatmap
 23  var dataMap = new Map();
 24  {{ range ((where .Site.RegularPages "Type" "post")) }}
 25    var key = {{ .Date.Format "2006-01-02" }};
 26    var value = dataMap.get(key);
 27    var wordCount = {{ .WordCount }};
 28    var link = {{ .RelPermalink}};
 29    var title = {{ .Title }};
 30    
 31    // multiple posts in same day
 32    if (value == null) {
 33      dataMap.set(key, [{wordCount, link, title}]);
 34    } else {
 35      value.push({wordCount, link, title});
 36    }
 37  {{- end -}}
 38
 39  var data = [];
 40  // sum up the word count
 41  for (const [key, value] of dataMap.entries()) {
 42    var sum = 0;
 43    for (const v of value) {
 44      sum += v.wordCount;
 45    }
 46    data.push([key, (sum / 1000).toFixed(1)]);
 47  }
 48  
 49  var startDate = new Date();
 50  var year_Mill = startDate.setFullYear((startDate.getFullYear() - 1));
 51  var startDate = +new Date(year_Mill);
 52  var endDate = +new Date();
 53
 54  var dayTime = 3600 * 24 * 1000;
 55  startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
 56  endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
 57
 58  // change date range according to months we want to render
 59  function heatmap_width(months){             
 60    var startDate = new Date();
 61    var mill = startDate.setMonth((startDate.getMonth() - months));
 62    var endDate = +new Date();
 63    startDate = +new Date(mill);
 64
 65    endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
 66    startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
 67
 68    var showmonth = [];
 69    showmonth.push([
 70        startDate,
 71        endDate
 72    ]);
 73    return showmonth
 74  };
 75
 76  function getRangeArr() {
 77    const windowWidth = window.innerWidth;
 78    if (windowWidth >= 600) {
 79      return heatmap_width(12);
 80    } else if (windowWidth >= 400) {
 81      return heatmap_width(9);
 82    } else {
 83      return heatmap_width(6);
 84    }
 85  }
 86
 87  option = {
 88    title: {
 89        top: 0,
 90        left: 'center',
 91        text: '博客热力图'
 92    },
 93    tooltip: {
 94      hideDelay: 1000,
 95      enterable: true,
 96      formatter: function (p) {
 97        const date = p.data[0];
 98        const posts = dataMap.get(date);
 99        var content = `${date}`;
100        for (const [i, post] of posts.entries()) {
101            content += "<br>";
102            var link = post.link;
103            var title = post.title;
104            var wordCount = (post.wordCount / 1000).toFixed(1);
105            content += `<a href="${link}" target="_blank">${title} | ${wordCount} k</a>`
106        }
107        return content;
108      }
109    },
110    visualMap: {
111        min: 0,
112        max: 10,
113        type: 'piecewise',
114        orient: 'horizontal',
115        left: 'center',
116        top: 30,
117        
118        inRange: {   
119          //  [floor color, ceiling color]
120          color: ['#7aa8744c', '#7AA874' ] 
121        },
122        splitNumber: 4,
123        text: ['千字', ''],
124        showLabel: true,
125        itemGap: 20,
126    },
127    calendar: {
128        top: 80,
129        left: 20,
130        right: 4,
131        cellSize: ['auto', 13],
132        range: getRangeArr(),
133        itemStyle: {
134            color: '#F1F1F1',
135            borderWidth: 1.5,
136            borderColor: '#fff',
137        },
138        yearLabel: { show: false },
139        // the splitline between months. set to transparent for now.
140        splitLine: {
141          lineStyle: {
142            color: 'rgba(0, 0, 0, 0.0)',
143            // shadowColor: 'rgba(0, 0, 0, 0.5)',
144            // shadowBlur: 5,
145            // width: 0.5,
146            // type: 'dashed',
147          }
148        }
149    },
150    series: {
151        type: 'heatmap',
152        coordinateSystem: 'calendar',
153        data: data,
154    }
155  };
156  myChart.setOption(option);
157  myChart.on('click', function(params) {
158    if (params.componentType === 'series') {
159      // open the first post on the day
160      const post = dataMap.get(params.data[0])[0];
161      const link = window.location.origin + post.link;
162      window.open(link, '_blank').focus();
163    }
164});
165</script>

然后我发现在暗黑模式下颜色显示会有点问题，于是我在 text: '博客热力图', 的下面加了一段代码改了一下颜色：

1textStyle: {
2    color: '#c0a3e5'
3}

感觉加载热力图的时候有点慢，干脆把 https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js 下载下来放在 static/js 文件夹里，然后把 <script src=".../echarts.min.js"></script> 改成：

1<script src="/js/echarts.min.js"></script>

聊天气泡也能这么处理哦！

自定义emoji

又是大神的文章：Hugo | 为博客添加FF14表情包 - 小球飞鱼。首先建立 static/emoji 文件夹，之后在 layouts/shortcodes 下建立 emoji.html 模板，写入如下内容：

1{{ $name := .Get "name" }}
2<img
3    src="/emoji/{{ $name }}.{{ with .Get "ext" }}{{ . }}{{ else }}webp{{ end }}"
4    title="{{ with .Get "title" }}{{ . }}{{ else }}{{ $name }}{{ end }}"
5    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ $name }}{{ end }}"
6    {{ with .Get "width" }} width="{{ . }}"{{ end }}
7    {{ with .Get "height" }} height="{{ . }}"{{ end }}
8/>

模板中限定图片默认后缀为webp，如果使用webp之外格式的图片，就需要写明ext=“格式名”。alt 参数在HTML的 <img> 标签中用于提供图像的替代文本描述。它的作用和用途包括：

无障碍性 - 当用户使用屏幕阅读器等辅助技术浏览网页时，屏幕阅读器会朗读alt文本，帮助视障用户理解图像内容。
图像无法加载时的显示 - 当图像因网络问题、链接错误等原因无法加载时，浏览器会显示alt文本代替图像。
SEO优化 - 搜索引擎使用alt文本来理解图像内容，有助于提高网页的搜索引擎优化。
符合Web标准 - HTML规范要求所有img标签都应该有alt属性，以符合Web内容无障碍指南(WCAG)。

在模板中，alt参数默认使用 $name 变量的值，但也可以通过 .Get "alt" 获取自定义的alt文本。

然后我发现多个emoji表情与文字并排的时候不在一个水平线上，很膈应，于是修改 assets/scss/custom.scss，在最后加上：

 1.article-page .main-article .article-content img[width$="36"],
 2.article-page .main-article .article-content img[width$="30"],
 3.article-page .main-article .article-content img[width$="40"],
 4.article-page .main-article .article-content img[width$="48"],
 5.article-page .main-article .article-content img[width$="52"],
 6.article-page .main-article .article-content img[width$="60"],
 7.article-page .main-article .article-content img[width$="72"],
 8.article-page .main-article .article-content img[width="100"] {
 9  margin-top: -5px;
10  border-radius: 13%;
11  display: inline-block;
12  vertical-align: middle;
13}

要注意限制 emoji 的设置尺寸，不然大图片也会沿用这个设置。咋一看有点像屎山代码，凑近一看确实是欸！算了，又不是不能用，先这么用着

应用：

1{{< emoji name="lazy" width="60" height="60" title="lazy" >}}

示例：

彩蛋

顺便弄个脚本获取 static/emoji/ 下的所有文件：

 1import os
 2
 3def generate_emoji_file_list():
 4    # 获取当前目录下的所有文件
 5    files = [f for f in os.listdir('.') if os.path.isfile(f)]
 6    
 7    # 排序文件名（可选）
 8    files.sort()
 9    
10    # 创建格式化的文本
11    formatted_text = ""
12    for i, file in enumerate(files, 1):
13        formatted_text += f"emoji{i}: \"/emoji/{file}\",\n"
14    
15    # 将格式化的文本保存到文件
16    with open("emoji_files.txt", "w", encoding="utf-8") as f:
17        f.write(formatted_text)
18    
19    print(f"已成功保存 {len(files)} 个文件名到 emoji_files.txt")
20
21if __name__ == "__main__":
22    generate_emoji_file_list()

可以把表情放到碎碎念页面里去呢 ~

玩转短代码

参考了大神的总结：Hugo|在Stack主题上可行的短代码们 - 眠于水月间

以下是新增的显示效果

好喜欢蓝色！

这个短代码只在电脑端生效

一些手动打码效果！
但总之换行的话就加个空标签。

数据删除！数据删除！
但总之换行的话就加个空标签。

点击显示

让我看看！

我挑的配色很好看吧！
好喜欢蓝色（再次）（再次）
但总之换行的话就加个空标签。

文字居左

文字居中

文字居右

Ctrl+Alt+Del |
Ctrl+Alt+Del
这个原来的键盘样式确实有点丑呢

可以在这里插入链接假装是卡片式链接。

好像不能插入图片？

~~好像是的~~并不是

链接标题

链接内容描述

可以当标签用？

Warning：需要双括号。

info：这是一条信息。

note：可以标注一下，但是没必要。

tip：在示例里胡说八道会使观看者会心一笑。

2024

我是萌新

2025

我还是萌新

瀑布流图片

嵌入PDF

《H庄园的午餐》 [英] 阿加莎·克里斯蒂

< 9.0 >

一个英国版的红玫瑰与白玫瑰的故事。年轻美丽的埃莉诺•卡莱尔平静地站在被告席上。她是H庄园女主人韦尔曼太太的侄女，被控谋杀了她的情敌——H庄园门房的女儿玛丽•杰拉德。证据确凿：埃莉诺准备了那份致命午餐，也只有她拥有作案动机和时机。然而，在那个充满敌意的法庭上，只有一个人依然认为埃莉诺直到被证明有罪之前是清白的。赫尔克里•波洛挡在了埃莉诺和绞刑台之间……

book

John Doe 2023-09-12 14:30

这是左边的消息内容。

2023-09-12 14:45 Alice

这是右边的消息内容，测试长长长长长长长长长长长长长长长长长长长长长长长长度。

发现聊天气泡与图片轮播都不能折叠起来，不然就会报错。找了一圈都没找到解决办法，就这样吧 ~~，又不是不能用~~

打分短代码（支持半颗星）

大神们给出的打分短代码只能按总分十颗星、一颗一颗星去打分，感觉有点太累赘，而且那个星星图案也不好看:

那就参考前人的智慧魔改一下吧。新建 layouts/shortcodes/rate.html ，在里面写入：

1<div class="db-card-subject">
2    <div class="db-card-content">
3        <div class="rating">
4            <span class="description">{{ .Get "description" }}</span>
5            <span class="rating_nums"></span><span class="allstardark"><span class="allstarlight" style="width:{{ .Get "rate" }}0%"></span></span><span class="rating_float"></span></span>
6            <span class="rating_float_num">{{ .Get "rate_float" }}</span>
7        </div>
8    </div>
9</div>

在 assets/scss/custom.scss 后面加入：

 1/* db-card -------- start*/
 2.db-card{margin:2.5rem 3rem;background:var(--card-background);border-radius: 7px;box-shadow: 0 6px 10px 0 #00000053;}
 3.db-card-subject{display: flex;align-items:flex-start;line-height:1.6;padding:12px;position:relative;}
 4.dark .db-card{background:var(--card-background);}
 5.db-card-content {flex:1 1 auto;}
 6.db-card-post {width: 100px;margin-right: 15px;display: flex;flex: 0 0 auto;}
 7.db-card-title {margin-bottom: 3px;font-size: 14px;color: var(--card-text-color-main);;}
 8.db-card-title a{text-decoration: none!important}
 9.db-card-abstract,.db-card-comment{font-size:13px;overflow: auto;max-height:10rem;color: var(--card-text-color-main);;}
10.db-card-cate{position: absolute;top:0;right:0;background:#f99b01;padding:1px 8px;font-size:small;font-style:italic;border-radius:0 8px 0 8px;text-transform:capitalize;}
11.db-card-post img{width: 100px!important;height: 150px!important;border-radius: 4px;-o-object-fit: cover;object-fit: cover;}
12.rating{margin: 0 0 5px;font-size:13px;line-height: 1;display: flex;align-items: center;}
13.rating .allstardark{position:relative;color: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
14}
15.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}
16@media (max-width:550px) {
17	.db-card{margin:0.8rem 1rem;}
18	.db-card-comment{display: none;}
19}
20/* db-card -------- end */
21
22/* Add this to your custom CSS file */
23.rating_score {
24  margin-left: 10px;
25  color: #ff9900;
26  font-weight: bold;
27}
28
29.description {
30  margin-right: 10px; /* Adds space between description and stars */
31  display: inline-block; /* Ensures margin works properly */
32  font-size: 16px; /* Increases font size */
33}
34
35/* Increase star size */
36.allstardark {
37  display: inline-block;
38  width: 100px; /* Increased from 75px */
39  height: 10px; /* Increased from 15px */
40  background: url('/images/star-empty.png') repeat-x;
41  background-size: 10px 10px; /* Increased from 15px 15px */
42  position: relative;
43  vertical-align: middle; /* Aligns stars with text */
44}
45
46.allstarlight {
47  display: inline-block;
48  height: 10px; /* Increased from 15px */
49  background: url('/images/star-filled.png') repeat-x;
50  background-size: 10px 10px; /* Increased from 15px 15px */
51  position: absolute;
52  top: 0;
53  left: 0;
54}
55
56/* Style the rating score */
57.rating_float_num {
58  margin-left: 2px; /* Add space after stars */
59  font-size: 16px; /* Match font size */
60  vertical-align: middle; /* Align with stars */
61  line-height: 0;
62}
63
64.rating .allstardark{position:relative;color: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
65}
66.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}

最后效果：

Claude 8.5

ChatGPT 7.2

使用：

1//实际使用时应为双括号
2{< rate rate=9 rate_float="8.5" description="Claude" >}
3
4{< rate rate=7 rate_float="7.2" description="ChatGPT" >}

写在最后

参考链接

首推非常详尽的 Hugo 介绍：

HUGO - 风月

碎碎念

刚开始这篇文章只是记录一下我为博客添加了评论系统和灯箱，后面装修的东西就越来越多了，什么多语言、字体、文章加密等等这些，都是我刚开始就想搞但一直没搞定的东西。花了大半个月终于把博客装修的差不多了，折腾一下还是挺有乐趣的，有几天为了解决文章加密和多语言的问题还熬了夜。（虽然最后也不是我解决的呜呜呜太菜了）为了我这破破的博客也是值得的吧，暂时应该不会大改了。刚好这几天天气不错，出去耍耍，走！

我的第一篇文章

Wed, 19 Feb 2025 18:00:00 +0800

准备工作

确保你已经有GitHub账号和cloudflare账号
一个托管在cf的域名

安装Git与Hugo

安装Git

Git官网 https://git-scm.com/downloads 一路下一步即可

安装Hugo

hugo 有两个版本，标准版和扩展版，推荐使用扩展版。

Github Releases https://github.com/gohugoio/hugo/releases 下载解压
我选择extended版本，如： hugo_0.144.0_windows-amd64.zip
放入指定目录如： D:\hugo\hugo.exe
添加系统变量
win+R输入sysdm.cpl → 高级 → 环境变量 → 系统变量找到Path变量 → 编辑 → 新建 → 将hugo.exe的目录加入，如： D:\hugo
确认安装成功
cmd中输入hugo version,输出以下即为成功

1C:\Users\User>hugo version
2hugo v0.144.0-b289b17c433aa8ebf8c73ebbaf4bed973ac8e4d5+extended windows/amd64 BuildDate=2025-02-17T16:22:31Z VendorInfo=gohugoio

新建Hugo博客

新建一个目录，用来存放博客的根目录，如： D:\hugo，之后都将这个目录称为根目录。
cmd命令，其中blog可以自定义，也是生成的文件夹名

1hugo new site blog

应用Hugo主题

1git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

可以看到如下文件结构

 1blog/  
 2├── archetypes/  该目录包含新内容的模板，查看[详细资料](https://gohugo.io/content-management/archetypes/)  
 3│   └── default.md  
 4├── assets/  该目录包含通常通过资产管道传递的全局资源。这包括图像、CSS、Sass、JavaScript 和 TypeScript 等资源。查看[详细资料](https://gohugo.io/hugo-pipes/introduction/)  
 5├── content/  该目录包含标记文件（通常是 Markdown）和构成站点内容的页面资源。查看[详细资料](https://gohugo.io/content-management/organization/)  
 6├── data/  该目录包含数据文件（JSON、TOML、YAML 或 XML），用于增强内容、配置、本地化和导航。查看[详细资料](https://gohugo.io/content-management/data-sources/)  
 7├── i18n/  该目录包含多语言站点的翻译表。查看[详细资料](https://gohugo.io/content-management/multilingual/)  
 8├── layouts/  layouts 目录包含用于将内容、数据和资源转换为完整网站的模板。查看[详细资料](https://gohugo.io/templates/)  
 9├── static/  该目录包含的文件将在您构建站点时复制到公共目录。例如：、 和验证站点所有权的文件。在引入页面捆绑包和资产管道之前，该目录还用于图像、CSS 和 JavaScript。  
10├── themes/  该目录包含一个或多个主题，每个主题都位于其自己的子目录中
11└── hugo.toml  站点配置，可能分为多个子目录和文件。对于配置最少的项目或不需要在不同环境中表现不同的项目，在项目根目录中命名的单个配置文件就足够了。查看[详细资料](https://gohugo.io/getting-started/configuration/#configuration-directory)

配置&美化

来到根目录\themes\hugo-theme-stack\exampleSite文件夹下，将hugo.yaml文件复制至根目录下，如果根目录下有别的配置文件如hugo.toml/JSON，将其删掉。然后打开hugo.yaml，根据模板进行修改。
为了打造更符合自己心意的站点，可能需要diy很多配置，所以可以将主题的资源复制到个人站点。在根目录文件夹下，cmd命令：

1xcopy themes\hugo-theme-stack\archetypes archetypes\ /E /I
2xcopy themes\hugo-theme-stack\assets assets\ /E /I
3xcopy themes\hugo-theme-stack\data data\ /E /I
4xcopy themes\hugo-theme-stack\i18n i18n\ /E /I
5xcopy themes\hugo-theme-stack\layouts layouts\ /E /I

其中favicon网站图标favicon.ico需要放到根目录\static下，然后配置是favicon: /favicon.ico
其中avatar侧栏头像avatar.png需要放到根目录\assets\img下，然后配置是src: img/avatar.png
如果需要搜索和归档栏，需要在主题模板根目录\themes\hugo-theme-stack\exampleSite\content\page中找到对应的.md文件并放到根目录同样的文件夹下如:根目录\content\page\search\index.md并按需修改。
接下来是样式的美化，供参考，根目录\assets\scss下新建custom.scss，并编辑：

  1//----------------------------------------------------
  2// 页面基本配色
  3:root {
  4    // 全局顶部边距
  5    --main-top-padding: 30px;
  6    // 全局卡片圆角
  7    --card-border-radius: 25px;
  8    // 标签云卡片圆角
  9    --tag-border-radius: 8px;
 10    // 卡片间距
 11    --section-separation: 40px;
 12    // 全局字体大小
 13    --article-font-size: 1.8rem;
 14    // 行内代码背景色
 15    --code-background-color: #f8f8f8;
 16    // 行内代码前景色
 17    --code-text-color: #e96900;
 18    // 暗色模式下样式
 19    &[data-scheme="dark"] {
 20      // 行内代码背景色
 21    --code-background-color: #f8f8f814;
 22      // 行内代码前景色
 23    --code-text-color: #e96900;
 24      // 暗黑模式下背景色
 25    //--body-background: #000;
 26      // 暗黑模式下卡片背景色
 27    //--card-background: hsl(225 13% 8% / 1);
 28    }
 29  }
 30  //------------------------------------------------------
 31  // 修复引用块内容窄页面显示问题
 32  a {
 33    word-break: break-all;
 34  }
 35
 36  code {
 37    word-break: break-all;
 38  }
 39
 40  //---------------------------------------------------
 41  // 文章封面高度
 42  .article-list article .article-image img {
 43    width: 100%;
 44    height: 200px !important;
 45    object-fit: cover;
 46
 47    @include respond(md) {
 48        height: 250px !important;
 49    }
 50
 51    @include respond(xl) {
 52        height: 285px !important;
 53    }
 54  }
 55
 56  //--------------------------------------------------
 57  // 文章内容图片圆角阴影
 58  .article-page .main-article .article-content {
 59    img {
 60      max-width: 96% !important;
 61      height: auto !important;
 62      border-radius: 8px;
 63    }
 64  }
 65
 66  //------------------------------------------------
 67  // 文章内容引用块样式
 68  .article-content {
 69    blockquote {
 70      border-left: 6px solid #d57b5e !important;
 71      background: #ffefdf;
 72    }
 73  }
 74  [data-scheme="dark"] {
 75    .article-content {
 76      blockquote {
 77        border-left: 6px solid #d57b5e !important;
 78        background: #d57c5e54;
 79      }
 80    }
 81  }
 82  // ---------------------------------------
 83  // 代码块样式修改
 84  .highlight {
 85    max-width: 102% !important;
 86    background-color: var(--pre-background-color);
 87    padding: var(--card-padding);
 88    position: relative;
 89    border-radius: 20px;
 90    margin-left: -7px !important;
 91    margin-right: -12px;
 92    box-shadow: var(--shadow-l1) !important;
 93
 94    &:hover {
 95      .copyCodeButton {
 96        opacity: 1;
 97      }
 98    }
 99
100    // keep Codeblocks LTR
101    [dir="rtl"] & {
102      direction: ltr;
103    }
104
105    pre {
106      margin: initial;
107      padding: 0;
108      margin: 0;
109      width: auto;
110    }
111  }
112
113  // light模式下的代码块样式调整
114  [data-scheme="light"] .article-content .highlight {
115    background-color: #fff9f3;
116  }
117
118  [data-scheme="light"] .chroma {
119    color: #ff6f00;
120    background-color: #fff9f3cc;
121  }
122
123
124
125  //-------------------------------------------
126  // 设置选中字体的区域背景颜色
127  //修改选中颜色
128  ::selection {
129    color: #fff;
130    background: #34495e;
131  }
132
133  a {
134    text-decoration: none;
135    color: var(--accent-color);
136
137    &:hover {
138      color: var(--accent-color-darker);
139    }
140
141    &.link {
142      color: #4288b9ad;
143      font-weight: 600;
144      padding: 0 2px;
145      text-decoration: none;
146      cursor: pointer;
147
148      &:hover {
149        text-decoration: underline;
150      }
151    }
152  }
153
154  //-------------------------------------------------
155  //文章封面高度更改
156  .article-list article .article-image img {
157    width: 100%;
158    height: 150px;
159    object-fit: cover;
160
161    @include respond(md) {
162      height: 200px;
163    }
164
165    @include respond(xl) {
166      height: 305px;
167    }
168  }
169
170  //---------------------------------------------------
171  // 全局页面布局间距调整
172  .main-container {
173    min-height: 100vh;
174    align-items: flex-start;
175    padding: 0 15px;
176    gap: var(--section-separation);
177    padding-top: var(--main-top-padding);
178
179    @include respond(md) {
180      padding: 0 37px;
181    }
182  }
183
184  //--------------------------------------------------
185  //页面三栏宽度调整
186  .container {
187    margin-left: auto;
188    margin-right: auto;
189
190    .left-sidebar {
191      order: -3;
192      max-width: var(--left-sidebar-max-width);
193    }
194
195    .right-sidebar {
196      order: -1;
197      max-width: var(--right-sidebar-max-width);
198
199      /// Display right sidebar when min-width: lg
200      @include respond(lg) {
201        display: flex;
202      }
203    }
204
205    &.extended {
206      @include respond(md) {
207        max-width: 1024px;
208        --left-sidebar-max-width: 25%;
209        --right-sidebar-max-width: 22% !important;
210      }
211
212      @include respond(lg) {
213        max-width: 1280px;
214        --left-sidebar-max-width: 20%;
215        --right-sidebar-max-width: 30%;
216      }
217
218      @include respond(xl) {
219        max-width: 1453px; //1536px;
220        --left-sidebar-max-width: 15%;
221        --right-sidebar-max-width: 25%;
222      }
223    }
224
225    &.compact {
226      @include respond(md) {
227        --left-sidebar-max-width: 25%;
228        max-width: 768px;
229      }
230
231      @include respond(lg) {
232        max-width: 1024px;
233        --left-sidebar-max-width: 20%;
234      }
235
236      @include respond(xl) {
237        max-width: 1280px;
238      }
239    }
240  }
241
242  //-------------------------------------------------------
243  //全局页面小图片样式微调
244  .article-list--compact article .article-image img {
245    width: var(--image-size);
246    height: var(--image-size);
247    object-fit: cover;
248    border-radius: 17%;
249  }
250
251  //----------------------------------------------------
252  //固定代码块的高度
253  .article-content {
254    .highlight {
255        padding: var(--card-padding);
256        pre {
257            width: auto;
258            max-height: 20em;
259        }
260    }
261  }
262
263  //--------------------------------------------------
264  // 修改首页搜索框样式
265  .search-form.widget input {
266    font-size: 1.5rem;
267    padding: 44px 25px 19px;
268  }
269
270
271
272//--------------------------------------------------
273//归档页面双栏
274/* 归档页面两栏 */
275@media (min-width: 1024px) {
276    .article-list--compact {
277      display: grid;
278      grid-template-columns: 1fr 1fr;
279      background: none;
280      box-shadow: none;
281      gap: 1rem;
282
283      article {
284        background: var(--card-background);
285        border: none;
286        box-shadow: var(--shadow-l2);
287        margin-bottom: 8px;
288        border-radius: 16px;
289      }
290    }
291  }

配置说明

hugo.yaml 字段说明：

baseurl 博客的URL

languageCode 语言代码，例如zh-cn

theme 主题

paginate 每页显示的文章数量

title 网站名称

copyright 网站底部的个性化说明

DefaultContentLanguage 默认显示的语言

hasCJKLanguage CJK字数统计，如果编码是 zh-cn，需要改成 true

languages 多语言设置，如不需要只需要把别的多余的语言删除即可

services/googleAnalytics Google分析代码

params/favicon 站点logo

params/footer/since 创建博客的年份

params/dateFormat/published 发布时间格式

params/dateFormat/lastUpdated 最后更新时间格式

params/sidebar/emoji 头像右下角的emoji

params/sidebar/subtitle 位于头像下面的副标题

params/sidebar/avatar/src 头像图片位置，相对 assets/ 目录

menu/social 社交信息配置

上传至GitHub并用Cloudflare Pages部署

GitHub 配置

在 Github 中创建新的代码仓库，由于我们将使用 Cloudflare Pages 部署网站而非直接使用 Github，因此仓库可以设为私密状态，之后将本地代码提交到代码仓库中：

1git init
2git config --global user.name "<用户名>"
3git config --global user.email "<邮箱>"
4git remote add origin https://github.com/<用户名>/<GitHub仓库名>.git
5
6git add --all
7git commit -m "first commit"
8git push origin master

Cloudflare Pages 部署

打开 Cloudflare 官网，并登录你的 Cloudflare 账户。
进入 Workers 和 Pages 页面并点击创建

选择 Pages 选项卡，并点击连接到 git

选择 github 并登录选择刚才创建的代码仓库
配置构建设置：生产分支选择 master，框架预设选择 Hugo，需要注意的是在环境变量这一栏中需要配置 HUGO_VERSION 为当前 Hugo 最新的版本号，如图。

之后点击保存并部署，就可以完成自动化部署配置，此后你对博客的所有更新只需提交到 github 的 master 分支， Cloudflare 将会自动拉取最新代码并进行部署操作。
然后在刚刚创建的 Cloudflare Pages 中的自定义域选项卡中绑定你在cf托管的域名，此后就可以通过你的域名来访问博客啦

新建文章

新建的文章会根据 archetypes/default.md 模板创建在 content/ 目录下

1hugo new content content/post/my-first-post.md

之后在你的 content/post 文件夹中会创建你的第一篇文章，打开后可以发现它的 draft = true，说明它还是一篇草稿，此时即使发布了你的网站，该文章也不会被浏览者看见。但是你可以通过在根目录下cmd命令启动 Hugo 服务，并看到所有草稿文章：

1hugo server -D

编辑时可以构建本地博客实时预览，默认网址 http://localhost:1313/

使用本地图片

后面有用 CloudFlare R2 作图床的教程，不太推荐使用本地图片。

点击显示

Hugo 会根据你内容文件的路径以及 permalinks 配置来生成 URL 和文件夹结构

例如：
1├── post  
2│   └── blog  
3│       └── images  
4│           └── test.png  
5│   └── first.md  
编译以后：
1├── public  
2│   └── p
3│       └── first
4│           └── index.html
5│   └── post 
6│       └── blog  
7│           └── images  
8│               └── test.png  
会导致本地图片的相对路径改变，所以在使用本地图片时应相对 content/ 路径

在 first.md 中使用
1![](/post/blog/images/test.png)

搭建 Cloudflare R2 免费图床

平时写博客都是使用md格式，图片需要有外链。

为什么用 CloudFlare R2

有白嫖额度
免费CDN
绑定域名不需要备案

购买 R2

虽说是购买，但是我们的赛博大善人 Cloudflare 也给了相当多的免费额度，对于一个小博客来说绰绰有余。就算是超出了免费额度，续费也就一角钱一个G，相比腾讯云和阿里云的对象存储要便宜得多。

命名存储桶；
选择一个离博客浏览人群近点的位置，为了方便我就选了亚太地区。
创建存储桶。

创建完存储桶，但是不允许公共 URL 访问的，要进一步的设置。

点击设置：

到设置页面 之后往下拉，找到 R2.dev 子域 ，点击允许访问。

设置完后，就可以在对象页面 添加图片啦。上传后，点击对应的图片文件，如下图：

就能找到 Cloudflare 给你分配的图片链接啦 :bili_062:

在R2存储桶中的设置里找到自定义域，输入你博客域名的子域名，用cdn、static或者你想用什么都行。

使用PicGo上传图片到R2

创建R2 API令牌

然后点击右下角的 创建 API 令牌

务必保存好这两个，下面用到

配置PicGo

安装PicGo详细步骤，看这里

安装S3插件

配置s3

配置完成就能愉快的上传图片啦！让我们大声说： 谢谢赛博菩萨

致谢与参考

感谢

@TheSmallHanCat 于 https://linux.do/t/topic/225250 中帮忙薅的 .me 域名

参考：

Hugo on ifanticの小屋

Hugo-stackの美化 III

谷歌robots

链接样式

文章添加点赞按钮

系列文章

过期提醒

代码变化显示

代码块字体样式更改

个人主页

修复站点名称字体不一致

修复默认的天气api

小记

Hugo 短代码

重点标记

指定颜色文本

文本缩写

文本折叠

高斯模糊

文本黑幕

文字抖动

文字渐变

文本位置

摘录引用

评分样式

键盘样式

卡片样式

仿Github样式

标签块样式

时间轴

图片轮播

瀑布流相册

PDF/PPT插入

手动输入NeoDB条目

居中引用

古书排版

对话样式

脚注

简化版引用

荧光标注

警告框

小记

参考

‫ ‫ ‫

用 CF Workers 加密文章

前言

Hugo Encryptor 加密

Workers 加密

实现原理

使用方法

举例与测试

小结

Hugo-stackの美化 II

移动端显示目录

多语言文字字体修改

碎碎念页面

前置准备

踩坑记录

最后配置

右侧导航栏动画

相关文章卡片缩小

自定义鼠标指针样式

添加背景图片

把滚动条换成进度条

主页添加樱花特效

文章生成日历

左边栏网站副标题换行

右侧分类条优化

设置不能被搜索到的文章

添加标签墙

时光胶囊

左侧导航栏缩小间距

提高自定义字体加载速度

短代码合集

首页欢迎栏

分类和标签页不分页

最后的碎碎念..

加速我的博客

为 Workers 项目使用优选域名

设置自定义域 CNAME 记录至优选域名