专栏首页编程大道修改Hexo自动生成的HTML文件名

修改Hexo自动生成的HTML文件名

导读

我们在使用Hexo框架生成静态博客时,其实是将你写好的.md文件输出成HTML文件进行渲染,其中HTML的文件名称就是.md的文件名称。

而我们为了编辑文章方便,为了通过文件名就知道这是哪篇文章,通常是把.md文件命名成中文的甚至是文章的标题,那么生成HTML文件时也就是中文的文件名了。

例如:钢铁是怎么炼成的.md经过 hexo g 命令会生成钢铁是怎么炼成的.html;执行 hexo d 命令会将文件推送到你的仓库,那么你访问这篇章时,对应的地址栏就是 http://xxxx/.../钢铁是怎么炼成的.html ,这样看起来很别扭,对搜索引擎也不友好。

那么我们如何修改为以数字加字母命名的HTML呢?今天我们就来探究一下。

(1)修改生成HTML时的命名策略

我们从Hexo是基于Node.js的,Hexo生成HTML文件这句话的到启发,Hexo肯定会获取文件夹下的所有.md文件生成HTML文件,命名格式xxx.md-->xxx.html,然后肯定会创建目录存放HTML文件。

这时候我们会想,我们是不是可以在Hexo生成HTML文件时,修改HTML的命名策略,即将原始的命名方式改为我们自定义的命名方式?

有了思路说干就干。于是去Hexo的各个文件里去找,它是在哪转换文件的。当我找了好几个文件后,我放弃了,文件太多了,太难找了,无异于大海捞针。在hexo模块里找了很久也没找到。。。

(2)修改HTML文件名

既然刚才那种方法行不通,那么我们就另辟蹊径,在Hexo生成HTML文件后,再去修改文件名。

JS怎么获取目录下的所有文件呢?搜了一下说Node.js可以,刚好Hexo是基于Node.js的。

于是任意目录下(除hexo目录)创建rename.js文件如下,其中新的文件名生成策略可以自己定义。

//引入fs操作文件
var fs = require('fs');
//引入jquery
var join = require('path').join;
var jsdom = require('jsdom');
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
global.window = document.defaultView;
global.jQuery = require('jquery')(window);
const $ = require('jquery')(window);


var eng = ['a','b','c','d','e','f','g','h','i','j'];
//生成随机6位数字字母 全路径新文件名
function getNewNameRandom(_file){
  var fiveInt = Math.floor(Math.random()*89999+10000);//五位随机数
    var eng_index = Math.floor(Math.random()*10+1);//一位字母
  return _file.substr(0,_file.lastIndexOf('\\')+1) + eng[eng_index-1] + fiveInt + ".html";//新文件名,全路径
}
function getAllFiles(jsonPath){
    let jsonFiles = [];
    function findJsonFile(path){
      let files = fs.readdirSync(path);
      files.forEach(function (item, index) {
          let fPath = join(path,item);
          let stat = fs.statSync(fPath);
          if(stat.isDirectory() === true) {
              findJsonFile(fPath);
          }
          if (stat.isFile() === true) { 
            jsonFiles.push(fPath);
          }
      });
  }
    findJsonFile(jsonPath);
    console.log(jsonFiles);//指定目录下的文件,包括子目录
    return jsonFiles;
}
function doFileRename(){
  var jsonFiles = getAllFiles("F:/static/page");//生成的HTML文件
  for(var i=0;i<jsonFiles.length;i++){
      var _file = jsonFiles[i];
    var newName = getNewNameRandom(_file);//新文件名,全路径
    console.log(newName)
    fs.rename(_file,newName,function(err){//重命名
      if(err){
        console.log("重命名失败");
      }else{
        console.log("重命名成功");
      }
    })
    }
}
doFileRename();

然后在这个JS所在目录打开命令行,执行node rename.js

看日志,是全部成功了,找到对应目录,真的成功了。

存在的问题

再次hexo g时,又会生成原来的那样中文命名的HTML,我们重命名的还在(执行 hexo clean 就不在了),这不是我们想要的,或许你会说,再执行一次 node rename.js,这不是我想要的,因为,这样执行每次原来的文章页面的名字都会变,我不知道这会不会影响SEO,即时不会也不想这样,因为加入别人收藏了你的文章链接,但你的文章HTML名字变了,拿别人收藏的就无效了啊。

所以这种方式会存在这个最严重的问题。

(3)Base64生成文件名

修改JS代码

//引入fs操作文件
var fs = require('fs');
//引入jquery
var join = require('path').join;
var jsdom = require('jsdom');
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
global.window = document.defaultView;
global.jQuery = require('jquery')(window);
const $ = require('jquery')(window);


