置顶 |

Hexo博客搭建系列Chapter9——Hexo博客功能扩展(5/5)


浏览次数 :  次   
博文字数统计 : 2k字   |   阅读所需时长 : 9分
× 文章目录
  1. 1. Hexo博客搭建系列——Chapter 9
    1. 1.1. 五、高级功能实现
      1. 1.1.1. 16. 评论系统
        1. 1.1.1.1. 16.1 注册Leancloud
        2. 1.1.1.2. 16.2 修改配置文件
        3. 1.1.1.3. 16.3 Gitalk评论系统
      2. 1.1.2. 17. Live 2D功能
        1. 1.1.2.1. 17.1 下载插件和模型
        2. 1.1.2.2. 17.2 更改模型路径
        3. 1.1.2.3. 17.3 添加配置
      3. 1.1.3. 18. 其他功能
    2. 1.2. 附录：参考资料

  • 在Windows系统上利用Hexo搭建博客系列——Chapter9

  • Chapter9：

    • 扩展了评论系统功能——均支持Markdown语法

      • 基于Valine和Leancloud的评论系统

        详细教程：Valine评论系统

        优点：不会出现各种奇怪的错误

        缺点：没有实现真实登录功能，可以用户自己随意取昵称评论

      • 基于Gitment和Gitalk的评论系统

        详细教程：Gitalk评论系统

        优点：基于Github登录

        缺点：Error和Bug较多，Error：Network Error 问题没能解决

    • 扩展了Live2D功能

    • 更多功能展望(莫须有)

Hexo博客搭建系列——Chapter 9

五、高级功能实现

16. 评论系统

16.1 注册Leancloud

  • 官网教程

  • 第一步：创建应用：Hexo Blog Comment

  • 第二步：获取Key

    选择刚刚创建的应用>设置>选择应用 Keys，获取APP ID和APP KEY

    1
    2
     >APP ID : IbB069kzjoJ6yrtHz3F47kAh-gzGzoHsz
    APP Key : seteWK1qk6nSC5zBcB2TFfWi

  • 第三步：设置Web安全域名

    在设置选项的安全中心中配置

    1
    2
    http://mfln8n.coding-pages.com
    https://chthollists.github.io

16.2 修改配置文件

  • 第一步：修改theme/yilia/layout/_partial/article.ejs，在最末尾加上

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     ><% if ((theme.valine_type === 2 || (theme.valine_type === 1 && post.valineenbale)) && !index){ %>
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
    <section id="comments" class="comments">
      <style>
           .comments{margin:30px;padding:10px;background:#fff}
           @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
         </style>
         <%- partial('post/valine', {
           key: post.slug,
           title: post.title,
           url: config.url+url_for(post.path)
           }) %>
       </section>
       <% } %>
     <% } %>

  • 第二步：修改theme/yilia/_config.yml，添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     >#6、Valine https://valine.js.org
    valine_type: 1 #0 关闭评论  2全开评论  1需要再文章md开头加入valineenbale:true
    valine: 
    enable: true
    appid:  你在注册时候得到的id
    appkey:  你在注册时候得到的key
    #这里的appid和appkey如果配置失败可以试试改成app_id和app_key
    verify: true #验证码
    notify: true #评论回复提醒
    avatar:  identicon   #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
    avatar_cdn: '' #头像CDN
    #评论框占位符
    placeholder: ヾﾉ≧∀≦)o '友情提醒，留下正确的邮箱地址可以第一时间获取评论反馈'
    guest_info: nick,mail,link # custom comment header
    pageSize: 10 # pagination size
    visitor: true

  • 第三步：修改CDN加速：新建theme/yilia/layout/_partial/post/valine.ejs文件

    • 官方的CDN是

      1
      unpkg.com/valine/dist/Valine.min.js

    • 新建的valine.ejs的内容

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      <div id="vcomment"></div>
      <script src="//cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
      <script src="//cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
      <script src='//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>
      <script>
          var notify = '<%= theme.valine.notify %>' == true ? true : false;
          var verify = '<%= theme.valine.verify %>' == true ? true : false;
          new Valine({
              av: AV,
              el: '#vcomment',
              notify: notify,
              verify: verify,
              app_id: "<%= theme.valine.appid %>",
              app_key: "<%= theme.valine.appkey %>",
              placeholder: "<%= theme.valine.placeholder %>",
              avatar: "<%= theme.valine.avatar %>",
              avatar_cdn: "<%= theme.valine.avatar_cdn %>",
              pageSize: "<%= theme.valine.pageSize %>"
          });
      </script>

  • 第三步：如果valine_type:也是1，那么然后就需要在你文章抬头加上

    1
    valineenbale:true

  • 注意：由于不明原因没有登录功能，所以后续准备改用Gitment/Gitalk评论系统。

