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

折腾博客的这些天

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

被我抛弃的功能

  1. 卜算子统计
  2. 内容搜索
  3. 全站友情链接:后面可能还会再加上去,有时间再说吧。
  4. 独立的标签页和分类页。

被我留下来的东西

  1. 百度统计,链接提交和站点地图,为了让更多的人看到我的东西,我留下了这些。
  2. 美化过的标签云。
  3. 目录,靠左边那个蓝色的小方块。
  4. 相册,没有多少照片,只想留下一些回忆。
  5. 视频、音乐这些。应该不会去了,留着吧。
  6. Valine评论,没有评论的博客不算完整的博客。
  7. 一键回顶,就是左下角那个小方块下面的箭头。
  8. 百度Echart体系结构,应该会留下来了。
  9. Prims代码高亮。

可能会被去掉的东西

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

写博客使用的工具

  1. 坚果云,实现多设备同步。
  2. Vnote,基于QT的MarkDown笔记软件,可以让你笔记和博客同步。
  3. Typora 实时预览的markdown编辑器。

博客的美化和加工

一、漂亮的标签云

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

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

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

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

  1. 配置config.toml
googleAnalytics = "UA-XXXXX-Y"
  1. 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功能,添加了美化快的功能。

如果这篇文章对您很有帮助,不妨
----- 本文结束 ❤ 感谢您的阅读 ----