给Hugo加一点好玩的功能

只用一个主题，感觉博客还是太单调了呀🤨。但是又不想像好多博客那样花里胡哨的，简直莫名其妙。充斥着各种违和感的东西，完全没有看下去的心情。

所以，博客加一点功能，但是也要保持一点克制，尽量要和博客浑然一体才好一点。

功能都能加点什么嘞

音乐播放器
文章评论
联系气泡
访问统计

hugo的自定义

在修改之前，可以了解一下hugo的修改方式，Theme Components | Hugo (gohugo.io)，借助hugo的特性可以很方便的覆盖主题的源码。

也就是如果你要修改主题的一些功能，不需要进入Theme文件夹里改，直接在Hugo的根目录新建文件就好，比如说：

我想修改一下主题的页脚部分，可以直接在根目录新建layouts/partials/footer/custom.html文件（要和主题内的文件目录保持一致），然后在文件里修改。因为覆盖文件有着高优先度，所以hugo不会去读取主题内的同名文件，直接使用修改的。

这么做的好处就是可以直接覆盖升级主题，同时不丢失你对主题做的修改。

这样真的太方便了！

音乐播放器

谁不想在看博客的时候来点音乐呢🎵，来一点温馨的音乐，心情都舒缓下来有没有！一整天的好心情诶！

这里用到的是APlayer，安装完成后博客左下角会显示悬浮窗，超赞！

音乐播放器

因为图片有点小，所以有点不清楚，减分 😲

安装 APlayer

我直接在把主题内的layouts\partials\footer文件夹全部在根目录下了😂。

在partials文件夹内新建music.html文件，然后填写：

 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


<!DOCTYPE html>
<html>
<head>
    <!-- require APlayer -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
</head>
<body>
    <div class="demo">
        <div id="player1">
        </div>
    </div>
    <script>
        var ap = new APlayer
            ({
                element: document.getElementById('player1'),
                fixed: true,
                autoplay: true,
                mini: true,
                theme: '#f8f4fc',
                loop: 'all',
                order: 'random',
                preload: 'auto',
                volume: 0.5,
                mutex: true,
                listFolded: false,
                listMaxHeight: 90,
                lrcType: 0,
                music:[{
                name:'音乐名',url:'音乐链接',artists:'音乐作者',cover:'封面链接'}]
        });
        //ap.init();
    </script>
</body>

之后在custom.html文件中添加{{ partial "music" . }}然后保存。

如果想要修改播放器的各项设置可以在文档中查看各项参数的配置。

打开hugo本地监听的端口，发现右下角出现！

这里又要称赞hugo的实时渲染功能！比Hexo不知道好了多少倍哦，hexo要想看到修改后的博客还要重新执行一遍命令，而且！还！很！慢！😫

文章评论

这里我用的是github上的utterances🔮，这个emoji好漂亮。

utterances

安装

首先需要在github上新建一个repo作为放评论的地方，然后在utterances中填入repo的地址。

utterances配置

现在的主题应该都有配套评论插件配置叭？直接在hugo的配置文件中配置一下就好。

1
2
3


comments:
    enabled: true
    provider: utterances

开启评论，然后评论程序选择utterances。

1
2
3
4


utterances:
    repo: irithys/blog-comment
    issueTerm: pathname
    label: utterances

配置完成🎉🎉🎉

utterances界面

在本地随便打开博客中的一篇文章，授权后就可以评论咯！看这里✨

联系气泡

打开博客后发现右下角会有气泡，有什么事情都可以随时联系到我哦！

气泡展开

这是一个偶然的机会发现的有趣的小功能😂，是日本一家公司提供的Channel.io。

在注册后打开setting-install and configuration-install plugin for web，把显示的JS复制。

打开layouts\partials\footer\components下的script.html文件扔进去就好。

在设置里可以修改欢迎信息。

气泡配置

那怎么才能得到通知嘞？笨诶😆，当然是去下载他们家的APP咯，Play Store或IOS外区都有，Android上如果可以访问Google，连通FCM的话可以实时获取消息。

访问统计

这样增加一个访问统计可以看到访问量不是超赞的吗🎈

安装不蒜子

当然是使用个人博客都在使用的不蒜子咯。

在不蒜子的官网可以看到如何进行修改美化之类的。不过嘛，一行字而已，只要搭配主题色就行咯。

打开layouts\partials\footer\components下的script.html文件扔进去就好。

1
2


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

然后layouts\partials\footer文件夹下的footer.html文件中填写

1
2
3
4
5
6
7
8


<i class="powerby">
<span id="busuanzi_container_site_pv">
    访问量&nbsp;-&nbsp;<span id="busuanzi_value_site_pv"></span>
</span>&nbsp;
<span id="busuanzi_container_site_uv">
    访客数&nbsp;-&nbsp;<span id="busuanzi_value_site_uv"></span>人次
  </span>
</i>

刷新就好啦。

如果hugo主题不一样的话可能没有powerby，因为这是我使用主题的页脚默认样式。

更新

上网冲浪的时候发现了宝藏umami，发现UI好戳我呀！！果断舍弃掉不蒜子投入umami的怀抱！

umami界面

UI还支持中文，简直！简直！！！（冒烟儿

刚安装好访问统计，还没有好友来逛，Google你快点给我推广😭。装完之后还有一点小插曲：发现虽然配置好了但是打开页面后并没有统计数据，怀疑没有加载。

果断F12打开网络模块查看果不其然，哼哼哼。Adblock会拦截掉js，（不是，这个umami感觉慢小众的叭？你怎么还能检测到嘞？也就是GA你会……啊！！我当初为了好玩添加的GA也给屏蔽了！WTF😡。果断点开浏览器插件将我网站上的Adblock拦截取消。

我怎么会添加那些一点美感都没有的广告嘞？加上统计只是想变得好玩一点啦。

完成咯

超赞！完结撒花🎉🎉🎉

在@2022年9月20日第三篇修改文章时隔半年，博客又有了那些新变化？！闪亮登场！