---
date: 2022-09-05
title: VuePress 实现 md5 及其他算法生成唯一固定九位数路径
category: experience
cover: /images/631f1ecfabe51.webp
recommend: true
original: true
location: 甘肃
tags:

- VuePress

---

### 前言

最近在研究用 `VuePress` 制作主题，遂发现目前的主题基本上都是以文件名来作为路径的，但是这样的弊端就是在博文多了之后非常的不好归档，想改东西之类的都无从下手，而且看起来也不太整齐美观。

### 实现思路

我们首先通过 `js-md5` 对文章的标题进行唯一不重复加密，加密之后通过获取到 `md5` 值的 `Unicode` 编码值进行求余数、求倍数等操作精简到九位数。

### 实现代码

```js
// .vuepress/config.js
module.exports = {
    plugins: [
        require('./theme/public/js/index.js')
    ]
}

// ./theme/public/js/index.js
const md5 = require('js-md5')

const encode = (str) => {
    //定义密钥，36个字母和数字
    const key = "ABC012DEF345GHI678JKL9MNOPQRSTUVWXYZ";
    const l = key.length;
    const a = key.split(""); //把密钥字符串转换为字符数组
    let s = "", b, b1, b2, b3; //定义临时变量
    for (let i = 0; i < 3; i++) {
        b = str.charCodeAt(i); //逐个提取每个字符，并获取Unicode编码值
        b1 = b % l; //求Unicode编码值得余数
        b = (b - b1) / l; //求最大倍数
        b2 = b % l; //求最大倍数的于是
        b = (b - b2) / l; //求最大倍数
        b3 = b % l; //求最大倍数的余数
        s += a[b3] + a[b2] + a[b1]; //根据余数值映射到密钥中对应下标位置的字符
    }
    return s.toLocaleLowerCase();
}

module.exports = (options = {}, context) => ({
    name: 'qblog-theme-utils',
    extendPageData($page) {
        if ($page.pid === 'post') {
            $page.frontmatter.permalink = `/p/${encode(md5($page.frontmatter.title))}.html`
        }
    }
})
```