· 更新于 2021-04-29
实用工具►Hexo

第2节：Hexo的进阶

一、资源文件的显示

创建md的同名文件夹后，资源文件的路径不能写为./xxx/1.jpg(虽然markdown有效)，只能为xxx/1.jpg。

其他参考：hexo官网：资源文件夹

2、缩放的 gif 无法显示

1
2
3
4
5
6
7
8
9
# markdown正常显示，hexo网页无法显示
<img src="日志系统/devtool_log_home_page.gif" alt="devtool_log_home_page" style="zoom:50%;" />

# markdown无法显示，hexo网页正常显示
<!-- 给 Hexo 生成网页用，用官方推荐的标签插件 -->

<div style="width:30%">
  {% asset_img "devtool_log_home_page.gif" devtool_log_home_page %}
</div>

二、hexo链接的持久化

参考文档：

永久链接（Permalinks）的官网文档：https://hexo.io/zh-cn/docs/permalinks.html

hexo链接持久化终极解决之道：https://blog.csdn.net/yanzi1225627/article/details/77761488?utm_source=blogxgwz4

1、背景

大家知道hexo默认的链接是http://xxx.yy.com/2018/12/14/hello-world 这种类型的，这源于站点目录下的配置**_config.yml**里的配置:permalink: :year/:month/:day/:title/，所以，我们当我们在浏览器中浏览的时候，其地址实际上为如上所述。因而我们在处理链接跳转的时候，就也得跟着加上这部分前缀了。

2、链接优化

由于上诉中的日期前缀部分通常容易变化，所以为了我们的链接持久化，我们需要将其去掉，即我们在**_config.yml**中做如下修改：

1
2
# permalink: :year/:month/:day/:title/
permalink: :title/

此时网页链接写法

设文件《1Hexo的使用.md》和《2Hexo的进阶.md》处于同级目录下，则

当你在《1Hexo的使用.md》的时候想要链接进《2Hexo的进阶.md》的时候，

平时在markdown中的写法：./2Hexo的进阶.md

现在在Hexo网页中的写法1：../2Hexo的进阶

*现在在Hexo网页中的写法2：/文档管理/Hexo/2Hexo的进阶（因为根目录为/）

附：如果你想保持.md后缀，可将上诉改为

1
2
# permalink: :year/:month/:day/:title/
permalink: :title/.md

三、修改博客文章顺序/解决置顶问题

Hexo默认只提供了按发布日期的排序。

1、自定义排序优先级原理

修改排序的原理：在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。

怎么置顶：每篇文章增加一个属性top，普通文章设置值为1，置顶文章设置为1以上。

1
2
3
4
5
6
7
title: Hexo增加置顶属性
date: 2018-09-14 14:57:57
top: 1
tags:
  - 博客
  - Hexo
  - 置顶

最终实现的排序逻辑通常是：

  1. 优先按 top 值降序：top 值越大的文章排得越靠前。
  2. top 值相同或没有时：再按 date 日期降序排列（即谁新谁靠前）。

2、自定义排序优先级实现

生成首页的是扩展插件node_modules/hexo-generator-index中。所以修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行文章top值排序。

最终的代码如下：

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
'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);

  // >>>>>>> 添加以下内容，实现置顶功能 >>>>>>>>
  posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) {
        if(a.top == b.top) return b.date - a.date;
        else return b.top - a.top;
    }
    else if(a.top && !b.top) {
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date;
  });
  // <<<<<<<< 添加以上内容，实现置顶功能 <<<<<<<<
  
  var paginationDir = config.pagination_dir || 'page';
  var path = config.index_generator.path || '';

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

四、让部分文件不显示在feed中

想让以下文件不在feed中显示，但又不影响其网页地址的访问。

1
2
3
4
5
6
7
8
9
source/_posts/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5js/dvlp_h5js_demo_hardware.json
source/_posts/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5_open_app/dvlp_h5_open_app_app_route_url_demo.html


http://localhost:4000
https://dvlproad.github.io

https://dvlproad.github.io/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5js/dvlp_h5js_demo_hardware.json
https://dvlproad.github.io/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5_open_app/dvlp_h5_open_app_app_route_url_demo.html

要确保特定的 .json 文件不被Hexo渲染并出现在feed中，你可以使用 skip_render 配置项。这个配置项告诉Hexo忽略指定的文件或文件夹，直接将它们复制到 public 目录中，而不进行任何处理。

根据你希望排除的文件路径，你应该在Hexo的配置文件 _config.yml 中添加如下配置：

1
2
skip_render:
  - '_posts/Architecture架构/框架相关/WebView相关/h5_native_interacte/h5js/dvlp_h5js_demo_hardware.json'

这行配置会确保 dvlp_h5js_demo_hardware.json 文件不会被Hexo渲染，并且不会出现在生成的feed中。请注意，路径是相对于 source 目录的，并且不以斜杠 / 开头。

完成配置后，为了确保更改生效，你需要执行以下命令来清除Hexo的缓存并重新生成站点：

1
2
hexo clean
hexo generate

使用 skip_render 配置项是处理这种情况的推荐方法，因为它可以精确控制哪些文件不应该被Hexo处理。这样，你就可以确保只有你希望被渲染的文件才会出现在最终的站点中。

四、其他

其他参考文章：hexo+github博客搭建，hexo目录，hexo设置详解