美文网首页JavaWeb
完全免费搭建个人博客系列笔记(三)

完全免费搭建个人博客系列笔记(三)

作者: 不知名码农 | 来源:发表于2019-01-06 00:02 被阅读29次

    使用hexo+next+github/coding+gitalk添加博客评论系统,以及hexo+next+码云+issue,这里使用的是next主题,如有问题,可以在博客下方评论。

    next主题添加gitalk

    准备

    在使用gitalk作为评论系统之前,需要在github上注册新的应用; 注册GitHub应用链接。 按如下描述填写:

    github注册应用

    填写完成后,点击绿色按钮,跳转到一下页面, 可以看到 Client IDClient Secret,后面会用到。

    github注册应用保存后跳转的页面

    在项目目录下执行如下命令 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

    相关文章

      网友评论

        本文标题:完全免费搭建个人博客系列笔记(三)

        本文链接:https://www.haomeiwen.com/subject/eyjjrqtx.html