这段时间从 Hexo 转到了 Hugo，以前用的主题是 fluid 个人觉得离我预期的简洁（外观也很棒，但个人喜欢偏简洁一点的）、性能还是差点1，不过因为它的可配置性非常高也非常容易配置，也是推荐各位去了解一下的
主题配置用的是 hugo.yaml 格式
修改首页 Icon
默认 icon 是很简洁的黑白图像，可以通过更改
svg达到彩色 icon 需要
在 /<your site name>/hugo.yaml 中配置 socialIcons:
再在位于 /<your site name>/themes/PaperModX/data/svg.toml 更改 svg 属性即可
实例：
twitter =
'''
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#1D9BF0" d="M13.567 5.144c.008.123.008.247.008.371 0 3.796-2.889 8.173-8.172 8.173v-.002A8.131 8.131 0 011 12.398a5.768 5.768 0 004.25-1.19 2.876 2.876 0 01-2.683-1.995c.431.083.875.066 1.297-.05A2.873 2.873 0 011.56 6.348v-.036c.4.222.847.345 1.304.36a2.876 2.876 0 01-.89-3.836 8.152 8.152 0 005.92 3 2.874 2.874 0 014.895-2.619 5.763 5.763 0 001.824-.697 2.883 2.883 0 01-1.262 1.588A5.712 5.712 0 0015 3.656a5.834 5.834 0 01-1.433 1.488z"/>
</svg>
'''
把 <svg> 标签对里的配置更换为自己想要的就行，这里推荐 svgviewer 网站，搜索想要的 icon 名称，它会出来对应 svg 配置代码
配置图标
更改浏览器小图标（favicon）需要一些固定格式的图像，使用 favicon 统一生成网站 统一生成有各个不同需求的图标，解压缩到 /<your site name>/static/ 下，再在 /<your site name>/hugo.yaml 中配置
实例：
assets:
# disableFingerprinting: true
favicon: "/assets/favicon.ico"
favicon16x16: "/assets/favicon-16x16.png"
favicon32x32: "/assets/favicon-32x32.png"
apple_touch_icon: "/assets/apple-touch-icon.png"
safari_pinned_tab: "/assets/safari-pinned-tab.svg"
注意：我还在 static 目录下创建了assets 文件夹，将刚解压缩到了这个文件夹下，格式可为这样
Post 文档窗口颜色和页面颜色
默认的 post 是白色背景，有时候看一篇博客纯白底色有点慌眼睛，个人更喜欢主题首页的颜色
用取色工具取颜色，然后到 /<your site name>/themes/PaperModX/assets/css/core/theme-vars.css 更改
这里有 默认 和 dark 主题的配置，这里我们更改即可
--theme: #F5F5F5; // post 页面颜色
--entry: #f1efef; // post 窗口颜色
彩色标签
在 /<your site name>/themes/PaperModX/assets/css/common/main.css 中添加一下配置内容
.note {
padding: 0.75rem;
border-left: 0.35rem solid;
border-radius: 0.25rem;
margin: 1.5rem 0;
color: var(--text-color);
transition: color 0.2s ease-in-out;
font-size: 0.9rem;
}
.note a {
color: var(--text-color);
transition: color 0.2s ease-in-out;
}
.note *:last-child {
margin-bottom: 0;
}
.note-primary {
background-color: rgba(183,160,224,0.25);
border-color: #6f42c1;
}
.note-secondary,
note-default {
background-color: rgba(187,187,187,0.25);
border-color: #777;
}
.note-success {
background-color: rgba(174,220,174,0.25);
border-color: #5cb85c;
}
.note-danger {
background-color: rgba(236,169,167,0.25);
border-color: #d9534f;
}
.note-warning {
background-color: rgba(248,214,166,0.25);
border-color: #f0ad4e;
}
.note-info {
background-color: rgba(160,197,228,0.25);
border-color: #428bca;
}
.note-light {
background-color: rgba(254,254,254,0.25);
border-color: #0f0f0f;
}
实例：
<div class="note note-primary"> 是颜色块的文字内容</div>
<div class="note note-secondary"> 是颜色块的文字内容</div>
<div class="note note-success"> 是颜色块的文字内容</div>
<div class="note note-warning"> 是颜色块的文字内容</div>
<div class="note note-info"> 是颜色块的文字内容</div>
自带渐变 Mark
使用的是这个 PapermodX 主题，有自带的渐变标记
实例：
==hello world==
hello world
如果不需要这种或想更换颜色在 /<your site name>/themes/PaperModX/assets/css/common/main.css 中更改一下配置
mark {
margin: 0 -0.4em;
padding: 0em 0.4em;
border-radius: 0.8em 0.3em;
background: transparent;
background-image: linear-gradient(
to right,
rgba(255, 225, 0, 0.1),
rgba(255, 225, 0, 0.7) 4%,
rgba(255, 225, 0, 0.3)
);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
注：在这里我注释掉了这段，渲染结果是默认的 html 纯黄色标记
ShortCode
利用 hugo 自带的内容很容易实现一些效果
注意使用的时候把尖括号外的空格删掉
图片插入
Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video
<iframe>’s) to Markdown content. We think this contradicts the beautiful simplicity of Markdown’s syntax.2
e.g.{{ < figure src = "<相对路径>"> }}
也有更多参数可以设置 {{ < figure align=center src="image.jpg" > }}
图片路径：<site name>/static/img/image.png
视频插入
e.g.{{ < youtube <youtube id> >}}
{{s
自定义
可以加入自定义短码达到更多效果，定位到 /<your site name>/themes/layouts/shortcodes 3
创建 bilibili.html, 引用 bilibili 视频效果代码
<!DOCTYPE HTML>
<html lang="en">
<head>
<style type="text/css">
.bilibili_shortcodes {
position: relative;
width: 100%;
height: 0;
padding-bottom: 66%;
margin: auto;
overflow: hidden;
text-align: center;
}
.bilibili_shortcodes iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
<title></title>
</head>
<body>
<div class="bilibili_shortcodes">
<iframe
src="https://player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1&high_quality=1&danmaku=0&as_wide=0{{end}}"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
>
</iframe>
</div>
</body>
</html>
e.g. {{ <bilibili BV1xW4y1a7NK> }}
图片放大
添加以下代码到 themes\PaperMod\layouts\partials\extend_footer.html4
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.8/dist/medium-zoom.min.js"></script>
<script>
const images = Array.from(document.querySelectorAll(".post-content img"));
images.forEach(img => {
mediumZoom(img, {
margin: 0, /* The space outside the zoomed image */
scrollOffset: 10, /* The number of pixels to scroll to close the zoom */
container: null, /* The viewport to render the zoom in */
template: null, /* The template element to display on zoom */
background: 'rgba(0, 0, 0, 0.8)',
});
});
</script>