Hugo Stack主题修改
Stack 主题修改记录。
前言
上一篇文章介绍了如何部署 Hugo 博客，这里针对 Stack 主题的修改做一些记录。
准备
首先在博客根目录下的 assets 下创建一个名为 scss 的文件夹，然后在 scss 文件夹里创建一个名为 custom.scss 的文件，最终效果为~blog/assets/scss/custom.scss，创建好文件后，对于主题的大部分样式魔改都将写进这个 custom.scss，其中有很多冗余的代码。
整体细节调整
1// ~\blog\assets\scss\custom.scss
2// 页面基本配色
3:root {
4 // 全局顶部边距
5 --main-top-padding: 30px;
6 // 全局卡片圆角
7 --card-border-radius: 12px;
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 --body-background: #F5F5F5;
20
21 // 暗色模式下样式
22 &[data-scheme="dark"] {
23 // 行内代码背景色
24 --code-background-color: #ff6d1b17;
25 // 行内代码前景色
26 --code-text-color: #e96900;
27 // 暗黑模式下背景色
28 --body-background: #303030;
29 // 暗黑模式下卡片背景色
30 --card-background: #424242;
31 // 代码块背景色
32 }
33 // 亮色模式下样式
34 &[data-scheme="light"] {
35 .highlight,
36 .chroma {
37 background-color: #FFF9F3;
38 }
39 }
40}
41
42// 修复引用块内容窄页面显示问题
43 a {
44 word-break: break-all;
45 }
46
47 code {
48 word-break: break-all;
49 }
50
51 // 文章内容图片圆角阴影
52 .article-page .main-article .article-content {
53 img {
54 max-width: 96% !important;
55 height: auto !important;
56 border-radius: 8px;
57 }
58 }
59
60// 文章内容引用块样式
61 .article-content {
62 blockquote {
63 border-left: 6px solid #5E7092 !important;
64 }
65 }
66// 设置选中字体的区域背景颜色
67 ::selection {
68 color: #fff;
69 background: #34495e;
70 }
71
72 a {
73 text-decoration: none;
74 color: var(--accent-color);
75
76 &:hover {
77 color: var(--accent-color-darker);
78 }
79
80 &.link {
81 color: #4288b9ad;
82 font-weight: 600;
83 padding: 0 2px;
84 text-decoration: none;
85 cursor: pointer;
86
87 &:hover {
88 text-decoration: underline;
89 }
90 }
91 }
92
93//全局页面小图片样式微调
94 .article-list--compact article .article-image img {
95 width: var(--image-size);
96 height: var(--image-size);
97 object-fit: cover;
98 border-radius: 17%;
99 }
代码块样式调整
1// 代码块样式修改
2 .highlight {
3 max-width: 102% !important;
4 background-color: var(--pre-background-color);
5 padding: var(--card-padding);
6 position: relative;
7 border-radius: 13px;
8 margin-left: -7px !important;
9 margin-right: -12px;
10 box-shadow: var(--shadow-l1) !important;
11
12 &:hover {
13 .copyCodeButton {
14 opacity: 1;
15 }
16 }
17
18 // keep Codeblocks LTR
19 [dir="rtl"] & {
20 direction: ltr;
21 }
22
23 pre {
24 margin: initial;
25 padding: 0;
26 margin: 0;
27 width: auto;
28 }
29 }
代码块引入 Mac 样式
1//为代码块顶部添加macos样式
2.article-content {
3 .highlight:before {
4 content: "";
5 display: block;
6 background: #fc625d;
7 border-radius: 50%;
8 box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
9 height: 12px;
10 width: 12px;
11 margin-bottom: 5px;
12 }
13}
14//--------------------------------------------------
首页添加欢迎样式
在博客的根目录下新建一个文件夹名为 layouts (默认生成站点时也生成了，没有的话手动创建),之后将 ~\blog\themes\hugo-theme-stack\layouts\index.html 下的文件复制到刚刚创建的 layouts 文件夹里,这意味着主题 根目录下的 layouts文件夹里的 index.html将覆盖原主题目录下对应的文件，然后在复制出来的index.html修改为以下内容：
1<!-- ~\site\blog\layouts\index.html -->
2{{ define "main" }}
3 {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
4 {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
5 {{ $filtered := ($pages | intersect $notHidden) }}
6 {{ $pag := .Paginate ($filtered) }}
7<!-- ---这是我们添加进去的--------- -->
8<!-- 首页欢迎字幅板块 -->
9<div class="welcome">
10 <p style="font-size: 2rem; text-align: center; font-weight: bold">
11 <span class="shake">👋</span>
12 <span class="jump-text1" > Welcome</span>
13 <span class="jump-text2"> To </span>
14 <span class="jump-text3" style="color:#e99312">Tom</span>
15 <span class="jump-text4" style="color:#e99312">'s</span>
16 <span class="jump-text5" style="color:#e99312">Blog</span>
17 </p>
18</div>
19<!-- ------首页欢迎字幅板块------ -->
20<!-- 下面也是主题自带的,只展示一部分,其余省略 -->
21
22 <section class="article-list">
23 {{ range $index, $element := $pag.Pages }}
24 {{ partial "article-list/default" . }}
25 {{ end }}
26 </section>
27
28 {{- partial "pagination.html" . -}}
29 {{- partial "footer/footer" . -}}
30{{ end }}
31
32{{ define "right-sidebar" }}
33 {{ partial "sidebar/right.html" (dict "Context" . "Scope" "homepage") }}
34{{ end }}
接下来在 custom.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
75@keyframes jump {
76 0% {
77 transform: translateY(0);
78 }
79 50% {
80 transform: translateY(-20px);
81 }
82 100% {
83 transform: translateY(0);
84 }
85}
归档页双栏
1// 归档页面两栏
2@media (min-width: 1024px) {
3 .article-list--compact {
4 display: grid;
5 grid-template-columns: 1fr 1fr;
6 background: none;
7 box-shadow: none;
8 gap: 1rem;
9
10 article {
11 background: var(--card-background);
12 border: none;
13 box-shadow: var(--shadow-l2);
14 margin-bottom: 8px;
15 border-radius: 16px;
16 }
17 }
18}
19//归档页面卡片缩放
20.article-list--tile article {
21 transition: .6s ease;
22}
23
24.article-list--tile article:hover {
25 transform: scale(1.03, 1.03);
26}
链接页三栏
1// 友情链接三栏
2@media (min-width: 1024px) {
3 .article-list--compact.links {
4 display: grid;
5 grid-template-columns: 1fr 1fr 1fr;
6 background: none;
7 box-shadow: none;
8 gap: 1rem;
9
10 article {
11 background: var(--card-background);
12 border: none;
13 box-shadow: var(--shadow-l2);
14 margin-bottom: 8px;
15 border-radius: var(--card-border-radius);
16
17 &:nth-child(odd) {
18 margin-right: 8px;
19 }
20 }
21 }
22}
左侧栏
头像旋转
1/*头像旋转动画*/
2.sidebar header .site-avatar .site-logo {
3 transition: transform 1.65s ease-in-out; //旋转时间
4 &:hover {
5 transform: rotate(360deg); //旋转角度为360度
6 }
7 }
右侧栏
标签栏
1/*右侧标签放大动画*/
2.tagCloud .tagCloud-tags a {
3 border-radius: 10px; //圆角
4 font-size: 1.4rem; //字体大小
5 font-family: var(--article-font-family); //字体
6 transition: transform 0.3s ease, background 0.3s ease; //动画时间
7 &:hover {
8 background: #b7d2ea7b; //背景颜色
9 transform: translateY(-5px); //上移
10 }
11}
归档栏
1/* 归档年份放大动画 */
2.widget.archives .archives-year {
3 &:first-of-type {
4 border-top-left-radius: var(--card-border-radius);
5 border-top-right-radius: var(--card-border-radius);
6 }
7
8 &:last-of-type {
9 border-bottom-left-radius: var(--card-border-radius);
10 border-bottom-right-radius: var(--card-border-radius);
11 }
12
13 &:hover {
14 background-color: #b7d2ea7b;
15 }
16
17 &:not(:first-of-type):not(:last-of-type) {
18 border-radius: 0; /* 确保中间的元素没有圆角 */
19 }
20}
搜索栏
1// 修改首页搜索框样式
2.search-form.widget input {
3 font-size: 1.5rem;
4 padding: 44px 25px 19px;
5}
6
7//搜索菜单动画
8.search-form.widget {
9 transition: transform 0.6s ease;
10 &:hover {
11 transform: scale(1.1, 1.1);
12 }
13}
修改字体为鸿蒙字体
字体的修改主题作者提供了模板，链接 点击这里。
首先将鸿蒙字体保存到 Github 或其他 CDN 存储中，字体链接可以在 这里 找到。然后修改 ~\blog\layouts\partials\head\custom.html 文件，添加以下内容：
1<style>
2 :root {
3 /* 在style中,apple系统优先调用系统字体，其余优先调用 HarmonyOS_Sans_SC_Medium */
4 --sys-font-family: -apple-system, "HarmonyOS_Sans_SC_Medium", Georgia, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
5 --code-font-family: "JetBrainsMono Regular", Menlo, Monaco, Consolas, "Courier New";
6 --article-font-family: -apple-system, "HarmonyOS_Sans_SC_Medium", var(--base-font-family);
7 }
8</style>
9<script> // 正文自重300，标题字重700
10 (function () {
11 const customFont = document.createElement('link');
12 customFont.href = "https://cdn.jsdmirror.com/gh/tom2almighty/files@master/fonts/font.css"; // css文件地址
13
14 customFont.type = "text/css";
15 customFont.rel = "stylesheet";
16
17 document.head.appendChild(customFont);
18 }());
19</script>
记得在
font.css文件中修改字体文件地址。
页面布局调整
1// 页面布局调整
2.container {
3 &.extended{
4 @include respond(md) {
5 max-width: 1024px;
6 --left-sidebar-max-width: 20%;
7 --right-sidebar-max-width: 25%;
8 }
9
10 @include respond(lg) {
11 max-width: 1280px;
12 --left-sidebar-max-width: 20%;
13 --right-sidebar-max-width: 25%;
14 }
15
16 @include respond(xl) {
17 max-width: 1536px;
18 --left-sidebar-max-width: 20%;
19 --right-sidebar-max-width: 20%;
20 }
21 }
22}
菜单栏样式
1// 菜单栏样式
2// 下拉菜单改圆角样式
3.menu {
4 padding-left: 0;
5 list-style: none;
6 flex-direction: column;
7 overflow-x: hidden;
8 overflow-y: scroll;
9 flex-grow: 1;
10 font-size: 1.6rem;
11 background-color: var(--card-background);
12
13 box-shadow: var(--shadow-l2); //改个阴影
14 display: none;
15 margin: 0; //改为0
16 border-radius: 10px; //加个圆角
17 padding: 30px 30px;
18
19 @include respond(xl) {
20 padding: 15px 0;
21 }
22
23 &,
24 .menu-bottom-section {
25 gap: 30px;
26
27 @include respond(xl) {
28 gap: 25px;
29 }
30 }
31
32 &.show {
33 display: flex;
34 }
35
36 @include respond(md) {
37 align-items: flex-end;
38 display: flex;
39 background-color: transparent;
40 padding: 0;
41 box-shadow: none;
42 margin: 0;
43 }
44
45 li {
46 position: relative;
47 vertical-align: middle;
48 padding: 0;
49
50 @include respond(md) {
51 width: 100%;
52 }
53
54 svg {
55 stroke-width: 1.33;
56
57 width: 20px;
58 height: 20px;
59 }
60
61 a {
62 height: 100%;
63 display: inline-flex;
64 align-items: center;
65 color: var(--body-text-color);
66 gap: var(--menu-icon-separation);
67 }
68
69 span {
70 flex: 1;
71 }
72
73 &.current {
74 a {
75 color: var(--accent-color);
76 font-weight: bold;
77 }
78 }
79 }
80}
滚动条美化
首先将 ~/themes/hugo-theme-stack/assets/scss/partials/base.scss 文件复制到根目录同名文件夹下，然后将其中 Firefox 的滚动条代码注释或删除掉：
1/* scrollbar styles for Firefox */
2* {
3 scrollbar-width: auto;
4 scrollbar-color: var(--scrollbar-thumb) transparent;
5}
6/**/
在 custom.scss 中添加代码：
1/*滚动条样式*/
2//菜单滚动条美化
3.menu::-webkit-scrollbar {
4 display: none;
5}
6
7// 全局滚动条美化
8html {
9 ::-webkit-scrollbar {
10 width: 20px;
11 }
12
13 ::-webkit-scrollbar-track {
14 background-color: transparent;
15 }
16
17 ::-webkit-scrollbar-thumb {
18 background-color: #d6dee1;
19 border-radius: 20px;
20 border: 6px solid transparent;
21 background-clip: content-box;
22 }
23
24 ::-webkit-scrollbar-thumb:hover {
25 background-color: #6a797c;
26 }
27}
豆瓣卡片
在 ~/layouts/shortcodes/ 文件夹下创建新文件 douban.html，写入代码：
1{{ $dbUrl := .Get 0 }}
2{{ $dbApiUrl := "https://neodb.social/api/catalog/fetch?url=" }}
3{{ $dbFetch := getJSON $dbApiUrl $dbUrl }}
4
5{{ if $dbFetch }}
6 {{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
7 <div class="db-card">
8 <div class="db-card-subject">
9 <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ $dbFetch.cover_image_url }}"></div>
10 <div class="db-card-content">
11 <div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
12 <div class="rating"><span class="allstardark"><span class="allstarlight" style="width:{{ mul 10 $itemRating }}%"></span></span><span class="rating_nums">{{ $itemRating }}</span></div>
13 <div class="db-card-abstract">{{ $dbFetch.brief }}</div>
14 </div>
15 <div class="db-card-cate">{{ $dbFetch.category }}</div>
16 </div>
17 </div>
18{{else}}
19 <p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>
20{{end}}
然后在 custom.scss 写入样式代码：
1/* db-card -------- start */
2.db-card {
3 margin: 2rem 3rem;
4 background: #fafafa;
5 border-radius: 8px;
6 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25);
7}
8
9.db-card-subject {
10 display: flex;
11 align-items: flex-start;
12 line-height: 1.6;
13 padding: 12px;
14 position: relative;
15}
16
17.db-card-content {
18 flex: 1 1 auto;
19}
20
21.db-card-post {
22 width: 96px;
23 margin-right: 15px;
24 display: flex;
25 flex: 0 0 auto;
26}
27
28.db-card-title {
29 margin-bottom: 5px;
30 font-size: 18px;
31}
32
33.db-card-title a {
34 text-decoration: none !important;
35}
36
37.db-card-abstract,
38.db-card-comment {
39 font-size: 14px;
40 overflow: auto;
41 max-height: 7rem;
42}
43
44.db-card-cate {
45 position: absolute;
46 top: 0;
47 right: 0;
48 background: #f99b01;
49 padding: 1px 8px;
50 font-size: small;
51 font-style: italic;
52 border-radius: 0 8px 0 8px;
53 text-transform: capitalize;
54}
55
56.db-card-post img {
57 width: 96px !important;
58 height: 96px !important;
59 border-radius: 4px;
60 -o-object-fit: cover;
61 object-fit: cover;
62}
63
64.rating {
65 margin: 0 0 5px;
66 font-size: 13px;
67 line-height: 1;
68 display: flex;
69 align-items: center;
70}
71
72.rating .allstardark {
73 position: relative;
74 color: #f99b01;
75 height: 16px;
76 width: 80px;
77 background-size: auto 100%;
78 margin-right: 8px;
79 background-repeat: repeat;
80 background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
81}
82
83.rating .allstarlight {
84 position: absolute;
85 left: 0;
86 color: #f99b01;
87 height: 16px;
88 overflow: hidden;
89 background-size: auto 100%;
90 background-repeat: repeat;
91 background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);
92}
93
94[data-scheme="dark"] {
95 .db-card {
96 background: #212121;
97 }
98 .db-card-abstract,
99 .db-card-comment {
100 color: #e6e6e6;
101 }
102 .db-card-cate {
103 color: #e6e6e6;
104 }
105 .rating_nums{
106 color: #e6e6e6
107 }
108}
109@media (max-width: 550px) {
110 .db-card {
111 margin: 0.8rem 1rem;
112 }
113
114 .db-card-comment {
115 display: none;
116 }
117}
118/* db-card -------- end */
接下来就可以在文章中添加短代码，语法如下(将大括号中间的 \ 去掉)：
1{\{< douban "https://book.douban.com/subject/35496106/">}\}
2{\{< douban "https://movie.douban.com/subject/35267208/">}\}
样式预览：
{{< douban “https://book.douban.com/subject/35496106/">}} {{< douban “https://movie.douban.com/subject/35267208/">}}
Footer 添加 Shields.io Badges
首先新建
~\layouts\partials\footer\badge.html文件，名字可以随意，后续引用更改即可。将主题文件夹下的
~\themes\hugo-theme-stack\layouts\partials\footer\footer.html复制到根目录同名文件夹下，在</footer>上一行添加：
1{{ partial "footer/badge.html" . }}
直接在
/footer/custom.html会出现徽章重复的问题，原因未知。
- 在
badge.html中添加自己的徽标即可，下面是参考，可以在 Shields.io 创建自己的样式。
1<!-- custom.html -->
2<div class="custom-badges">
3 <a href="https://gohugo.io/" target="_blank">
4 <img src="https://img.shields.io/badge/Frame-Hugo-deeppink?style=flat&logo=hugo" title="博客框架为 Hugo">
5 </a>
6 <a href="https://blogcdn.net/" target="_blank">
7 <img src="https://img.shields.io/badge/CDN-blogcdn-orange?style=flat&logo=c" title="本站使用 blogcdn 为静态资源提供 CDN加速">
8 </a>
9 <a href="https://vercel.com/" target="_blank">
10 <img src="https://img.shields.io/badge/Host-Vercel-gray?style=flat&logo=vercel" title="本站托管于 Vercel">
11
12 </a>
13 <a href="https://github.com" target="_blank">
14 <img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站源码托管于 GitHub">
15
16 </a>
17 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">
18 <img src="https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-red?style=flat&logo=creative-commons" title="本站内容采用 CC BY-NC-SA 4.0 国际许可协议">
19 </a>
20</div>
参考
最后修改于 2024-03-21
