使用hexo+next+github/coding+gitalk添加博客评论系统,以及hexo+next+码云+issue,这里使用的是next主题,如有问题,可以在博客下方评论。
next主题添加gitalk
准备
在使用gitalk作为评论系统之前,需要在github上注册新的应用; 注册GitHub应用链接。 按如下描述填写:
github注册应用填写完成后,点击绿色按钮,跳转到一下页面, 可以看到 Client ID
和 Client Secret
,后面会用到。
在项目目录下执行如下命令 npm install gitalk --save
安装 gitalk
;
修改的内容
新建 gitalk.swig
;
路径 themes/next/layout/_third-party/comments/gitalk.swig
,内容如下:
{% if page.comments && theme.gitalk.enable %}`
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '{{ theme.gitalk.ClientID }}',
clientSecret: '{{ theme.gitalk.ClientSecret }}',
repo: '{{ theme.gitalk.repo }}',
owner: '{{ theme.gitalk.githubID }}',
admin: ['{{ theme.gitalk.adminUser }}'],
id: location.pathname,
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')`
</script>
{% endif %}
修改 comments.swig
路径 themes/next/layout/_partials/comments.swig
,在最后一个 div
里面加上如下内容:
{% elseif theme.gitalk.enable %}
<div id="gitalk-container"></div>
修改 index.swig
路径 themes/next/layout/_third-party/comments/index.swig
,在最后一行加上如下内容:
{% include 'gitalk.swig' %}
新建 gitalk.styl
路径 themes/next/source/css/_common/components/third-party/gitalk.styl
,内容如下:
.gt-header a, .gt-comments a, .gt-popup a
border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
top: 0.7em;
修改 third-party.styl
路径 themes/next/source/css/_common/components/third-party/gitalk.styl
,在最后一行加上如下内容:
@import "gitalk";
修改文件 _config.yml
路径 themes/next/_config.yml
,注意是主题的配置文件,增加内容如下:
gitalk:
enable: true
githubID: nelucifer # 例:nelucifer
repo: nelucifer.github.io # 存储你评论 issue 的 Github 仓库名(建议直接用 GitHub Page 的仓库名) 例:nelucifer.github.io`
ClientID: 这块填注册Github应用成功之后的ClientID
ClientSecret: 注册Github应用成功之后的ClientSecret
#owner: 'Github 用户名',
adminUser: ['nelucifer'] #指定可初始化评论账户,Github仓库的管理员,可以有多个
distractionFreeMode: true
#id: 'window.location.pathname' #页面的唯一标识,gitalk根据这个标识自动创建的issue的标签,此处使用页面的相对路径作为标识
参考文章
在使用gitalk作为评论系统的时候,参考了以下文章,特此添加链接,表示感谢:
vscode + 七牛云
现在使用七牛云做图床需要已经备案的域名,测试域名不能用啦。
准备
安装七牛云插件
- 安装插件:
qiniu-upload-image
- 文件>首选项>设置,在右侧填写自己的配置覆盖默认配置。配置文件如下,使用的配置是七牛云里面的【密钥管理】:
{
// 一个有效的七牛 AccessKey 签名授权。
"qiniu.access_key": "密钥管理里面的AK",
// 七牛图片上传空间。
"qiniu.bucket": "weyoung-pub",
// 七牛图床域名。`
"qiniu.domain": "自己配置的图床域名,使用二级域名就行",
// 七牛图片上传工具开关
"qiniu.enable": true,
// 七牛图片上传路径,参数化命名。
"qiniu.remotePath": "${fileName}-${dateTime}",
// 一个有效的七牛 SecretKey 签名授权。
"qiniu.secret_key": "密钥管理里面的SK",
"files.autoSave": "afterDelay",
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
}
使用快捷键
粘贴图片路径上传:SHIFT + P 直接选择图片上传:SHIFT + O
安装插件
Ctrl+P 输入命令:
ext install qiniu-upload-image
完成
这个是我的微信公众号,会不定期更新,欢迎交流~~
weyoung.jpg
网友评论