集成谷歌AdSense

按照AdSense后台谷歌的说明新增ads.txt文件，然后放到hugo项目根目录的/static文件夹下面，

在hugo站点的根目录的./hugo-blog/layouts/partials/google/路径新增文件ads.html，填入如下内容：

1
2

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3538741509751499"
 crossorigin="anonymous"></script>

然后定位到你的主题的一个叫做 themes/hugo-PaperMod/layouts/partials/head.html的文件打开， 在该文件的末尾新增如下内容：

1
2

<!-- ads -->
{{ partial "google/ads" . }}

集成artalk评论

在artalk的官方文档中找到Artalk.css和Artalk.js文件的cdn地址然后下载到本地，在hugo项目根目录的/static文件夹下面新建一个叫 artalk的文件夹，然后把前述两个静态文件放进这个文件夹

创建模板文件 /主题目录/layouts/partials/comment/artalk.html，文件内容如下：

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

<link href="/artalk/Artalk.css" rel="stylesheet">
<script src="/artalk/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>

<script>
  Artalk.init({
    el:        '#Comments',
    pageKey:   '{{ .Permalink }}',
    pageTitle: '{{ .Title }}',
    server:    '{{ $.Site.Params.artalk.server }}',
    site:      '{{ $.Site.Params.artalk.site }}',
    // ...你的其他配置
  })
</script>

文章页模板 /主题目录/layouts/_default/single.html 合适的位置添加：

1
2
3

<div class="article-comments">
  {{- partial "comment/artalk" . -}}
</div>

具体位置为single.html文件的{{- if (.Param “comments”) }}判断体中，完整的代码如下：

1
2
3
4
5

{{- if (.Param "comments") }}
  <div class="article-comments">
  {{- partial "comment/artalk" . -}}
</div>
  {{- end }}

然后在 Hugo 配置文件中添加如下内容：

1
2
3
4

params:
  artalk:
    server: 'https://artalk.sharpgan.com'
    site: '阿甘博客'

解决搜索重复的问题

找到主题的文件./themes/hugo-PaperMod/layouts/_default/index.json，将如下内容：

1

{{- range .Site.RegularPages -}}

替换为如下内容:

1

{{- range where .Site.RegularPages "Type" "not in" (slice "page" "json") -}}

自定义footer页脚

将主题的./themes/hugo-PaperMod/layouts/partials/footer.html文件拷贝到hugo项目的根目录的./layouts/partials/ 文件夹中去，然后将<footer class="footer"> </footer>标签中的内容替换为如下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<footer class="footer">
    <font color='#808695'> COPYRIGHT © 2018-2023 SharpG.的博客 </font> <a href="https://icp.gov.moe/?keyword=20230078"
        target="_blank" rel="noopener noreferrer nofollow">
        <font color='#808695'>萌ICP备20230078号 </font>
    </a></br>
    <font color='#808695'>本站由 <a href="https://app.cloudcone.com/?ref=10464" rel="noopener noreferrer nofollow"
            target="_blank">Cloudcone</a> 提供计算服务, 由 <a href="https://www.cloudflare.com/"
            rel="noopener noreferrer nofollow" target="_blank">Cloudflare</a> 提供全站加速服务。</font>
    <br>
    <span id="span" style="color:#808695"></span>
    <script type="text/javascript">
        function runtime() {
            // 初始时间，日/月/年 时:分:秒
            X = new Date("12/07/2018 12:50:18");
            Y = new Date();
            T = (Y.getTime() - X.getTime());
            M = 24 * 60 * 60 * 1000;
            a = T / M;
            A = Math.floor(a);
            b = (a - A) * 24;
            B = Math.floor(b);
            c = (b - B) * 60;
            C = Math.floor((b - B) * 60);
            D = Math.floor((c - C) * 60);
            //信息写入到DIV中
            span.innerHTML = "本站已运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
        }
        setInterval(runtime, 1000);
    </script>
    </br>
    <div id="cc-myssl-id" style="text-align: center;display:inline;">
        <div title="MySSL安全签章" id="myssl_seal"
            onclick="window.open('https://myssl.com/seal/detail?domain=sharpgan.com','MySSL安全签章','height=800,width=470,top=0,right=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')"
            style="text-align: center;display: inline-block"><img src="/img/seal.png" alt="myssl.com-MySSL安全签章"
                style="width: 100px; height: auto; cursor: pointer"></div>
    </div>
    <div id="written-by-human-id" style="text-align: center;display:inline;">
        <div title="written by human" id="written-by-human" style="text-align: center;display: inline-block"><a href="https://notbyai.fyi/" rel="noopener noreferrer nofollow" target="_blank"><img
                src="/img/Written-By-Human-Not-By-AI-Badge-white.png" alt="written by human badge" style="width: 100px; height: auto; cursor: pointer"></a></div>
    </div>
</footer>

魔改代码高亮

我折腾了大半个下午按照各种官方文档和GitHub issue里面的办法都没有成功更换主题，甚至出现了本地hugo server渲染的有高亮主题到了服务器上编译成静态html又没有了，没有的很彻底，半点颜色都没有。

最终在这个博客找到了解决办法, 在这个基础上我又优化了一下给highlightjs指定了字体，过程如下：

找到主题的如下两个文件：

  • hugo-blog/themes/hugo-PaperMod/assets/js/highlight.min.js
  • hugo-blog/themes/hugo-PaperMod/assets/css/hljs/an-old-hope.min.css

直接删除掉，然后到这里重新下载一下highlight.min.js和主题的css，我这里以dracula主题为例，即是dracula.min.css,下载完之后把前者js文件还放到原来删除的那个路径下，后者css文件重命名为an-old-hope.min.css也放到原来的文件路径。

紧接着我们来到hugo-blog/themes/hugo-PaperMod/assets/css/extended/blank.css文件中写入如下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

:root {
    --hljs-bg: #282a36;
}
.dark {
    --hljs-bg: #282a36;
}

pre > code {
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

解释一下上面的作用：前两行是把日间和夜间模式的代码高亮背景统一设置为了dracula主题的默认颜色，最后一行指定一下字体，不然默认的字体有点难看。