Wnxy's Blog HomeArchivesTagsCategoriesMessageLinksAboutInterestClover
Hexo Melody主题博客添加文章更新和多评论系统
|博客搭建|
Word count: 1.9k|Reading time: 9 min

一、前言

  博客添加文章更新时间是我想了很久的事，写博客的时候经常有修改旧博客的习惯，每次旧博客更新完毕推送到仓库时发现更新过的博客依然埋没在好多页之后，因为Hexo博客默认以文章的发布时间排序，而不是更新时间。

  折腾多评论系统是因为我之前使用的博客评论系统是Valine国际版（Valine国内版需要实名认证，太麻烦了），不稳定，有时候会域名失效，导致博客无法评论，所以想配置Disqus和Valine双评论系统。

二、正文

2.1 添加文章更新时间

  本站使用的是Melody，无论是文章列表缩略页还是博客文章页面均没有文章更新时间的字段。修改文件\themes\melody\layout\includes\recent-posts.pug文件中10-16行之间的内容，给文章列表页添加文章更新时间。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
each article in page.posts.data
  .recent-post-item.article-container
    - var link = article.link || article.path
      a.article-title(href=url_for(link))= article.title || _p('no_title')
    if (article.top)
      span.article-meta
        i.fa.fa-thumb-tack.article-meta__icon.sticky
        span.sticky= _p('sticky')
        span.article-meta__separator(style="margin-right: 0.3rem") |
    if (theme.post_meta.date_type)
      //- var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
      - var date_type1 = 'date'
      - var date_type2 = 'updated'
      time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] 发表于 #[=date(article[date_type1], config.date_format)]
      span.post-meta__separator |
      time.post-meta__date #[i.fa.fa-calendar-check-o(aria-hidden="true")] 更新于 #[=date(article[date_type2], config.date_format)]
    if (article.layout === 'slides')
      a.article-type(href='/slides') Slides
    if (theme.post_meta.categories && article.categories.data.length > 0)
      span.article-meta
        span.article-meta__separator |
        each item, index in article.categories.data
          i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
          a(href=url_for(item.path)).article-meta__categories #[=item.name]
          if (index < article.categories.data.length - 1)
              i.fa.fa-angle-right(aria-hidden="true")
    if (theme.post_meta.tags && article.tags.data.length > 0)
      span.article-meta.tags
        span.article-meta__separator |
        each item, index in article.tags.data
          i.fa.fa-tag.article-meta__icon(aria-hidden="true")
          a(href=url_for(item.path)).article-meta__tags #[=item.name]
          if (index < article.tags.data.length - 1)
            span.article-meta__link -
    if (article.layout === 'slides')
      include ./mixins/slide.pug 
      - var iframeLink = article.iframe || link
      +slideIframe(iframeLink)
    else if article.excerpt
      .content!= article.excerpt
      a.more(href=url_for(link) + '#more')= _p('read_more')
    else if theme.auto_excerpt && theme.auto_excerpt.enable
      - const content = strip_html(article.content)
      - let expert = content.substring(0, theme.auto_excerpt.length) 
      - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
      .content!= expert
      a.more(href=url_for(link) + '#more' style="margin-top: 14px")= _p('read_more')
    else
      .content!= article.content
    hr

  修改主题文件melody.yml中post_meta字段内容，将date_type值更改为both，这样做的原因是\themes\melody\layout\post.pug文件内可走theme.post_meta.date_type === 'both'分支。实现博客文章页添加文章更新时间。

1
2
3
4
5
post_meta:
  #date_type: created # created or updated
  date_type: both
  categories: true
  tags: true

  \themes\melody\layout\post.pug文件第12行：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
block top_img
  - var top_img = page.top_img || theme.post_meta.top_img || theme.top_img || config.top_img
  if (top_img && page.top_img !== false)
    - var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
    - var flag = top_img === true ? 'no-bg' : ''
    div#top-container(style=bg_img class=flag)
      include ./includes/header.pug
      #post-info
        #post-title= page.title || _p('no_title')
        #post-meta
          if (theme.post_meta.date_type)
            if (theme.post_meta.date_type === 'both')
              time.post-meta__date
                i.fa.fa-calendar(aria-hidden="true")
                =' '+_p('post.created')+' '+date(page.date, config.date_format)
                span.post-meta__separator |
                i.fa.fa-calendar-check-o(aria-hidden="true")
                =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
            else
              - var date_type = theme.post_meta.date_type === 'updated' ? 'updated' : 'date'
              time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(page[date_type], config.date_format)]
          if (theme.post_meta.categories && page.categories.data.length > 0)
            if (theme.post_meta.date_type)
              span.post-meta__separator |
            each item, index in page.categories.data
              i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
              a(href=url_for(item.path)).post-meta__categories #[=item.name]
              if (index < page.categories.data.length - 1)
                 i.fa.fa-angle-right(aria-hidden="true")
          if (theme.disqus.enable && theme.disqus.count)
            if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
              span.post-meta__separator |
            i.fa.fa-comment-o.post-meta__icon(aria-hidden="true")
            a(href=url_for(page.path) + '#disqus_thread')
              span.disqus-comment-count(data-disqus-identifier=page.path)
          if (theme.wordcount && theme.wordcount.enable)
            .post-meta-wordcount
              span= _p('post.wordcount') + ': '
              span.word-count= wordcount(page.content)
              span.post-meta__separator |
              span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
  else
    div#top-container.plain
      include ./includes/header.pug

2.2 修改文章排序方式

  网上搜了一些相关资料，看到有人说hexo有默认的updated参数，默认跟文章的创建时间相同，只需要更改主站配置文件_config.yml的order_by: -date修改为order_by: -updated即可，可是我尝试更改之后并没有达到想要的效果。

  这里记录下我的修改方法，首先在博客文章.md文件front-matter中添加updated为文章的更新时间：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mathjax: true
top: false
declare: true
title: Hexo Melody主题博客添加文章更新和多评论系统
date: 2022-05-15 22:03:38
updated: 2022-05-15 22:03:38
schedule: 2022-05-15 22:03:38
tags:
	- Hexo
	- Melody
	- Disqus
	- DisqusJs
categories:
	- 博客搭建

  利用实现文章置顶功能的相关文件实现文章按更新时间排序，修改文件node_modules\hexo-generator-index-pin-top\lib\generator.js中的内容为：

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.updated - a.updated; // 若top值一样则按照文章更新日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.updated - a.updated; // 都没定义按照文章更新日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

  实现文章按照更新时间排序。

2.3 添加Disqus评论系统

  本站原本使用Valine评论系统，在保留原有的评论系统的同时添加Disqus评论系统。Melody主题博客默认至多配置一个评论系统，更改\themes\melody\layout\index.pug文件内容：

1
2
3
4
5
6
7
8
9
10
11
span.post-meta__comment 注：本站配置Disqus和Valine双评论系统，可选其中之一使用！🧐🧐🧐
if theme.disqus.enable
  include ./disqus.pug
if theme.laibili && theme.laibili.enable
  include ./laibili.pug
if theme.gitment && theme.gitment.enable
  include ./gitment.pug
if theme.gitalk && theme.gitalk.enable
  include ./gitalk.pug
if theme.valine && theme.valine.enable
  include ./valine.pug

  在主题配置文件melody.yml中配置Disqus和Valine评论系统。

2.4 配置DisqusJs

  Disqus千般万般好，就是访问时需要走代理，国内网络环境下无法使用Disqus评论，也无法查看已有的Disqus评论，DisqusJs可以自动判断访问者的网络情况，即使无法使用Disqus评论时也可以加载已有的Disqus评论查看。

  ……

  （要不要再折腾了？？？）

  我的博客只提交了Google收录，能访问到我博客的人大概都有代理吧！！！🤣🤣🤣

三、参考文献

  1. hexo笔记：文章排序
  2. 利用vim实现HEXO文章按更新时间自动排序
  3. Hexo NexT 添加 Disqus 评论区
  4. Hexo添加评论系统Disqus
  5. Hexo 使用 DisqusJS 代理评论
Author: wnxy
Link: https://wnxy.xyz/2022/05/15/Hexo-melody-blog-beautification2/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
HexoMelodyDisqusDisqusJs
注：本站配置Disqus和Valine双评论系统，可选其中之一使用！🧐🧐🧐