Hugo主题个性化

前言

最近总觉得自己的博客看着有点平淡，想魔改一下布局，于是有了这篇博客

Hugo是一个模块化的主题，因此我们可以方便地覆盖官方提供的文件，以达到不同的视觉效果，其中更改的路径是：

更改layout:

·head: layouts/partials/head/custom.html

·footer: layouts/partials/footer/custom.html

更改scss:

·assets/scss/custom.scss

修改背景

自定义js

在footer/custom.html中写入以下内容，其中src是背景源文件URL，可以自己去找一个喜欢的js文件：

1
2
3
4
5
6
7
8
9


<script
src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/ribbon.min.js"
integrity="sha384-UEK8ZiP3VgFNP8KnKMKDmd4pAUAOJ59Y2Jo3ED2Z5qKQf6HLHovMxq7Beb9CLPUe"
crossorigin="anonymous"
size="300"
alpha="0.6"
zindex="-1"
defer
></script>

示例URL的背景长这样：

当然，也可以自定义一个js文件来实现更丰富的背景自定义效果，同样是在footer/custom.html中写入以下语句

background/custom.js是你自定义的背景文件位置

1

<!--<script src={{ (resources.Get "background/custom.js").Permalink }}></script>-->

自定义背景图

除了通过js文件来自定义背景之外，还可以直接自定义背景图

首先准备一张自己喜欢的背景图，放到assets/background文件夹中（可以是assets的任意子路径）
在主题文件夹的layouts/partials/footer/custom.html中写入以下内容：

1
2
3
4
5
6
7


<style>
  body {
    background: url({{ (resources.Get "background/背景图片名").Permalink }}) no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
  }
</style>

然后就可以显示自定义的背景啦

如果报错显示解析出问题，重新用hugo server -D启动一下服务器就好了

这种自定义方法会覆盖系统的暗色模式效果，所以如果想要保留暗色模式，这种方法就不是很好用了

文章配图

Hugo支持多种配图方式

单独配图

你可以对每个图片单独配图，只需将图片放在文章的文件夹里，并在文章的index.md最上方的参数中添加image: 图片名即可

如果你不想增加重复的图片，只需将图片放在post文件夹中，并将index.md的参数更改为image: post/图片名

动态配图

如果没有特别喜欢的图片，又不想让博客空空的，可以采用封面随机生成的方式来美化文章的卡片

只需对文章的模板进行设置即可，打开archetypes/default.md，修改image字段的内容：

1
2
3


title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
image: https://picsum.photos/800/600.webp?random={{ substr (md5 (.Date)) 4 8 }}

这里使用了 Lorem Picsum 的接口，可以在生成新文章时得到一张随机的图片

想了解更多内容可前往 Lorem Picsum

当然，也可以在这里将image字段的值修改为你想要的图片，这样每篇文章的封面图都会是这张图片

修改图片的大小与布局

在md中可以引入一些html的语法来对图片做精细化的处理

图片居中：

1
2
3


<div align="center">
    <img src="img.png">
</div>

修改图片大小

1
2
3


<div align="center">
   <img src="img.png" alt="img.png" width="300" height="200">
</div>

显示图注

1
2
3
4
5
6


<div align="center">
    <figure>
        <img src="img.png" alt="img.png">
        <figcaption>这是图片的图注</figcaption>
    </figure>
</div>

未完待续……

鸣谢

本文自定义背景来自UP主叶柳星，非常感谢~

同时感谢以下博主的经验分享：