前言
在折腾网站的时候，发现此版本主题是存在点小问题的。
比如首页导航，存在一点样式问题，如下：
在github上也有pull request反馈了这个问题，并提交了代码，正常等作者合并下代码我们更新下版本即可，但作者可能由于其他事情，暂时没有处理。
由于短期可能不会更新，加上自己有点强迫症看着不是很舒服，所以搞了一个临时的解决方案。
临时解决方案
问题原因
问题的主要原因是在源码中有这样一段css，为catalog-list设置 overflow-x: scroll，导致页面样式在没有滚动条的时候，也默认保留底部滚动条的高度，导致和右侧未对齐。
1
2
3
4
5
6
| #catalog-list {
display: flex;
white-space: nowrap;
overflow-x: scroll;
}
|
解决办法
修改此处css，将overflow-x: scroll 修改为 overflow-x: auto，即可解决此问题。
而由于部署会导致依赖代码更新，每次生成静态文件的时候，都会重新生成此文件，所以在工程中不能通过直接修改源码的方式来解决此问题，但是可以通过执行额外的脚本操作来实现。
本地调试环境
1、安装必要的 Node.js 模块
安装 fs-extra 模块，它是 fs 模块的扩展，提供了更便捷的方法来处理文件操作
2、根目录下新建modify-css-dev.js , 我是用npm的方式引入主题依赖，所以此文件是要修改node_modules目录下的css。
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
| const fs = require('fs-extra');
const path = require('path');
const cssFilePath = path.join(__dirname, 'node_modules', 'hexo-theme-anzhiyu', 'source', 'css', '_extra', 'catalog_list', 'catalog_list.css');
fs.readFile(cssFilePath, 'utf8')
.then(data => {
const modifiedData = data.replace(
/#catalog-list\s*{[^}]*overflow-x:\s*scroll;[^}]*}/,
match => match.replace('overflow-x: scroll;', 'overflow-x: auto;')
);
return fs.writeFile(cssFilePath, modifiedData, 'utf8');
})
.then(() => {
console.log('CSS file successfully modified in Dev');
})
.catch(err => {
console.error('Error modifying CSS file in Dev:', err);
});
|
3、在package.json中添加一个scripts，用于在本地调试时执行此脚本
1
2
3
4
| "scripts": {
"modify-css-dev": "node modify-css-dev.js",
"server": "npm run modify-css-dev && hexo server"
}
|
4、后续本地启动项目执行 npm run server 即可。脚本会在执行hexo server 之前，先执行 modify-css-dev.js 脚本，修改css文件。
部署环境
1、 同本地调试环境步骤，如已经下载过依赖忽略即可。
2、根目录下新建modify-css.js ，由于线上部署依赖于hexo generate，生成静态文件，与本地调试目录文件有所差异。
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
| const fs = require('fs-extra');
const path = require('path');
const cssFilePath = path.join(__dirname, 'public', 'css', 'index.css');
fs.readFile(cssFilePath, 'utf8')
.then(data => {
const modifiedData = data.replace(
/#catalog-list\s*{[^}]*overflow-x:\s*scroll;[^}]*}/,
match => match.replace('overflow-x: scroll;', 'overflow-x: auto;')
);
return fs.writeFile(cssFilePath, modifiedData, 'utf8');
})
.then(() => {
console.log('CSS file successfully modified');
})
.catch(err => {
console.error('Error modifying CSS file:', err);
});
|
3、在package.json中添加一个scripts，用于在本地调试时执行此脚本
1
2
3
4
| "scripts": {
"modify-css": "node modify-css.js",
"build": "hexo generate && npm run modify-css",
}
|
4、远端部署依次执行对应脚本 hexo clean , npm run build , hexo deploy即可远端部署。
启动验证：
ps： 等后续修复此问题，在删除对应改造即可。要不绕了一大圈只为了修改一行代码。
