hugo 博客主题配置

hugo 主题配置各不相同，要看具体的主题而定，不过具体大同小异先找到主题的exampleSite文件，这里放的是博客的的样例，按照该文件夹下的config.toml配置博客根目录下的config.toml

这里要说的是两个问题，一个是添加评论，另一个是文章中的图片的显示问题

加入评论功能

使用的是valine，具体配置请看valine

配置完成后在config.toml 中加入以下代码

  # Valine.
  # You can get your appid and appkey from https://leancloud.cn
  # more info please open https://valine.js.org
  [params.valine]
    enable = true
    appId = 'Your appId'
    appKey = 'Your appKey'
    notify = false  # mail notifier , https://github.com/xCss/Valine/wiki
    verify = false # Verification code
    avatar = 'mm'
    placeholder = '说点什么吧...'
    visitor = true

创建comments

在 layouts/partials/ 中创建 comments.html 文件，文件内容如下：

  <!-- valine -->
  {{- if .Site.Params.valine.enable -}}
  <!-- id 将作为查询条件 -->
  
  <div id="vcomments"></div>
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src='//unpkg.com/valine/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 }}'
    });
  </script>
  {{- end -}}

0x03 引入comments

在 layouts/_default/single.html 中加入下面的代码，以引入 comments.html

<div class="post-comment">
    <!-- 加入评论功能 -->
    {{ partial "comments.html" . }}
</div>

至此评论功能就已配置完成

Hugo中Markdown插入图片路径问题

解决这个问题，主要是两个方面：

第一、在config.toml中配置baseurl。作用是无论在本地还是发布出去，图片的路径都是相对于baseurl而言的。

第二、在Markdown图片路径中，以static为根目录写全路径。

示例：假设测试baseurl为http://localhost:1313/，图片位置：/static/img/hugo/123.png，那么在Markdown中写作![图片说明](/img/hugo/123.png)。这时，在浏览器就可以看到图片了

具体效果请看https://togiv.github.io

本文参考博客https://blog.csdn.net/AnonymKing/article/details/86370082

Hugo主题配置

hugo 博客主题配置

加入评论功能

Hugo中Markdown插入图片路径问题

Ferry