16.3 Gitalk评论系统

  • 官方教程

    • 注册(已有Github可以跳过注册)
    • Gitment使用

  • 第一步：创建APP应用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 创建APP的相关设置
    # APP名称---无限制
    Application name : HexoBlogComment
    # APP主页URL---无限制
    Homepage URL : github.com/chthollists
    # APP 描述介绍---无限制
    description : Gitalk Comment APP 
    # 回调地址---重要：取博客主页，要与_config.yml配置文件中的 config.url 一致
    callback URL : http://mfln8n.coding-pages.com

  • 第二步：获取Client ID和Client Secret

    1
    2
    Client ID : ef41cd3f6bb938f5b4c6
    Client Secret : 0a387b3802665d8a71757a618f93dfd8cb5ec7d8

  • 第三步：新建Gitalk文件：layout/_partial/post/gitalk.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     ><div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div> 

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
    <script type="text/javascript">

    if(<%=theme.gitalk.enable%>){
    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: '<%= page.date %>',
    distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
    pageSize: "<%= theme.gitalk.pageSize %>"
    })
    gitalk.render('gitalk-container') 
    }
    </script>

  • 第四步：修改文件comment.scss，完全替换source-src/css/comment.scss文件 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     >disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {
        padding: 0 30px !important;
        min-height: 20px;
    }

    #SOHUCS {
        #SOHU_MAIN .module-cmt-list .block-cont-gw {
            border-bottom: 1px dashed #c8c8c8 !important;
        }
     }

  • 第五步：修改layout/_partial/article.ejs，文件内新增Gitalk相关的配置代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ><% if ((theme.gitalk_type === 2 || (theme.gitalk_type === 1 && post.gitalkenbale)) && !index){ %>
       <% if(theme.gitalk.enable){ %>
           <%- partial('post/gitalk', {
               key: post.slug,
               title: post.title,
               url: config.url+url_for(post.path)
               }) %>
               <% } %>
                   <% } %>

  • 第六步：最后修改theme/yilia/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    gitalk_type:  1 #0 关闭评论  2全开评论  1需要再文章md开头加入gitalkenbale: true
    gitalk:
    enable: true
    githubID: github帐号     
    repo: 仓库名称 ( 用来存放评论的仓库名 )   例如：blog-comments
    ClientID: Client ID
    ClientSecret: Client Secret
    adminUser: github帐号   #指定可初始化评论账户
    distractionFreeMode: true
    1
    2
    3
    4
    5
    6
    7
    8
    gitalk:
    enable:  true
    githubID:  'Chthollists'   
    repo:  'chthollists.github.io' #这里可以另开一个也可以就用你博客的那个repo
    ClientID:  'xxxxxx'
    ClientSecret:  'xxxxxxxxxxxxxxxxxxxxxxxxx'
    adminUser:  'Chthollists' 
    distractionFreeMode: true

  • 注意：在Github创建OAuth APP时：

    • 如果博客只部署在一个云端，无论是Github Pages、Gitee Pages、Coding Pages还是个人搭建的云服务器，回调地址callback URL都选择博客主页

    • 而当博客双线部署在多个云端时，会出现Error : Network Error 错误，此时回调地址callback URL要与_config.yml配置文件中的 config.url 一致，不然会无法登陆。

      1
      callback URL: http://mfln8n.coding-pages.com

    • 参考：

      Gitalk评论初始化无法登陆

      Gitalk评论初始化登录时跳转回首页

17. Live 2D功能

17.1 下载插件和模型

  • 第一步：安装插件 hexo-helper-live2d

    1
    npm install --save hexo-helper-live2d

  • 第二步：安装2D模型：Live2D 模型

    1
    npm install live2d-widget-model-模型名称

17.2 更改模型路径

  • 在博客根目录下新建目录 live2d_models
  • 从目录node_modules中拷贝模型文件，放到live2d_models中

17.3 添加配置

  • 说明文档：Live2D-widget.js.org

  • 修改根目录下的_config.yml配置文件，配置文件示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
     ># Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    ## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
    live2d:
    enable: true
    #enable: false
    scriptFrom: local # 默认
    pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
    pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
    pluginModelPath: assets/ # 模型文件相对与插件根目录路径
    # scriptFrom: jsdelivr # jsdelivr CDN
    # scriptFrom: unpkg # unpkg CDN
    # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
    tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
    debug: false # 调试, 是否在控制台输出日志
    model:
    use:  # 模型名
    # use: live2d-widget-model-wanko # npm-module package name
     # use: wanko # 博客根目录/live2d_models/ 下的目录名
     # use: ./wives/wanko # 相对于博客根目录的路径
     # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
     display:
     position: right
    width: 145
     height: 315
     mobile:
     show: true # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放       
     react:
     opacityDefault: 0.7
    opacityOnHover: 0.8

18. 其他功能

附录：参考资料

本文作者： Chthollists
发布时间： 2020-07-31 20:11:33
最后更新： 2022-01-21 23:09:05
本文标题： Hexo博客搭建系列Chapter9——Hexo博客功能扩展(5/5)
本文链接： https://chthollists.github.io/post/64db259f.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明作者和出处！
知识共享许可协议
支持

感谢您的支持

支付宝
微信
置顶

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

<font color="purple" face="Microsoft YaHei" size= 5><b>待到雄图卷毕 &nbsp;&nbsp;隐居山水里<br>坐看炊烟旖旎 &nbsp;&nbsp;浅池戏双鲤<br> </b></font>