Butterfly魔改准备工作：文件管理魔改代码
前言对于一些全局的改变，我们可以用文件来管理更方便。 步骤 在 \themes\butterfly\source\css 目录下添加 custom.css 文件 在 \themes\butterfly\source\js 目录下添加 custom.js 文件 在内层 _config.yml 文件中搜索 inject 或者直接在外层 _config.butterfly.yml 文件中添加如下代码即可： # Inject# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)inject: head: - <link rel="stylesheet" href="/css/custom.css"> bottom: - <script src="/js/custom.js"></script> 之后，对于一些全局的修改都可以在 custom.css 和 custom.js...
Butterfly魔改4：自动检测深色/浅色模式
前言添加功能：根据系统的深色/浅色模式，自动切换网站的深色/浅色模式。 方法1在 \themes\butterfly\layout\includes\head.pug 的最后添加如下代码： script. function updateTheme() { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light'); } // 初始设置 updateTheme(); // 监听系统主题变化 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme); 方法2（推荐）先跟着Butterfly魔改准备工作：文件管理魔改代码完成准备。 在 custom.js...
Butterfly魔改3：修改副标题字体大小
前言众所周知，Butterfly在可以在 _config.yml 中用 font 配置全局的字体和代码大小，如下图所示： # Global font settings# Don't modify the following settings unless you know how they workfont: global_font_size: 16px code_font_size: 16px font_family: code_font_family:# Font settings for the site title and site subtitleblog_title_font: font_link: font_family: 但是一些更精细的调整就没有了。就比如我把全局大小设置成16px之后，我感觉我首页的副标题的中文字体有点大了，我想改小一点。 步骤在 \themes\butterfly\layout\includes\header\index.pug 中搜索 site-subtitle 可以找到： #site-subtitle ...
Butterfly魔改2：页面渐变切换
准备工作这边使用Pjax来实现页面的动画。Butterfly内置了Pjax插件，直接在 /themes/butterfly/_config.yml 中搜索Pjax，然后把 enable 选项改成 true，如下所示： # https://github.com/MoOx/pjaxpjax: enable: true # Exclude the specified pages from pjax, such as '/music/' exclude: # - /xxxxxx/ 步骤首先，在 /themes/butterfly/source/css 下创建 custom.css 写入如下代码： /* 默认（白天模式） */body { background-color: white; color: black;}[data-theme="dark"] body { background-color: #121212; color: white;}.pjax-leave-active { opacity: 0; background-color:...
Butterfly魔改1：首页大图预加载
前言众所周知，Butterfly的首页大图可以通过在 _config.yml 文件中中配置 index_img 选项来实现。 但是如果你用的是GitHub Pages来部署的，而你配置的首页大图的大小又有好几M，不算太小的话，有时候访问网站就会出现——先加载Butterfly框架出来，此时首页大图是蓝色的默认背景，然后才逐渐把你配置的大图加载出来——的这种情况。 我不喜欢这种情况，因为我希望别人一进网站就被我的首页大图震撼(bushi)，如果图片是慢慢加载出来的话就没有那种震撼感了，甚至说体验感比较一般。所以我准备对Butterfly的源码魔改一波。 以下是Butterfly官方网站的加载情况，可以看到这个图片逐渐加载的现象： 方法1现在我们来魔改一下源代码，以实现图片预加载的功能。 打开 themes/butterfly/layout/includes/layout.pug 这个文件，在 body 的最前面添加如下代码： body(style="visibility: hidden; overflow: hidden;") ...
Hexo报错ssh: connect to host github.com port 22: Connection timed out解决办法
hexo d 报错ssh: connect to host github.com port 22: Connection timed out ssh: connect to host github.com port 22: Connection timed outfatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.htmlError: Spawn failed at ChildProcess.<anonymous>...
Butterfly报错TypeError: coverVal.indexOf is not a function解决办法
魔改了一下Butterfly的源代码之后 hexo g 出现如下报错： TypeError: coverVal.indexOf is not a function at Hexo.<anonymous> (E:\Blog\themes\butterfly\scripts\filters\random_cover.js:15:30) at Hexo.tryCatcher (E:\Blog\node_modules\bluebird\js\release\util.js:16:23) at Hexo.<anonymous> (E:\Blog\node_modules\bluebird\js\release\method.js:15:34) at E:\Blog\node_modules\hexo\dist\extend\filter.js:58:67 at tryCatcher (E:\Blog\node_modules\bluebird\js\release\util.js:16:23) at...