8

给Hugo blog中增加一些插件

 2 years ago
source link: https://wocai.de/post/2018/11/%E7%BB%99hugo-blog%E4%B8%AD%E5%A2%9E%E5%8A%A0%E4%B8%80%E4%BA%9B%E6%8F%92%E4%BB%B6/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在研究了一段时间hugo之后,我的blog也渐渐完善了些,现在该考虑一些有意思的插件了。

添加评论插件Disqus#

首先想到的就是disqus,也就是社会化评论插件,虽然国内无法使用,但也算是目前最好用的评论插件了。

后面会考虑用valine替换掉disqus

disqus使用相当简单,访问官网,注册账号之后,点击新增。

2019-05-13-040929.jpg

填写完若干内容之后,你会获得一个shortname,也就是你这个网站用的评论标识。

打开你的hugo模板,找到文章的底部,添加这部分代码。

<div id="disqus_thread"></div>
<script>
    var disqus_shortname = '{{ .Site.DisqusShortname }}';
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>

然后在hugo的 config.toml 中添加:

disqusShortname = "123456"

这里的123456就是你刚获得的shortname,添加进去就行。


添加分享插件 Social-share#

这个也比较简单,首先访问Github,添加js到模板的header中。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css"  crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js" integrity="sha256-fGPu+icKh985TLPhO2v68U7i0CW0dE4kiR06RN4O6jo=" crossorigin="anonymous"></script>

然后在合适的位置写一段html进去。

<div class="social-share" data-sites="wechat,weibo,twitter,facebook,douban" data-mobile-sites="wechat,weibo"></div>

这一段的意思是:

  1. 在web模式下,展示微信、微博、推忒、脸书、豆瓣的分享入口。
  2. 在移动模式下,只展示微信和微博的分享入口。

不过这里有个问题,wap模式下,微信也只是展示一个tooltip,这样其实没办法用的,后面可能需要调整一下。

效果如下: 2019-05-13-040930.jpg


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK