Back

记一次「stack」主题的修改和配置

添加「valine」评论系统

  1. stack主题提供了非常方便的修改方式,下hugo-theme-stack/layouts/partials/comments/provider添加对应的htmk文件。代码如下
<div id="vcomments"></div>
<script src="//cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js"></script>
<script type="text/javascript">
new Valine({
    el: '#vcomments' ,
    appId: '{{ .Site.Params.valine.appId }}',
    appKey: '{{ .Site.Params.valine.appKey }}',
    notify: '{{ .Site.Params.valine.notify }}', 
    verify: '{{ .Site.Params.valine.verify }}', 
    avatar:'{{ .Site.Params.valine.avatar }}', 
    placeholder: '{{ .Site.Params.valine.placeholder }}',
    visitor: '{{ .Site.Params.valine.visitor }}',
    //tagMeta: '{{ .Site.Params.valine.tagMeta }}',
    master: '{{ .Site.Params.valine.master }}'
    //friends: '{{ .Site.Params.valine.friends }}',
    //metaPlaceholder: '{{ .Site.Params.valine.metaPlaceholder }}'
});
</script>
  1. 在config.toml文件中,将params.commnt – provider改为valine
  2. 在config.toml文件中添加对应配置项,如下:
[params.valine]
        appId = "7CO6KGD5f3I0kLTi8DbvenFT-MdYXbMMI"
        appKey = "sSfgBOy6NO9DkxMfjpqVa6Ub"
        notify = ""
        verify = ""   #默认false
        avatar = ""
        placeholder = "请填写昵称、邮箱后评论,若填写QQ邮箱自动解析头像"
        visitor = ""
        tagMeta = "[“博主”,“小伙伴”,“访客”]"  #默认如此,需要自己改
        master = "fed005e6d57ccd4f24375b6b17d34df5"   #填写md5 32位加密的博主邮箱
        friends = ""                                  #md5 加密后的小伙伴邮箱
        metaPlaceholder = "{“nick”:“昵称/QQ 号”,“mail”:“邮箱(必填)”}"                    #示例{“nick”:“昵称/QQ 号”,“mail”:“邮箱(必填)”}
  1. 配置valine评论的邮件通知和后台管理系统,这个见下一篇文章 《valine评论系统的配置》

主题应用

  1. 将’hugo-theme-stack-x.x.x’文件夹更名为hugo-theme-stack
  2. 将文件夹复制到hugo博客本目录 – thmems 文件夹中

主题配置修改

  1. hugo-theme-stack/exampleSite/config.toml复制到hugo博客的根目录下
  2. 按自己需求修改
    • 我将配置文件注释方便查看,基于1.1.0版本 1 2 3