这个博客系统如何搭建

Aug 27, 2020

| 阅读 | 共 878 字，阅读约 2 分钟
| 复制链接:

Overview

如何搭建自己的博客系统

  • 静态网页搭建
  • 集成评论功能

静态网页搭建

选型对比：

名称 | 优势 | 劣势 | 开发语言

  •  |      -       |    -         |       -

hexo | hugo |

访问数、字数、阅读数集成集成

theme的header中添加js文件

  • themes/你的主题/layout/partial/footer.html添加上述脚本即可，当然你也可以添加到 header 中
1<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
2</script>

文章标题后面添加标签

  • themes/你的主题/layout/_default/single.html添加上述脚本即可，当然你也可以添加到 header 中
1<span id="busuanzi_container_page_pv">|
2<span id="busuanzi_value_page_pv"><span><span>
3      阅读 </span></span>|<span class="post-date"> 共 {{ .WordCount }} 字</span>，阅读约<span class="more-meta"> {{ .ReadingTime }} 分钟</span>

评论系统

选型对比：

名称 | 概述 | 优势 | 劣势

  •   |     -      |  -      | -

Valine |国内，使用较多，加载快|评论门槛低，可以安装 valine-admin 来过滤垃圾评论和实现邮件提醒|需要将数据保存到他们的服务器|注册账号后还要用身份证号码信息认证，认证完后还要用支付宝扫码验证是不是本人的 Disqus | | | 评论门槛高 | 界面比较丑，需要翻墙。广告多，加载慢 gittalk |github issue风格 | |需要登录github账号才能评论，账号写到前端代码中 gitment | github issue风格| 评论数据直接保存仓库 | 很久没有人维护了 livere | 韩国 | | 加载慢，后台访问不稳定 畅言 | 国内 | | 免费版有广告，需要备案 Utterances | github issue风格

最终选定Utterances

  1. 登录https://github.com/apps/utterances
  2. github新建一个仓库
  3. 安装utterances到新建的仓库

因为我用的主题hugo-clarity没有集成utterances，需要自己将脚本集成进去

themes/hugo-clarity/assets/js/index.js 最后一个花括号前面加入函数

 1...
 2(function() {
 3    // 匿名函数，防止污染全局变量
 4    var utterances = document.createElement('script');
 5    utterances.type = 'text/javascript';
 6    utterances.async = true;
 7    utterances.setAttribute('issue-term','pathname')
 8    utterances.setAttribute('theme','github-light')
 9    utterances.setAttribute('repo','kinnylee/hugo-blog-comment')
10    utterances.crossorigin = 'anonymous';
11    utterances.src = 'https://utteranc.es/client.js';
12    // content 是要插入评论的地方
13    document.getElementsByClassName('post_content')[0].appendChild(utterances);
14  })();
15
16  // add new code above this line
17}

themes/hugo-clarity/layout/_default/single.html中添加一个id为post_content的div，这样前面的脚本都能自动在后面追加了

1<article class='post_content' id="post_content">

调整一下样式，最大宽度太小了（760px）

theames/hugo-clarity/assets/sass/_custom.sass

1.utterances
2  max-width: 2000px

搜索系统

  • Algolia