美文网首页django
用Hexo+Github 搭建属于自己的博客(二)

用Hexo+Github 搭建属于自己的博客(二)

作者: f5065e26181b | 来源:发表于2019-05-13 20:27 被阅读4次

    文章同步发于公众号:1024程序开发者社区(cxkfzsq1024)
    1024程序开发者社区博客

    上期介绍了基于hexo的个人博客,本期介绍页面设置 、访问量统计和评论模块三个方面内容。

    /1/页面设置

    页面左侧设置菜单栏,在主题_config.yml中设置menu:

      menu: home: / || home
      about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    # Enable / Disable menu icons / item badges. menu_settings: icons: true
      badges: false
    

    主要选择首页,关于作者、标签、分类和归档五类,结果如图:


    image

    设置用户图像和介绍:

    themes/next/_config.yml
    # Sidebar Avatar
    avatar:
      # In theme directory (source/images): /images/avatar.gif
     # In site directory (source/uploads): /uploads/avatar.gif # You can also use other linking images.  url: /images/avatar1.jpg
      # If true, the avatar would be dispalyed in circle.
      rounded: true
      # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
      opacity: 1
      # If true, the avatar would be rotated with the cursor. 
      rotated: false
    
    _config.yml
    
    Site title: 1024程序开发者社区
    subtitle: coding life
    description: 程序开发者交流的平台
    keywords: coding life
    author: bc_zhang
    language: zh-CN
    

    效果如图:


    image

    生成新标签:

    hexo new page tags
    

    生成新分类:

    hexo new page categories
    

    生成新文章:

    hexo new "文章名称" 
    

    /2/访问量统计

    Next 主题在版本6.0以上已经内置了不蒜子访客统计的代码,只要修改主题配置文件_config.yml即可:

    # Show Views/Visitors of the website/page with busuanzi.
    # Get more information on http://ibruce.info/2015/04/04/busuanzi busuanzi_count: enable: true
      total_visitors: true
      total_visitors_icon: user
      total_views: true
      total_views_icon: eye
      # 文章的阅读次数不用不蒜子
      # 因为在首页看不到阅读数,要进入文章才能看到 post_views: false
      post_views_icon: eye
    

    效果如图:

    image

    /3/评论模块

    Gitalk: 一个基于 Github Issue 和 Preact 开发的评论插件,分为以下步骤:
    (1)注册OAuth Application
    在GitHub上注册新应用, 链接:https://github.com/settings/applications/new,填写信息,注册后记下Client IDClient Secret

    image
    image
    (2)在themes\next\source\js\src\目录下创建md5.min.js
    !function(n){"use strict";function t(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function r(n,t){return n<<t|n>>>32-t}function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}function i(n,r){n[r>>5]|=128<<r%32,n[14+(r+64>>>9<<4)]=r;var e,i,a,d,h,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e<n.length;e+=16)i=l,a=g,d=v,h=m,g=f(g=f(g=f(g=f(g=c(g=c(g=c(g=c(g=u(g=u(g=u(g=u(g=o(g=o(g=o(g=o(g,v=o(v,m=o(m,l=o(l,g,v,m,n[e],7,-680876936),g,v,n[e+1],12,-389564586),l,g,n[e+2],17,606105819),m,l,n[e+3],22,-1044525330),v=o(v,m=o(m,l=o(l,g,v,m,n[e+4],7,-176418897),g,v,n[e+5],12,1200080426),l,g,n[e+6],17,-1473231341),m,l,n[e+7],22,-45705983),v=o(v,m=o(m,l=o(l,g,v,m,n[e+8],7,1770035416),g,v,n[e+9],12,-1958414417),l,g,n[e+10],17,-42063),m,l,n[e+11],22,-1990404162),v=o(v,m=o(m,l=o(l,g,v,m,n[e+12],7,1804603682),g,v,n[e+13],12,-40341101),l,g,n[e+14],17,-1502002290),m,l,n[e+15],22,1236535329),v=u(v,m=u(m,l=u(l,g,v,m,n[e+1],5,-165796510),g,v,n[e+6],9,-1069501632),l,g,n[e+11],14,643717713),m,l,n[e],20,-373897302),v=u(v,m=u(m,l=u(l,g,v,m,n[e+5],5,-701558691),g,v,n[e+10],9,38016083),l,g,n[e+15],14,-660478335),m,l,n[e+4],20,-405537848),v=u(v,m=u(m,l=u(l,g,v,m,n[e+9],5,568446438),g,v,n[e+14],9,-1019803690),l,g,n[e+3],14,-187363961),m,l,n[e+8],20,1163531501),v=u(v,m=u(m,l=u(l,g,v,m,n[e+13],5,-1444681467),g,v,n[e+2],9,-51403784),l,g,n[e+7],14,1735328473),m,l,n[e+12],20,-1926607734),v=c(v,m=c(m,l=c(l,g,v,m,n[e+5],4,-378558),g,v,n[e+8],11,-2022574463),l,g,n[e+11],16,1839030562),m,l,n[e+14],23,-35309556),v=c(v,m=c(m,l=c(l,g,v,m,n[e+1],4,-1530992060),g,v,n[e+4],11,1272893353),l,g,n[e+7],16,-155497632),m,l,n[e+10],23,-1094730640),v=c(v,m=c(m,l=c(l,g,v,m,n[e+13],4,681279174),g,v,n[e],11,-358537222),l,g,n[e+3],16,-722521979),m,l,n[e+6],23,76029189),v=c(v,m=c(m,l=c(l,g,v,m,n[e+9],4,-640364487),g,v,n[e+12],11,-421815835),l,g,n[e+15],16,530742520),m,l,n[e+2],23,-995338651),v=f(v,m=f(m,l=f(l,g,v,m,n[e],6,-198630844),g,v,n[e+7],10,1126891415),l,g,n[e+14],15,-1416354905),m,l,n[e+5],21,-57434055),v=f(v,m=f(m,l=f(l,g,v,m,n[e+12],6,1700485571),g,v,n[e+3],10,-1894986606),l,g,n[e+10],15,-1051523),m,l,n[e+1],21,-2054922799),v=f(v,m=f(m,l=f(l,g,v,m,n[e+8],6,1873313359),g,v,n[e+15],10,-30611744),l,g,n[e+6],15,-1560198380),m,l,n[e+13],21,1309151649),v=f(v,m=f(m,l=f(l,g,v,m,n[e+4],6,-145523070),g,v,n[e+11],10,-1120210379),l,g,n[e+2],15,718787259),m,l,n[e+9],21,-343485551),l=t(l,i),g=t(g,a),v=t(v,d),m=t(m,h);return[l,g,v,m]}function a(n){var t,r="",e=32*n.length;for(t=0;t<e;t+=8)r+=String.fromCharCode(n[t>>5]>>>t%32&255);return r}function d(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t<r.length;t+=1)r[t]=0;var e=8*n.length;for(t=0;t<e;t+=8)r[t>>5]|=(255&n.charCodeAt(t/8))<<t%32;return r}function h(n){return a(i(d(n),8*n.length))}function l(n,t){var r,e,o=d(n),u=[],c=[];for(u[15]=c[15]=void 0,o.length>16&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(d(t)),512+8*t.length),a(i(c.concat(e),640))}function g(n){var t,r,e="";for(r=0;r<n.length;r+=1)t=n.charCodeAt(r),e+="0123456789abcdef".charAt(t>>>4&15)+"0123456789abcdef".charAt(15&t);return e}function v(n){return unescape(encodeURIComponent(n))}function m(n){return h(v(n))}function p(n){return g(m(n))}function s(n,t){return l(v(n),v(t))}function C(n,t){return g(s(n,t))}function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}"function"==typeof define&&define.amd?define(function(){return A}):"object"==typeof module&&module.exports?module.exports=A:n.md5=A}(this);
    

    (3)新建gittalk.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 src="/js/src/md5.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: md5(location.pathname),
              distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
      })
            gitalk.render('gitalk-container')           
           </script> {% endif %}
    

    (4)在主题配置文件themes/next/_config.yml中添加如下内容:

      gitalk:
      enable: true
      githubID: github帐号           # 例:vonsdite   注意必须小写 
      repo: 仓库名称                 # 例:vonsdite.github.io
      ClientID: Client ID           # 上文注册 OAuth Application后得到的值
      ClientSecret: Client Secret   # 上文注册 OAuth Application后得到的值
      adminUser: github帐号         # 指定可初始化评论账户, 例:vonsdite   注意必须小写 
     distractionFreeMode: true
    

    首先要授权GitHub账号登陆,结果为:


    image

    关注公众号,送海量学习资源~

    image

    1024程序开发者社区的交流群已经建立,许多小伙伴已经加入其中,感谢大家的支持。大家可以在群里就技术问题进行交流,还没有加入的小伙伴可以扫描下方“社区物业”二维码,让管理员帮忙拉进群,期待大家的加入。

    image

    //猜你喜欢//

    相关文章

      网友评论

        本文标题:用Hexo+Github 搭建属于自己的博客(二)

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