目录

Hugo系列(6) - LoveIt主题美化:添加自定义CSS和JavaScript

背景

本博客使用的是Hugo的LoveIt主题,本文也是基于该主题而写的,不过Hugo的美化步骤应该大同小异,版本如下:

1
2
3
4
5
hexo: 3.8.0

hugo: v0.74.2-48565DE6 windows/amd64 BuildDate: 2020-07-17T17:22:50Z

LoveIt: v0.2.10

准备工作

首先在站点根目录下创建一个自定义的CSS文件:\static\css\custom.css,然后创建一个自定义的JavaScript文件:\static\js\custom.js

接着把自定义的文件链接添加到主题的渲染模板文件里,不同的主题渲染模板文件可能不一样,不过这两个自定义文件的添加位置如下所示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<html>
  <head>
    ...
    <link rel="stylesheet" href="/css/custom.css">
  </head>
  <body>
    ...
    <script type="text/javascript" src="/js/custom.js"></script>
  </body>
</html>

自定义的CSS文件要尽量添加在head标签的最后面,自定义的JavaScript文件则是添加在body标签的最后面,这样可以防止样式被其他文件覆盖,并且不会因为JavaScript文件假装太久导致页面长时间的空白。

另外值得一提的是,主题的页面渲染文件是存放在themes目录下的layouts里的,而在站点根目录下同样存在layouts目录。Hugo在渲染页面时优先读取根目录下的layouts里的模板,所以可以利用这个特点来美化主题。只需要把想修改的主题模板文件拷贝到根目录下的layouts目录并进行修改,这样就可以不改动原本的主题文件。

添加自定义的custom.css

对于LoveIt主题,custom.css添加在\themes\LoveIt\layouts\partials\head\link.html里。首先把该文件拷贝到根目录下的\layouts\partials\head\link.html,然后把自定义的CSS文件的路径添加在自带的主题样式文件style.min.css下面:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{{- /* normalize.css */ -}}
{{- $source := $cdn.normalizeCSS | default "lib/normalize/normalize.min.css" -}}
{{- $style := dict "Source" $source "Fingerprint" $fingerprint -}}
{{- partial "plugin/style.html" $style -}}

{{- /* style.min.css */ -}}
{{- $style := dict "Source" "css/style.scss" "Fingerprint" $fingerprint -}}
{{- $options := dict "targetPath" "css/style.min.css" "enableSourceMap" true -}}
{{- $style = dict "Context" . "ToCSS" $options | merge $style -}}
{{- partial "plugin/style.html" $style -}}

{{- /* custom css */ -}}
<link rel="stylesheet" href="/css/custom.css">

这是我的custom.css文件,有兴趣的可以看看。

添加自定义的custom.js

对于LoveIt主题,custom.js添加在\themes\LoveIt\layouts\_default\baseof.html里。首先把该文件拷贝到根目录下的\layouts\_default\baseof.html,然后把自定义的JavaScript文件添加在body标签的最后面:

1
2
3
4
5
6
7
<html>
    <body>
        ...
		{{- /* 自定义的js文件 */ -}}
		<script type="text/javascript" src="/js/custom.js"></script>
    </body>
</html>

如果有其他的JavaScript文件要引入,加在一样的地方就行,但是要放在自定义的custom.js之前。这是我的custom.js文件,有兴趣的可以看看。