2024-10-30 厉飞雨 阅读(28) 评论(0) 赞(1)

新版本 {#新版本} ========== > 原理：通过hexo的api获取所有文章，然后比较时间得到最新文章的名字，返回给pug文件比较并添加元素。 修改page.js {#修改page-js} ---------------------- 首先我们需要在 `themes\butterfly\scripts\helpers\page.js` 内加入一段内容（位置...

2024-10-30 厉飞雨 阅读(23) 评论(0) 赞(3)

创建文件 {#创建文件} ============ 如果想魔改和美化，添加自定义文件是不可避免的。下面来详细说一下css和js文件的创建和引入，其他文件同理。 我们找到`博客根目录`下的`source`文件夹（主题的source虽然也可以，但是不推荐） 在里面创建`js`和`css`文件夹，也可以创建其他文件夹，例如存放图片的`img`文件夹，存放字体的`font`文件夹...

2024-10-30 厉飞雨 阅读(25) 评论(0) 赞(2)

前言 {#前言} ======== 发现自带的样式实在太简单，写css覆盖的话还很麻烦，夜间模式看的话很突兀。 所以我就稍微改了一下，只要它的数据，样式全由自己来写。 添加代码 {#添加代码} ============ 代码如下所示： |-----------------------------------------------------------------...

2024-10-30 厉飞雨 阅读(36) 评论(0) 赞(2)

1. 安装插件，在博客根目录 `[Blogroot]` 下打开终端，运行以下指令： |-----------|-------------------------------------------------| | ``` 1 ``` | ``` npm install hexo-butterfly-clock --save ``` | 2. 添加配置信息，以下...

2024-10-30 厉飞雨 阅读(29) 评论(0) 赞(1)

1. 新建 `[Blogroot]\themes\butterfly\layout\includes\custom\sun_moon.pug`, 这部分其实实质上就是一个 `svg` 文件，通过 `js` 操作它的旋转显隐，淡入淡出实现动画效果。 |---------------------------|---------------------------------...

2024-10-30 厉飞雨 阅读(25) 评论(0) 赞(4)

1. 参照参考教程中的[Butterfly 友链界面配置教程](https://butterfly.js.org/posts/dc584b87/#%E5%8F%8B%E6%83%85%E9%8F%88%E6%8E%A5)先配置好默认友链页面。 2. 在 Hexo 博客根目录`[Blogroot]`下打开终端，输入 |-----------|--------------...

2024-10-30 厉飞雨 阅读(30) 评论(0) 赞(4)

1. 修改`<BlogRoot>\themes\butterfly\_config.yml`，其中`background_dark`参数为深色模式下的图片地址。 |-------------------|------------------------------------------------------------------------------...

2024-10-30 厉飞雨 阅读(38) 评论(0) 赞(4)

1. 修改`<BlogRoot>\themes\butterfly\_config.yml` |---------------------|--------------------------------------------------------------------------------------------------------------...

2024-10-30 厉飞雨 阅读(30) 评论(0) 赞(4)

引言 {#引言} ======== 灵感来源于[eurkon](https://blog.eurkon.com/)。单靠肉眼识别字体大小来判断标题等级不是件容易的事情，若 h1\~6 标题使用不同图标的话，那么识别会容易许多。 小插曲：我之前在此问题上花了很多功夫，比如加大各等级标题字体大小之间的差值（肉眼还是难以分别）、更换颜色（确实好分辨，但主色过多不符合我对网站视觉美...

2024-10-30 厉飞雨 阅读(17) 评论(0) 赞(0)

预览效果 {#预览效果} ============  实现方法 {#实现方法} ============ 1. 修改 themes\\butterfly\\layout\\404.pug，直接 copy 过去...