惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
有赞技术团队
有赞技术团队
S
SegmentFault 最新的问题
宝玉的分享
宝玉的分享
量子位
小众软件
小众软件
The Cloudflare Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
大猫的无限游戏
大猫的无限游戏
C
Check Point Blog
G
Google Developers Blog
博客园 - 叶小钗
H
Help Net Security
Jina AI
Jina AI
Y
Y Combinator Blog
Last Week in AI
Last Week in AI
GbyAI
GbyAI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Apple Machine Learning Research
Apple Machine Learning Research
MyScale Blog
MyScale Blog
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Vercel News
Vercel News

kok的笔记本

macOS 里 神秘的 kernel_task ,为什么一直在写入硬盘? 产品 node_modules 为什么总是这么大:一次从原理到实践的瘦身记录 谁来救救我的Mac存储空间-清理工具横评:付费vs免费,从界面到命令行 2023 读书推荐 写给播客嘉宾的录制说明书 在 Electron 中使用 Vue Devtools 几何原本中勾股定理的证明 Mac 安装软件时提示 已损坏,无法打开 应该怎么办 PegBoard 你的数字白板 少数派读者与作者的 NewsLetter 闲棋冷子-2-2021年我读过哪些很棒的书 闲棋冷子-1-相信你的身体,它不会骗你 修复 macOS 中 Cisco Anyconnect 报的奇怪Bug 我的 NAS 使用记录 Omniplan 入门教程 Hugo升级0.74记录 一年级产品经理需要掌握什么知识? 无籍之谈-3-和盖盖聊聊尼尔·盖曼与中外科幻 露营笔记-装备篇 无籍之谈-2-和鹏仔聊华尔街兴盛史,给小白投资者的一些建议 介绍一下《无籍之谈》 无籍之谈-1-和不土聊佛学,谈谈《一心走路》《僧侣与哲学家》 高达模型入门 - 工具整理 5 分钟了解 Sketch 的新特性 Tint - 色调 Hugo 主题移动端开发的一些心得 修复 macbook 键盘连击问题 在 Hugo 中使用 Open Graph 提升分享效果 选小米10 还是小米10 Pro? 利用 Python 批量合并 Excel 文件
给Hugo blog中增加一些插件
kokdemo · 2018-11-26 · via kok的笔记本

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

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

后面会考虑用valine替换掉disqus

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

填写完若干内容之后,你会获得一个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,添加进去就行。


这个也比较简单,首先访问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,这样其实没办法用的,后面可能需要调整一下。

效果如下: