博客翻页显示修复

发表于
字数统计 656 | 阅读时长 3

关于问题

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
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.0.0"
  },
  "dependencies": {
    "hexo": "^4.0.0",
    "hexo-deployer-git": "^2.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-searchdb": "^1.1.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-helper-live2d": "^3.1.1",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-wordcount": "^6.0.1"
  }
}

这是目前使用的hexo的package.json，可以看到使用的是4.0版本，在翻页存在bug。

类似这样，原因在于hexo的pagination函数存在问题。

解决方案

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
{
  "name": "hexo-theme-next",
  "version": "5.1.2",
  "description": "Elegant theme for Hexo",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "gulp"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iissnan/hexo-theme-next.git"
  },
  "keywords": [
    "NexT",
    "Hexo"
  ],
  "author": "iissnan <iissnan@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/iissnan/hexo-theme-next/issues"
  },
  "homepage": "https://theme-next.iissnan.com",
  "devDependencies": {
    "coffee-script": "^1.10.0",
    "gulp": "^3.9.0",
    "gulp-jshint": "^1.12.0",
    "gulp-shell": "^0.6.1",
    "js-yaml": "^3.8.1",
    "jshint-stylish": "^2.1.0",
    "stylint": "^1.5.9"
  },
  "dependencies": {
    "live2d-widget-model-wanko": "^1.0.5"
  }
}

这是目前使用的Next主题的package.json，可以看到使用的是5.1的版本，后续版本在主题中解决了hexo中的pagination问题，但是Next主题的升级目前又要配置一番且新版本还会存在另外Bug，所以找到了简单方法：

将\next\layout_partials\pagination.swig文件进行替换，替换成最新版Next中的该文件即可解决。

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left"></i>',
        next_text: '<i class="fa fa-angle-right"></i>',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

换为：

1
2
3
4
5
6
7
8
9
10
11
12
{%- if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left" aria-label="'+__('accessibility.prev_page')+'"></i>',
        next_text: '<i class="fa fa-angle-right" aria-label="'+__('accessibility.next_page')+'"></i>',
        mid_size : 1,
        escape   : false
      })
    }}
  </nav>
{%- endif %}

在此编译，显示正常。

注：转载文章请注明出处，谢谢~