Hexo 魔改记录

2024-12-26

Hexo 侧边栏添加文章合集

教程链接：Hexo侧边栏添加文章合集侧边栏添加文章合集模块，可以提供一个系列文章的整体展示，便于导航到一个具体的内容首先，在 \themes\butterfly\layout\includees\widget 目录下新建 card_collections.pug 文件，并写入： 12345678if theme.aside.card_collections.enable .card-widget .item-headline i(class=theme.aside.card_collections.icon) span=theme.aside.card_collections.title each item in site.data.collections.collections .collections-item-content a(href=item.url)=item.name 在 \themes\butterfly\layout\includees\widget\index.pug 文件中 page...

2024-12-06

Hexo-Butterfly 主题

本文讲述如何搭建 Butterfly 主题并快速美化我们的个人博客，好看的样式所产生的观感会让我们在阅读时有一种心情愉悦的感觉。这里，我们介绍一些简单的配置，更多的配置可以跟着官方配置的方法。许多你需要解决的问题都可以在 (Butterfly 主题官网)[https://butterfly.js.org/]找到解决方案。导航目录 1234567891011121314# _config.butterfly.ymlmenu: 首页: / || fas fa-home 目录 || fas fa-list: 归档: /archives/ || fas fa-archive 标签: /tags/ || fas fa-tags 分类: /categories/ || fas fa-folder-open 娱乐 || fa fa-heartbeat: 音乐: /music/ || fas fa-music 图库: /gallery/ || fas fa-images 电影: /movies/ || fas fa-video 友链: /link/...

2024-11-27

Hexo-Butterfly 安装与部署

Hexo 是一个快速、简洁且高效的博客框架，基于 Node.js 开发，支持 Markdown 编写文章，支持主题和插件扩展，可以快速搭建一个博客网站。Hexo 的社区活跃，不仅有很多优秀的主题和插件可供选择，而且可以在此基础上满足更多的个性化需求 Butterfly 是一个简介、优雅的主题，支持多种配置、插件和功能，适合个人站点使用。 hexo-theme-butterfly 是基于 hexo-theme-melody 的基础上进行开发的主题。 Hexo 安装安装 Hexo 及 Butterfly 主题全局安装 Hexo 12npm install -g hexo-clihexo -v # 查看 hexo 版本号初始化个人博客，此操作后你的个人博客将成为你的默认博客目录，之后所有 hexo 命令都默认在该目录执行。 123hexo init {博客名称}cd {博客名称}npm i 博客内容： source：页面与文章目录，内部的 _posts 用于存放文章，可以看到里面已经有了一个...

2024-12-28

Hexo 修改字体

教程链接：Butterfly修改字体这里以阿里妈妈数黑体iconfont-阿里巴巴矢量图标库为例进行演示。下载后得到文件我们选择 AlimamaShuHeiTi-Bold.ttf 文件放入到我们的项目中。在 source/styles 目录下新建文件夹 fonts/，把 AlimamaShuHeiTi-Bold.ttf 放入到 fonts 文件夹下。之后，在 styles/css/font.css 目录下，新建 font.css 文件，文件内容如下： 12345@font-face { font-family: 'AlimamaShuHeiTi'; font-display: swap; src: url('../fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype');} 字体文件有 ttf, woff, woff2, otf 多种格式，ttf 对应的格式是 truetype，woff2 对应的格式是...

2024-12-28

Hexo 修改鼠标样式

参考链接：hexo+butterfly主题利用css部署网站鼠标指针样式瞎子自己中意的鼠标指针，推荐致美化网站进行下载。将 cursor 格式 .cur 的鼠标指针图片放入到 hexo_blog\themes\butterfly\source\cur 路径下，这里我放了正常移动的 normal.cur 和点击链接的 link.cur，后续可以根据需求进行添加。在本地 styles\css 目录下创建 cursors.css 并将以下代码复制粘贴到 cursors.css 进行保存 123456789body { cursor:url('/cur/normal.cur'), default; } a, link { cursor:url('/cur/link.cur'), default; } 在站点配置文件 _config.butterfly.yml 中找到 inject，在 head 处引入该文件： 1- <link...

2024-12-26

Hexo 小标题旋转风车设置

教程链接：Hexo小标题旋转风车设置找到主题配置文件 _config.butterfly.yml 把 beautify 的 title-prefix-icon 处修改为 \f863 123beautify: enable: true title-prefix-icon: '\f863' 在 inject 的 head 处引入以下文件： 123inject: head: - "<style>#article-container.post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animation: avatar_turn_around 1s linear infinite;...