zoukankan      html  css  js  c++  java
  • 接入gitment为hexo添加评论功能


    title: 接入gitment为hexo添加评论功能
    toc: false
    date: 2018-04-16 10:59:56
    categories:

    • methods

    tags:

    • hexo
    • gitment

    注册一个OAuth application

    注册链接

    其中:

    Application name 为应用名,取一个跟自己博客相关的名字即可;

    Homepage URL 为博客地址,例如我的为:https://mikqueenge.github.io

    Application description 为应用描述,可不填;

    Authorization callback URL 为回调URL,可不填;

    点击 Register application 祝成功后会得到这个应用的 client IDclient secret,等下配置文件时会用到。

    配置文件

    主题:landscape

    创建git.ejs

    themes/landscape/layout/_partial/post文件夹中创建文件git.ejs,写入下面的代码:

    <!-- Gitment评论插件通用代码 -->
    <div id="git"></div>
    <!-- 汉化版 -->
    <link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
    <script src="https://billts.site/js/gitment.js"></script>
    <script>
    var gitment = new Gitment({
      id: '{{ page.date }}', //添加此句解决Error:validation failed的问题
      owner: "%%%%%%%",//github用户名,例如MIKQUEENGE
      repo: "%%%%%%%",//用户存储评论的github项目名称,例如MIKQUEENGE.github.io
      oauth: {
        client_id: "%%%%%%%%%%%%",//注册OAuth Application时生产的ClinetID
        client_secret:"%%%%%%%%%%",//注册OAuth Application时生成的Client Secret
      },
    })
    gitment.render('git')
    </script>
    <!-- Gitment代码结束 -->
    

    配置article.ejs

    themes/landscape/layout/_partial/article.ejs文件的结尾添加:

    <% if (!index){ %>
      <% if (post.comments){ %>
      <%- partial('post/git') %>
      <% } else { %>
        <div class="git"></div>
      <% } %>
    <% } %>
    

    登陆与添加评论

    完成上述配置后部署并打开某篇文章,拉到最底部可以看到评论区:

    点击登陆后就可以添加评论啦!

    遇到问题Error:validation failed

    md文件名太长导致id出现问题,使用上述代码是不会出现这个问题的。

    如果出现这个问题,解决方案为在gitment配置文件(如上述的git.ejs)中的var gitment = new Gitment({})内添加id: '{{ page.date }}',(不要忘记这个逗号)


    参考链接:

    Hexo博客yelee主题添加Gitment评论系统

    Gitment评论功能接入踩坑教程

  • 相关阅读:
    苏教版国标本小学语文第一册汉字笔画
    C++ preprocessor __VA_ARGS__ number of arguments
    The Aggregate Magic Algorithms
    USB Mass Storage大容量存储的基本知识
    【转】驱动和应用层的三种通信方式
    Do You Actually Know What *P++ Does In C?
    Repeat Macro Cloak
    A SCSI command code quick reference
    USB device layout, descriptors, interface alternate setting
    RTOS Semaphore Services
  • 原文地址:https://www.cnblogs.com/zmj97/p/10180743.html
Copyright © 2011-2022 走看看