玩转博客Hugo(三) 博客加工

折腾博客的这些天

这里要说加工，而不是美化，我觉得加工这个词更适合我，我这里主要介绍的都是功能性的加工，附加一些美化的东西，美化并不重要，更重要的是内在的内容和实际的东西，说实话我折腾的了半个多月，每天晚上2点睡觉，但是永远都满足不了自己的新鲜感，到头来删掉，重新加上去，再删掉，都要让自己崩溃了，这不是我的初心，到此为止吧，写作才是快乐的开始，而不是花时间去选择一个好看的笔记本。

被我抛弃的功能

~~卜算子统计~~

~~内容搜索~~

~~全站友情链接：后面可能还会再加上去，有时间再说吧。~~

~~独立的标签页和分类页。~~

被我留下来的东西

百度统计，链接提交和站点地图，为了让更多的人看到我的东西，我留下了这些。

美化过的标签云。

目录，靠左边那个蓝色的小方块。

相册，没有多少照片，只想留下一些回忆。

视频、音乐这些。应该不会去了，留着吧。

Valine评论，没有评论的博客不算完整的博客。

一键回顶，就是左下角那个小方块下面的箭头。

百度Echart体系结构，应该会留下来了。

Prims代码高亮。

可能会被去掉的东西

hcSticky,就是那个右侧边栏不随着内容页往上滑的功能，他带个我一个很大的bug。

写博客使用的工具

坚果云，实现多设备同步。

Vnote，基于QT的MarkDown笔记软件，可以让你笔记和博客同步。

Typora 实时预览的markdown编辑器。

博客的美化和加工

一、漂亮的标签云

我去掉了独立的标签页，但是标签的功能被我留下来了，就在右边的侧边栏哪里。这部分之前写过了，如下链接

https://memory6181.top/post/2020-1-21-22-17/

二、百度统计，链接提交，sitemap

1、百度统计登陆百度统计，注册账号，获取js代码，放入博客body就可以了。 2、谷歌统计。 hugo本身是支持谷歌统计的，只要在进行下面两步操作就可以了。

配置config.toml

googleAnalytics = "UA-XXXXX-Y"

在head.html 中添加下面代码。

{{ template "_internal/google_analytics_async.html" . }}

3、链接提交这里谷歌搜索用到了sitemap，百度同时用了sitemap和自动提交的功能，百度自动提交的功能更有助于新站收录。
sitemap地址如下所示(以本站为例)：

https://memory6181.top/sitemap.xml

三、目录模块

最开始想把这个功能也删掉，毕竟放一颗小方块在哪里就像鼻子上面长了一颗痣一样，有点让人看不过眼，但是文章过长的时候很不方便，最终还是留下来了。
1、新建mulu.html(不要在意，名字无所谓),我这里把js和html放到了一起，怎么都行，并且在dafault目录下面的signle.html 中导入该文件。
导入文件：

{{- partial "mulu.html" . -}}

文件内容

<div id="floatTools" class="rides-cs" >
    <div class="floatL">
        <a style="display:none" id="aFloatTools_Hide" class="btnCtn" title="隐藏目录" style="top:20px"
            href="javascript:void(0);"><div class=" layui-icon layui-icon-radio"></div></a>
        <a style="display:block" id="aFloatTools_Show" class="btnOpen" title="打开目录" style="top:20px"
            href="javascript:void(0);"><div class=" layui-icon layui-icon-radio"></div></a>
    </div>
    <div id="divFloatToolsView" class="floatR">
        <div class="cn">
            {{.TableOfContents}}
        </div>
    </div>
</div>
<script type="text/javascript">
            $('#divFloatToolsView').animate({ width: 'hide', opacity: 'hide' }, 0, function () { $('#divFloatToolsView').hide(); });
            $('#aFloatTools_Show').show();
            $('#aFloatTools_Hide').hide();
    $(function () {
        $("#aFloatTools_Show").click(function () {
            $('#divFloatToolsView').animate({ width: 'show', opacity: 'show' }, 0, function () { $('#divFloatToolsView').show(); });
            $('#aFloatTools_Show').hide();
            $('#aFloatTools_Hide').show();
        });
        $("#aFloatTools_Hide").click(function () {
            $('#divFloatToolsView').animate({ width: 'hide', opacity: 'hide' }, 0, function () { $('#divFloatToolsView').hide(); });
            $('#aFloatTools_Show').show();
            $('#aFloatTools_Hide').hide();
        });
    });
</script>

2、新建mulu.css文件,同时在head.html中导入改文件。

.rides-cs {  font-size: 12px; background:#29a7e280; position: fixed; top: 200px;  _position: absolute; z-index: 666; border-radius:6px;}
.rides-cs .floatL { width: 36px; float:left; position: relative; z-index:1;margin-top: 21px;height: auto;}
.rides-cs .floatR { width: auto; float: left; padding: 5px; overflow:hidden;}
.rides-cs .floatR .cn {background:#F7F7F7; border-radius:6px;margin-top:4px;}
.rides-cs .cn .titZx{ font-size: 14px; color: #333;font-weight:600; line-height:24px;padding:5px;text-align:center;}
.rides-cs .cn ul {padding:0px;}
.rides-cs .cn ul li { padding :10px;border-bottom: solid 1px #E6E4E4;overflow: hidden;text-align:center;}
.rides-cs .cn ul li span { color: #777;}
.rides-cs .cn ul li a{color: #777;	padding: 0;height: 100%;margin: 0;}
.rides-cs ul li.top { border-bottom: solid #ACE5F9 1px;}
.rides-cs ul li.bot { border-bottom: none;}

四、相册,视频和一键回顶

这些都是一些简单的html和layui框架实现的，具体参考：

https://www.layui.com/

五、音乐播放器

音乐播放器最开始参考了水寒博客里面男的mepayer 音乐播放器，但是那个播放器没有音乐列表，不是很能满足的需求，最终选择了Aplayer 音乐播放器。
1、找一个地方添加一个放置音乐播放器的容器

<div class="container">
    <div class="music" id="aplayer"></div>
</div>

2、加入如下js代码.

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    theme: '#b7daff',
    lrcType: 1,
});
{{ range.Params.links }}
ap.list.add([{
    name: "{{ .title}}",
    artist: "{{ .author }}",
    url: "{{ .src }}",
    cover: "{{ .cover }}",
    lrc: "{{ .lrc }}",
    theme: '#ebd0c2'
}]);
{{ end }}

更多使用参考如下链接：

https://aplayer.js.org/#/zh-Hans/

六、其他

1、百度Echarts绘制知识结构
这里的部分也是参考水寒设计的，具体细节后面会单独出一篇文章来写。
2、Primjs代码高亮

https://prismjs.com/

去官网下载对应的js和css 导入就可以了，注意删掉主题样式里面的pre和code 的样式，如果要显示行号添加如下代码：

<script type="text/javascript">
    $('pre').addClass("line-numbers").css("white-space", "pre-wrap");
</script>

小结

关于博客的折腾到此为止吧，不要忘了最初的初忠和写作的想法，花太多的时间去做这些事了，后面会做简单的修正，但是不会这样折腾下去了。终结。

后续

hcSticky 最终还是被我去掉了，更换了另一插件。

https://www.lanrenzhijia.com/jquery/4181.html

我又折腾了一下，使用hugo的shortscode扩展了我的markdown功能，添加了美化快的功能。