var eng = ['a','b','c','d','e','f','g','h','i','j'];
//文件名Base64后 根据算法从编码中取6位作为新文件名
function getNewNameBase64(_file){
  var fileName = _file.substr(_file.lastIndexOf('\\')+1,_file.length);//文件名
  var fi_bs64 = Buffer.from(fileName.substr(0,fileName.lastIndexOf('.'))).toString('base64')//转成base64编码
  var arr = fi_bs64.split("");
  var len = arr.length;
  var fis = "";
  for(var i=1;i<=6;i++){
    var s1 = arr[Math.floor(len/(2*i))];
    if(s1=='/'||s1=='+'){
      var eng_index = Math.floor(Math.random()*10+1);
      s1 = eng[eng_index-1];
    }
    fis = fis + s1;
  }
  console.log(fis)
  return _file.substr(0,_file.lastIndexOf('\\')+1) + fis + ".html";
}
function getAllFiles(jsonPath){
    let jsonFiles = [];
    function findJsonFile(path){
      let files = fs.readdirSync(path);
      files.forEach(function (item, index) {
          let fPath = join(path,item);
          let stat = fs.statSync(fPath);
          if(stat.isDirectory() === true) {
              findJsonFile(fPath);
          }
          if (stat.isFile() === true) { 
            jsonFiles.push(fPath);
          }
      });
  }
    findJsonFile(jsonPath);
    console.log(jsonFiles);//指定目录下的文件,包括子目录
    return jsonFiles;
}
function doFileRename(){
  var jsonFiles = getAllFiles("F:/static/page");//生成的HTML文件
  for(var i=0;i<jsonFiles.length;i++){
      var _file = jsonFiles[i];
    var newName = getNewNameBase64(_file);//新文件名,全路径
    console.log(newName)
    fs.rename(_file,newName,function(err){//重命名
      if(err){
        console.log("重命名失败");
      }else{
        console.log("重命名成功");
      }
    })
    }
}
doFileRename();

效果如下,看日志,是全部成功了

找到对应目录,真的成功了。

存在的问题

这种方法解决了上面那个方法存在的问题,即每次执行`node rename.js`只要原文件名不变,生成的新文件名不变。但是需要限制文件名不能变,否则新文件名还是会变。还有一点不能重复执行 node rename.js ,因为会根据新的再次生成新的。

小结

第2、3种方式都需要注意的是,

1、新名字的生成规则,要保证唯一性,不能重复

2、每次 hexo g 之后 hexo d 之前,要执行 node rename.js

3、不要重复执行

4、第一种不太可行,推荐第二种

(4)修改文件生成规则

以上两种方式都需要我们来写代码,而且要手动执行 node rename.js

对于这么懒的我来说很不方便,有没有更好的办法?答案是肯定的。

我们可以找到Hexo的根配置文件_config.yml,打开它,找到下图这个

我把他改成这样了,page是目录,执行 hexo g 会在public下生成,我让生成的HTML文件都放在page下,:fileName.html 是HTML的命名格式,其中 fileName 是个变量。这个变量从哪来?

从你的.md文件里,如下图,在你的文章头部增加这个变量并指定一个值,这就是生成HTML时的文件名,注意也是不要和其他文件重复

也就是说,你的每篇文章只要头部加了这个属性,并赋值且确保唯一就OK了,不用像上面那两种方式那样麻烦了。

只样在执行 hexo g 后就变成这样了

执行 hexo d 后访问我的网站就是这样了,我的个人博客:

https://itwalking.top 欢迎访问

为了避免忘记在写文章时写fileName属性,我们可以修改模板,在scaffolds目录下有三个模板

在模板添加fileName属性

存在的问题

需要手动写文件的名字,且要保证唯一,但是比较方便

总结

推荐使用第3和第4种,第3种主要就是解决每次执行hexo g后生成的HTML文件名不变(前提是.md文件名不变),但不要忘了执行 node rename.js;第4种只要自己有一个自己的命名规范就好了,比如:今天是五月m,日期29,周三w,时间是17点,文件名就可以就是m29w17。

本文分享自微信公众号 - 编程大道(learn_code),作者:ITwalking

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何向女朋友解释int==Integer为true

    通常大家对此的解释是,==对于基本类型来说比较的是值,对于引用类型来说比较的是引用,即指向的对象的内存地址。这样解释没错,b==c结果为false毋庸置疑,因为...

    编程大道
  • 在?MySQL事务隔离级别了解一下?

    事务的四大ACID 属性:Atomicity 原子性、Consistency 一致性、Isolation 隔离性、Durability 持久性。

    编程大道
  • 初识Zookeeper你应该了解的知识

    ZooKeeper是一个开放源码的分布式协调服务,它是集群的管理者,监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作。最终,将简单易用的接口和性能...

    编程大道
  • 1. 什么是Xamarin

    Xamarin 是一个 .NET 开源的平台,主要用于通过 .NET 构建 IOS 、 Android 以及 Windows App 。利用 Xamarin 我...

    喵叔
  • Canvas 图片绕边旋转的小动画

    /** * 图片绕边旋转的小动画 */ function initDemo10() { var canvas = document.getEleme...

    就只是小茗
  • 【AI TOP 10】马化腾:AI技术沦为网络黑产新工具;网易区块链项目被传夭折; 人工智能可以让狗跟人说话

    新智元 “每日AI ·TOP 10” 是新智元推出的一档快读栏目,精选汇集每日国内外最重大产业新闻,第一时间为读者送上新鲜资讯,敬请关注。 产业观察 马化腾:A...

    新智元
  • [读书笔记]C#学习笔记五: C#3.0自动属性,匿名属性及扩展方法

    一枝花算不算浪漫
  • spock在springboot中的使用 转

    在spring环境中使用spock,也就是要自动注入被测试的实例,不需要我们手动初始化实例。

    yawn
  • Android 系统架构

    Android 系统架构分为五层 从上到下依次为应用层、应用框架层、系统运行库层、硬件抽象层与Linux内核层。

    Yif
  • SparkStreaming如何优雅的停止服务

    我是攻城师

扫码关注云+社区

领取腾讯云代金券