前言

打开网站突然发现网站的样式乱了，加载不出原来的布局，也不知道哪里出问题了，还以为是之前修改butterfly的pug源代码添加东西出现的（其实不是），于是去github把原来的仓库删了，重新设置了github pages仓库，还在本地重装了一遍hexo（node.js和git可以用之前装的，这两个不用重新下载）

崩溃页面如下，可以看到js代码和api接口都能正常调用，除了背景图片看不到，其他图片都能正常显示，就是样式加载不出来

崩溃页面1

崩溃页面2

崩溃原因

跟复制和按下F12时弹出提示用到的一个css有关，估计是名字冲突了，一开始设置复制提示时能够正常使用，因为是从互联网获取的css资源，带有URL，所以没有什么冲突，但是后面我把用到的js和css下载到本地存储了（怕某一天链接404了），然后在主题配置文件G:\hexo\_config.butterfly.yml将互联网引用改为相对路径引用，样式文件名为index.css，index.css文件名可能和butterfly源代码中某个样式文件冲突了!!导致主题的样式加载不出来，就崩溃了

1
2
3
4
5
6
7
inject:
  head:
    # 原来的引用方法，通过URL引用不会引起本地冲突，能正常显示网站样式
    - <link rel="https://cdn1.tianli0.top/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css"> 
    
    # 下载到本地之后的引用为相对引用，可能和本地文件产生冲突导致样式崩溃
    - <link rel="/css/index.css">

解决方法

两种方法

  • 1.使用原来的URL链接，不用将css文件下载到本地，直接引用互联网资源即可
  • 2.将用到的js文件和css文件存储到本地，使用相对路径引用，但是要把index.css重命名，不能使用这个名字，我改为vueindex.css,随后相对引用也能恢复页面正常布局，最好将index.js文件也重命名一下，因为index的名字太敏感，不知道后面修改会不会发生冲突

重装hexo注意事项

  1. 要把之前npm下载的插件先全部下载一遍，截止目前(2024-09-13)使用到的插件如下，配置完之后还要去配置文件添加相应内容才能应用
  • npm install –save hexo-blog-encrypt #文章加密
  • npm install hexo-renderer-pug hexo-renderer-stylus –save # pug 以及 stylus 的渲染器
  • npm install hexo-butterfly-clock-anzhiyu –save #侧边栏电子钟
  • npm install hexo-butterfly-footer-beautify –save # 页脚计时器及页徽
  • npm i hexo-butterfly-article-double-row –save # 文章双侧栏
  • npm install hexo-butterfly-wowjs –save # 卡片动画
  • npm install hexo-generator-search –save # 文章搜索功能
  • npm install hexo-wordcount –save # 字数统计插件
  • hexo-deployer-git # 一键部署并提交到github等仓库
  • npm install hexo-pdf –save # hexo-pdf插件
  • 还有一个git推送插件
  1. 安装butterfly插件时用下面的命令 ，不要用npm安装！！否则根目录下不会有butterfly文件夹，也没有_config.butterfly.yml配置文件！！
1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

提示

  1. 重装完成后可以将原来项目的配置文件例如_config.butterfly.yml、_config.yml等配置文件直接复制到新项目去，如果插件已经安装，可以直接生效

备份

一定要将源代码文件夹进行备份！！最好多处云备份，放到Gitee或者百度云盘仓库上去，免得某天崩溃了不好重配源代码