Hugo博客搭建

Alright，为什么又搭建一次？

• 因为莫名其妙升级了submodule，导致我原来的样式回不去了，苦于先前搭建时没有记录，遂崩溃。

#Hugo安装

Windows安装教程

官网给了三种安装方式，这里使用的是预编译二进制安装。

1. 进入Github release，选择需要的版本以及对应的平台，下载压缩包。

2. 将压缩包解压到合适的目录，设置hugo的环境变量。

3. cmd或powershell运行hugo version，出现hugo版本即为安装成功

#Hugo升级

像我们采用的是二进制安装，那么只需要下载新的二进制文件，然后将老的替换掉即可。Hugo不支持自动升级。

然而，一般不建议升级了，因为新版替换了很多老版本的东西，导致原先的博客文件运行不起来，解决这种事情很麻烦。

#创建网站

1
2
3

hugo new site Oak
cd Oak
git init

在hugo上选择你喜欢的主题，clone代码到theme/路径下，作为项目的submodule

1
2
3
4

git submodule add https://github.com/reuixiy/hugo-theme-meme.git .\themes\meme
rm config.toml && cp themes/meme/config-examples/en/config.toml config.toml
hugo new content helloWorld
hugo server -D

#菜单栏

#作者名

#作者名大小

#菜单选项

分别为：

• 路由
• 显示名
• 权重，位置
• 内部链接(internal)or外部链接(external)如跳转外部友链
• 小图标

#首页诗词

四种布局，自己选择

#文章列表

#宽度

#时间格式

#数字年份，英文月份，按月分割

#文章

#标题底部说明（文章元数据）

#元数据显示哪些内容

#目录

#标题锚点（让标题更清晰）

#文章底部tag

#文章脚及其竖线

#页脚

#仅在主页显示

#去掉花里胡哨的内容

#代码块

#取消滚动条

#字体

#字号（网站所有字的）

#样式

字体的样式对于不懂的人来说十分滴险恶，我运用的字体如下：

稍微说明下品牌栏和菜单栏，分别是菜单栏的左边作者名称与其右边的字两个部分。

• Cinzel Decorative仅适用于英文，古罗马风格的碑文字体，适用于品牌Logo

• I.MingCP

• Noto Serif SC思源宋体

#Issues-1 Not Working

但是你照我的设置设置完了之后，得到的效果却是这样的：

因为网络字体链接没有设置好，这是很fuck up的一个点：

https://fonts.googleapis.com/css2?
family=Noto+Serif+TC:wght@700
&family=Noto+Serif+SC:wght@700
&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700
&family=Cinzel+Decorative:wght@700
&display=swap

https://fonts.googleapis.com/css2?
family=Noto+Serif+TC:wght@400;500;700
&family=Noto+Serif+SC:wght@400;500;700
&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700
&family=Cinzel+Decorative:wght@700
&display=swap

如果没有仔细看过这些字体的链接，你现在可以对比一下这两个：

• 前者思源宋体字重(wght) 均为700，只有粗体这一种形式，所以你的文章全是粗体。
• 后者有400、500、700三种字重，可以划分粗细。

同时如果你的艺术字体没有生效，先看看你的网络链接中是否包含这个艺术字体。

#Issues-2 Why More Than One Font

留意到一行我们有时会写多个字体，这是浏览器的字体回退机制：

1

font-family: 'Noto Serif SC', serif;

• 如果Noto Serif SC可用，就用它。
• 如果Noto Serif SC不可用，就用默认的serif字体（比如 Times New Roman）。

#定制

#导航栏

留意到我们导航栏的字体有点小，对着字体右键检查：

可以看到font-size只有80%，所以字体才会那么小，可以在全局查一下font-size：

不建议在主题文件中直接修改样式，不利于主题之后的更新，所以在hugo的项目文件夹下新建一个_custom.scss文件，再进行修改，框架会覆盖掉主题的配置，采用自己的配置：

custom后的效果：

#菜单栏名字

菜单栏品牌名字也采用了自己的定制样式：

#超链接

留意到文章的超链接不够清楚，都是这种淡淡的灰色：

首先同样是右键检查自己的页面，发现其属于.post-body a属性：

text-decoration：是超链接的装饰，比如这里的下划线
text-decoration-color：是下划线的颜色

你想要获得某个网站的颜色，右键检查某个网站：

再看他hover时候的颜色，右键检查之后点击右上角选择其激活的状态,选中:hover：

得到了这两个颜色之后就可以在自己的_custom.scss中进行修改了：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.post-body {
    a {
        color: #007bff;
        /* 亮蓝色 */
        text-decoration-color: #007bff;
        /* 亮蓝色 */

        &:hover {
            color: #0056b3;
            /* 深蓝色，增强对比 */
            text-decoration-color: #0056b3;
            /* 深蓝色，增强对比 */
        }
    }
}

这样修改完之后发现标题也都变了蓝色。

同样右键检查标题：

如果不知道怎么修改_custom.scss可以看下主题里面是怎么写的，这里发现有h1和text-decoration字段，可以在vscode全局搜索一下：

可以看到这两个字段同时在_base.css里面出现了，那就仿造他的格式在_custom.css中写自己的样式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// _custom.scss
h1,
h2,
h3,
h4,
h5,
h6 {
    a {
        color: var(--color-contrast-higher) !important;
    }
}

最终效果：