zoukankan      html  css  js  c++  java
  • github+hexo搭建自己的博客网站(五)进阶配置(畅言实现博客的评论)

    如何对如何搭建hexo+github可以查看我第一篇入门文章:http://www.cnblogs.com/chengxs/p/7402174.html

    详细的可以查看hexo博客的演示:https://saucxs.github.io/

    同时绑定了域名:http://www.chengxinsong.cn/

    可以查看在github上生成的静态文件:https://github.com/saucxs/saucxs.github.io.git,如果觉得可以请给颗星星。

     注意:畅言使用几天之后需要进行实名认证,认证完事之后就可以正常使用。

    1、评论实现

    在Hexo的Yilia主题由于原来使用的是多说的留言板,近期多说公告要停止提供服务了,所以我就把多说换成搜狐的畅言了,下面写一个简单的小教程。

    1.1注册畅言

    进入畅言官网 , 点击右上角 “免费注册”,并填写注册信息。(注意域名需要备案信息),之前自己已经注册了一个域名,已经备案,但是还没有到公安局备案,而且那个域名已经在使用,所以直接用那个域名。备案的信息和域名是一一对应的。

    1.2绑定域名

    绑定域名分2种情况:带www和不带www的。

    域名配置最常见有2种方式,CNAME和A记录,CNAME填写域名,A记录填写IP,由于不带www方式只能采用A记录,所以必须先才cmd的ping一下你的用户名.github.io的IP,然后到你的域名DNS设置页,将A记录指向你ping出来的IP,将CNAME指向你的用户名.github.io,这样可以保证无论是否添加www都可以访问,如下:

    然后到你的github项目根目录新建一个名为CNAME的文件(无后缀),里面填写你的域名,加不加www看你自己喜好,因为经测试:

    另外说一句,在你绑定了新域名之后,原来的你的用户名.github.io并没有失效,而是会自动跳转到你的新域名。

     

    1.3登录并进入畅言后台

    注册完后,登录进入畅言官网,获取你的畅言 app id 和 app key。

    1.4使用畅言系统

    下面说下修改评论为畅言的方法,其实方法和多说是差不多的。

    在网上看到别人的教程,发现了问题:多此一举,现在只需要在主题的目录下_config.yml,添加上changyan_appid和changyan_conf的值。

    效果:

    1.5在github上的github的page上设置域名

     

     1.6如果出现这种情况,在github的page的设置上增加域名。

    检查github上的page域名设置地方。

    踩得坑:

    以下是网上的做法:重复出现评论区

    #########################################################################

    1、修改 themesyilialayout\_partialarticle.ejs 模板,把如下代码

    也就是如下的代码

    <% if (theme.disqus || config.disqus_shortname){ %>
    <section id="comments">
    <div id="disqus_thread"></div>
    <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<%= theme.disqus || config.disqus_shortname %>'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </section>
    <% } %>

    换成一下代码

    也就是如下代码

    <% if (!index && post.comments){ %>
    <section id="comments">
      <!--高速版,加载速度快,使用前需测试页面的兼容性-->
      <div id="SOHUCS" sid="<%= page.title %>"></div>
      <script>
        (function(){
          var appid = 'cytcBy09P',
            conf = '0e827330cbbc63a9d87e7ca4c5ded651';
          var doc = document,
            s = doc.createElement('script'),
            h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement;
          s.type = 'text/javascript';
          s.charset = 'utf-8';
          s.src =  'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid;
          h.insertBefore(s,h.firstChild);
          window.SCS_NO_IFRAME = true;
        })()
      </script>
    </section>
      <% } %>

    上面的APP IDAPP KEY是在畅言设置中得到。

    这里需要注意一点的是:sid="<%= page.title %>"> 这样的话,畅言就可以直接根据对应的文章来识别,使得文章有对应的评论,不会都乱在一起。

    2、在每篇文章开头的 front-matter 中添加一句comments: true,然后回到博客根目录执行命令 hexo d -g ,重新生成博客并部署博客,然后刷新,任选一篇文章进入下拉,会发现评论功能可以使用了。

    效果如下:

    重复增加了评论部分

    ####################################################################

  • 相关阅读:
    Java IO包装流如何关闭?
    Validator关于js,jq赋值不触发验证解决办法
    4 统计量&抽样分布
    3 概率的基本概念&离散型随机变量
    2 数据的概括性度量
    1 数据 & 图表
    Python 闭包
    一个自动修正数据时间和补全缺失数据的MapReduce程序
    MapReduce原理
    Hadoop MapReduce常用输入输出格式
  • 原文地址:https://www.cnblogs.com/chengxs/p/7494170.html
Copyright © 2011-2022 走看看