↓跳到主要内容

Hugo × Congo 主题博客装修日志 01

·1564 字·4 分钟
博客
目录

前言 #

距离上一次更新博客已经过去两年，这中间经历了太多事情，我却始终没有将其记录下来的动力，写博客之类的事情也便慢慢淡忘了。最近翻看邮箱，发现博客的域名即将过期，此外还有人给我的博客文章留言（虽然是负面的评论），方才想起有此网站的存在。恰好即将步入新的学习阶段，正是重新开始写博客的好时机。相较于过去常写的感悟类文章，技术类的博客可能更符合我读研期间的需求。秉持不破不立的精神（为了找回写博客的热情），我计划对博客进行一次大的重新装修，并记录其中的重要细节，便于日后参考。

Hugo 和 Congo 安装 #

这一部分内容在官方文档中都有详细介绍，可以参考 Installation 和 Getting Started 完成一步到位的 Hugo 和 Congo 安装。

细节调整 #

跟着官方文档走完 start up 流程后，还要对部分细节进行调整，使博客更符合我们的审美。在大多数情况下，可以通过修改配置文件的参数达到想要的效果。如果想要自定义 CSS 样式，还需在 assets/css 下建立相应的 CSS 文件。

更改博客字体 #

找了很多别人的博客作为参考，其中 呆呆不是槑 使用的字体让我眼前一亮：中文使用 汇文正楷、英文使用 Esteban。将字体下载到本地，ttf 文件移动到 static/fonts 文件夹下，在 assets/css/custom.css 中添加如下内容。

@font-face {
    font-family: 'HuiWenZhengKai';
    src: url('/fonts/HuiWenZhengKai.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    /* 只适用于中文字符 */
    unicode-range: U+4E00-9FFF;
}

@font-face {
    font-family: 'Esteban';
    src: url('/fonts/Esteban.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 将代码部分的中文字体改为汇文正楷 */
code {
    font-family: 'HuiWenZhengKai', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* 将正文的英文字体改为 Estaban，中文改为汇文正楷 */
body {
    font-family: 'HuiWenZhengKai', 'Esteban' !important;
}

修改字体大小 #

参考 Congo 文档，在 assets/css/custom.css 中添加：

html {
    font-size: 14.5pt;
}

主页微调 #

设置 params.toml 的 layout 参数为 "profile" 后，即可让主页显示个人资料，但我感觉主标题和副标题的间距太近了。F12 观察该网页的 HTML 后，对 assets/css/custom.css 进行如下修改：

/* 增大 profile 主标题和副标题的间距 */
section.not-prose h2 {
    margin-top: 0.25rem;
}

字数统计不正确 #

如果使用的语言是中文，可能会出现字数统计不准确的情况。只需要在 hugo.toml 中加入一行 hasCJKLanguage = true 即可解决。

自定义主题色 #

可参考 Congo 文档，在 assets/css/schemes 新建 <scheme-name>.css。我个人是感觉 Congo 提供的主题色都差点意思，于是将 Cherry 主题和 Slate 主题结合了一下，采用了 Cherry 的 primary 和 secondary 以及 Slate 的 neutral。

文章目录字体颜色微调 #

在深色模式下，当鼠标移动到目录的文字上方时，背景会被高亮。但此时文字仍然是浅灰色，和背景混在一起，有点影响阅读。修改 assets/css/custom.css，使得鼠标悬停时，文字变为更亮的颜色。

#TableOfContents a:hover {
    color: rgba(var(--color-neutral), var(--tw-text-opacity, 1));
}

自定义网站 icon #

Congo 已经内置了很多主流网站的 icon，可以在主页展示。但是如果想要添加比较冷门的网站，或者是国内的网站，需要自行提供网站 icon。可参考 Congo 文档。

可以从 FontAwesome 获取相应网站的图标，下载成 SVG 格式，注意选择合适的大小。用文本编辑器打开 SVG 文件，在 <path> 里面加入 fill="currentColor"，这是为了让图标的颜色与网站主题保持一致。

开启复制代码 #

若要开启快速复制代码的功能，可以将 config/_default/params.toml 中的 enableCodeCopy 设置为 true。但此时“复制”按钮的字体还是默认的，而且鼠标悬浮时也有与 文章目录字体颜色微调 类似的问题，需要对 assets/css/custom.css 进行修改。

.copy-button {
    font-family: 'HuiWenZhengKai', 'Esteban' !important;
}

.copy-button:hover {
    color: rgba(var(--color-neutral), var(--tw-text-opacity, 1));
}

持续更新中……

修 Bug #

虽说 Hugo 已经是一个较为成熟的博客解决方案，但存在 bug 这种事情还是在所难免。

FOUC #

今天在电脑上安装了 Ubuntu Linux，想看看在 Linux 上打开博客效果如何，结果发现在切换页面的时候，浏览器会先在一个默认的白色背景停留很短的时间，然后再显示深色背景的博客界面。这种“闪烁”的现象非常影响浏览体验。后面发现这种问题出现与否和使用的浏览器有关，之前在 Windows 上用的是 Edge，没有这个问题；而 Linux 默认使用 Firefox 就会有这个问题。

经过搜索，发现这个问题有正式的名字，叫无样式内容闪烁（FOUC，Flash of Unstyled Content），指在网页渲染时，外部样式还没加载好，就以浏览器默认样式短暂地展示了部分内容，等到外部样式加载完成，又恢复正常的过程。详情可参考：Web 性能优化：FOUC

作者
俯瞰风景