Butterfly 主题配置
基础设置语言
修改站点配置文件 _config.yml
默认语言是 en
主题支持三种语言
default(en)
zh-CN (简体中文)
zh-TW (繁体中文)
网站资料
修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改博客根目录的_config.yml
导航菜单
修改 主题配置文件
123456789Home: / || fas fa-homeArchives: /archives/ || fas fa-archiveTags: /tags/ || fas fa-tagsCategories: /categories/ || fas fa-folder-openList||fas fa-list: Music: /music/ || fas fa-music Movie: /movies/ || fas fa-videoLink: /link/ || fas fa-linkAbout: /about/ || fas fa-heart
必须是 /xxx/,后面||分开,然后写图标名。
如果不希望显示图标,图标名可不写。
默认子目录是展开的,如果你想要隐藏,在 ...
Butterfly音乐播放器的添加
说明:该配置基于 Butterfly 主题版本为 4.2.0,基本参考官方教程,不修改 pug 文件,主题已经集成了相关的设置,该博文对其部分内容进行补充。参考链接在文章末尾给出。
安装和配置安装 hexo-tag-aplayer 这款插件。执行如下指令:
1npm install --save hexo-tag-aplayer
插件配置方式为修改 Hexo 的配置文件中进行如下修改。就是你的 Hexo 根目录下的_config.yml文件。
123aplayer: meting: true asset_inject: false
开启主题配置文件中的aplayerInject如下所示
1234# Inject the css and script (aplayer/meting)aplayerInject: enable: true per_page: true
主题配置文件的就是自己建立的_config.butterfly.yml文件。建议使用 vscode,可以进行全局搜索。更加方便进行修改。至此就已经可以使用了。下面介绍两种最常用的使用。
常用方式以本博客为 ...
Butterfly 主题美化
美化 / 特效
自定义主题色可以修改大部分 UI 颜色
修改 主题配置文件,比如:
颜色值必须被双引号包裹,就像"#000"而不是#000。否则将会在构建的时候报错!
123456789101112131415theme_color: enable: true main: "#49B1F5" paginator: "#00c4b6" button_hover: "#FF7242" text_selection: "#00c4b6" link_color: "#99a9bf" meta_color: "#858585" hr_color: "#A4D8FA" code_foreground: "#F47466" code_background: "rgba(27, 31, 35, .05)" toc_color: "#00c4b6" ...
Butterfly 安装
安装
git安装(github)git安装(gitee)npm安装稳定版【建议】在你的 Hexo 根目录里
1git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
测试版
测试版可能存在 bug,追求稳定的请安装稳定版
如果想要安装比较新的 dev 分支,可以
1git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
升级方法:在主题目录下,运行 git pull稳定版【建议】
在你的 Hexo 根目录里
1git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
测试版
测试版可能存在 Bugs,追求稳定的请安装稳定版
如果想要安装比较新的 dev 分支,可以
1git clone -b dev https://gi ...
Hexo 快速搭建指南
1. 安装与使用 Hexo1.1 安装全局安装 hexo-cli ,用以创建 hexo 项目:
1npm install hexo-cli -g
安装完成后,就可以在终端使用 hexo 指令了,可以使用以下指令创建一个 hexo 项目:
123hexo init hexo-blogcd hexo-blogyarn install
完成后项目目录如下:
12345678.├── _config.yml # 网站的基础配置,文档:https://hexo.io/zh-cn/docs/configuration├── package.json├── scaffolds # 文章模板├── source| ├── _drafts| └── _posts # 你的 markdown 文章就需要存放在此目录下└── themes # 存放主题源码
1.2 安装第三方主题npm 安装Hexo 5.0.0 版本以上,可以使用 npm 安装主题,简单易用、方便升级,但缺点是无法修改源码。
以 hexo-theme-fluid 主题为例,使用 npm 安装只需要执行:
123yarn add ...
Hexo + Obsidian + Git 完美的博客部署与编辑方案
1.前言在之前的文章Hexo 快速搭建指南中,重点讲解了如何搭建以及部署博客。但是在后期写博客的过程中,有可能遇到很多麻烦,比如:
我不想手动维护文章的 Categorys,我想以文件目录的形式管理文章分类
VSCode 编写 Markdown 文件不爽,我想用其他的编辑器来写 Markdown
hexo new 指令生成的模板太拉了,我不想用
我想把我的 markdown 文档同步到云平台上,方便我的其他设备即时查看
那么这篇文章就会教你使用最舒服的姿势来后期维护你的博客,减少心智负担与解决各种不爽的地方。
2. 更好的文章管理方案2.1 文章以目录分类当我们写好一篇文章后,按照 hexo 的默认配置,我们需要将其放在 source/_post 目录下,等时间长了之后,_post 目录下的文章就会变得杂乱无章,无法让我们快速的 review 到一篇文章。
那么最好的解决方案就是我们在创建文章的时候以 文章分类 作为文件夹创建我们的文章,比如:
12345678910111213.└── source └── _post ├── 前端 │ ├─ ...
自定义侧边栏
适用于 >= 3.8.0
侧边栏现在支持自定义了,可以添加自己喜欢的 widget。
可添加自己的 widget,也可以对现有的 widget 进行排序(博客资料和 公告这两个固定,其它的能排序)
只需要配置 sort_order就行。(使用了 Flex 佈局的 order 属性,具体可查看 mozilla 文档。简单来讲,就是配置数字来实现排序,如果不配置,则默认为 0。数字越小,排序越靠前。
12345678910111213141516aside: ... card_recent_post: sort_order: card_categories: sort_order: card_tags: sort_order: card_archives: sort_order: card_webinfo: sort_order: newest_comments: enable: true sort_order:
如果你想添加自己的内容到侧边栏去,你可以自定义。
创建 widget.yml在 Hexo 博客目录中的sou ...
第一篇博客
这是我的第一篇博客,仅作测试!
hello-world
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
-gMore info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment