butterfly主题修改
butterflt主题
前置
开始我的主题是matery的,经过不断修改又来到了butterfly这个主题。这里省略 node 和 hexo 的安装,直接在初始化博客开始。相关操作请查看之前的博客搭建。
由于目前主题已更新,此文件中部分配置可能失效。请参考作者博客或文档进行。
安裝
在你的博客根目录下:
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安装比较新的 dev 分支,可以
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
建议选择最新的分支,因为更新一些新的东西优化了还是挺好的
启动主题
修改站点配置文件_config.yml,把主题改为 Butterfly(这里的name要与你的主题下的分支一样)
theme: Butterfly
如果你没有 pug 以及 stylus 的渲染器,请下载安装: npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus
平滑升级
为了主题的平滑升级,Butterfly 使用了 data files 特性。
推荐把主题默认的配置文件_config.yml 复製到 Hexo 工作目录下的 source/_data/butterfly.yml,如果 source/_data的目录不存在那就创建一个。
注意,如果你创建了 butterfly.yml, 它将会替换主题默认配置文件_config.yml 里的配置项 (不是合併而是替换), 之后你就只需要通过git pull 的方式就可以平滑地升级 theme-butterfly 了。
主题页面
- Page Front-matter
---
title:
date:
type: (tags,link,categories这三个页面需要配置)
comments: (是否需要显示评论,默认true)
description:
top_img: (设置顶部图)
mathjax:
katex:
---
- Page Front-matter
---
title:
date:
type: (tags,link,categories这三个页面需要配置)
comments: (是否需要显示评论,默认true)
description:
top_img: (设置顶部图)
mathjax:
katex:
---
标签页
前往你的 Hexo 博客的根目录
输入 hexo new page tags
你会找到 source/tags/index.md 这个文件
修改这个文件:
---
title: 标签
date: 2020-02-02 10:00:00
type: "tags"
---
分类页
前往你的 Hexo 博客的根目录
输入 hexo new page categories
你会找到 source/categories/index.md 这个文件
修改这个文件:
---
title: 分类
date: 2020-02-02 10:00:00
type: "categories"
---
友情链接
前往你的 Hexo 博客的根目录
输入 hexo new page link
你会找到 source/link/index.md这个文件
修改这个文件:
---
title: 友情链接
date: 2020-02-02 10:00:00
type: "link"
---
- 添加友链
在 Hexo 博客目录中的 source/_data,创建一个文件 link.yml
class:class_name: 友情链接link_list:1:name: 初辰の博客link: https://chuchendjs.github.io/avatar: https://img-blog.csdnimg.cn/20200429004412881.jpgdescr: 一个还在努力中的程序袁2:name: testlink: https://www.xxxxxxcn/avatar: https://xxxxx/avatar.pngdescr: test class2:class_name: 链接无效link_list:1:name: testlink: https://blog.xxx.comavatar: https://img.antmoe.com/avatar.pngdescr: test2:name: testlink: https://www.axxxx.cn/avatar: https://img.antmoe.com/avatar.pngdescr: test
- 友情链接界面设置
需要添加友情链接,可以在 Butterfly.yml 配置
可在友情链接上写上自己的个人资料,方便其他人添加。
Flink:headline: 友情链接info_headline: 我的Blog资料name: Blog 名字: address: Blog 地址: https://www.antmoe.com/avatar: Blog 头像: https://img.antmoe.com/avatar.jpginfo: Blog 简介: 一个收藏回忆与分享技术的地方!comment: 如果需要交换友链,请留言
音乐界面
音乐界面使用插件 hexo-tag-aplayer 使用方法请参考文档
注意:hexo-douban会主动生成页面,所以不需要自己创建。对应的网页的top_img可以butterfly.yml修改。
音乐界面参考 https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
电影
电影界面参考 https://github.com/mythsman/hexo-douban
主題配置
语言
修改站点配置文件 _config.yml
默认语言是 en
主题支持三种语言
- default(en)
- zh-CN (简体中文)
- zh-TW (繁体中文)
网站资料
修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改博客根目录的_config.yml
title: 初辰の博客
subtitle: '初辰の博客'
description: '一个收藏回忆与分享技术的地方!'
keywords: 关键词
author: 作者
language: zh-CN
timezone: '时区'
email: 邮箱
导航菜单
menu:首页: / || fa fa-home时间轴: /archives/ || fa fa-archive标签: /tags/ || fa fa-tags分类: /categories/ || fa fa-folder-open媒体||fas fa-list:- 番剧 || /bangumis/ || fab fa-youtube- 电影 || /movies/ || fa fa-film- 书单 || /books/ || fas fa-book- 音乐 || /music/ || fa fa-music聚宝盒: /box/ ||fab fa-xbox#游戏||fas fa-gamepad:微语: /talk/ || far fa-comment清单||fa fa-heartbeat:- 相册 || /gallery/ || far fa-image- 主页 || /home/ || fab fa-phoenix-framework留言板: /contact/ || far fa-comments友链: /link/ || fa fa-link关于: /about/ || fa fa-heart
必须是 /xxx/,后面 || 分开,然后写图标名。菜单名称可自己修改
格式:
显示名称:
路径 ||icon
sub-menu 格式
名称 ||icon:
名称 || 路径 || icon
注: 导航的文字可以更改
代码
Butterfly 支持了 Material Theme 全部 5 种代码高亮样式:
- default
- darker
- pale night
- light
- ocean
配置 butterfly.yml
highlight_theme: light #代码高亮主题
highlight_copy: true #代码是否启用复制功能
highlight_shrink: true #true代码框不展开,需点击 '>' 打开 false展开 none不显示'>'按钮,代码块展开
自动换行
在默认情况下,hexo-highlight 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话,那么你可以考虑开启这个功能。
code_word_wrap: true #代码自动换行
然后找到你站点的 Hexo 配置文件_config.yml,将 line_number 改成 false:
highlight:enable: trueline_number: falseauto_detect: falsetab_replace:
社交图标
Butterfly 支持 font-awesome v4 和 font-awesome v5. 如需开启 font-awesome v5, 需要在 Butterfly.yml上开启
CDN_USE:css:- https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css- https://use.fontawesome.com/releases/v5.8.1/css/all.css
无论 V4 还是 V5, 书写格式都是一样的图标名:url
social:fa fa-qq: tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=2036556725fa fa-envelope: mailto:chuchen2020@163.comfa fa-rss: /atom.xml
主页文章节选 (自动节选和文章页 description)
因为主题 UI 的关系,主页文章节选只支持自动节选和文章页 description。优先选择自动节选。
在 butterfly.yml 里可以开启 auto_excerpt 的选项,你的文章将会在自动截取部分显示在主页。(默认显示 150 个字)
auto_excerpt:enable: truelength: 150
如果没有开启自动节选,则会显示文章页 front-matter 里面设置的 description。
注意:如果开启了自动节选功能,代码块的显示将有可能不正常。
顶部图
顶部图有 2 种配置:具体 url 和(留空,true 和 false,三个效果一样)
page 页
当具体 url 时:
主页的顶部图可以在 Butterfly.yml 设置 index_img
archives 页的顶部图可以在Butterfly.yml 设置 archive_img
其他 page 页的顶部图可以在各自的 md 页面设置 front-matter 中的 top_img
页面如果没有设置各自的 top_img,则会显示 default_top_img 图片
当顶部图留空,true 和 false
主页会显示纯颜色的顶部图
其他 page 的顶部图没有设置时,也会显示纯颜色的顶部图
post 页
post页的顶部图会优先显示各自 front-matter 中的top_img, 如果没有设置,则会缩略图(即各自 front-matter 中的 cover),如果没有则会显示显示 default_top_img 图片
文章相关项
这个选项是用来显示文章的相关信息的。配置 butterfly.yml
post_meta:date_type: both #可设置文章日期显示创建日期(created)或者更新日期(updated)或者两种都显示(both)categories: true # or false 是否显示分类tags: true # or false 是否显示标签
文章版权
post_copyright:enable: truelicense: CC BY-NC-SA 4.0license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
如果有文章(例如:转载文章)不需要显示版权,可以在文章 Front-matter 单独设置
copyright: false
文章打赏
在你每篇文章的结尾,可以添加打赏按钮。相关二维码可以自行配置 配置 butterfly.yml
reward:enable: trueQR_code:- itemlist:img: /img/wechat.jpgtext: 微信- itemlist:img: /img/alipay.jpgtext: 支付宝
文章封面
文章的 markdown 文档上,在 Front-matter 添加 cover, 并填上要显示的图片地址。
如果不配置 cover, 可以设置显示默认的 cover
配置 butterfly.yml
default_cover: https://tva1.sinaimg.cn/large/832afe33ly1gbhxplql40j22801e0q3c.jpg
当配置多张图片时,会随机选择一张作爲 cover. 此时写法应为
default_cover:- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png- https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png
文章隐藏
如需要文章隐藏功能,请裝插件hexo-generator-indexed或者hexo-hide-posts
在文章的 Front-matter 添加
hide: true
头像
配置 butterfly.yml
avatar: https://img-blog.csdnimg.cn/20200429004412881.jpg
TOC
在文章页,会有一个目录,用于显示 TOC。 手机端默认显示按钮。
配置butterfly.yml
toc:enable: truenumber: true #显示章节数字
为特定的文章配置是否显示 TOC 和特定的目录章节数字
在你的文章 md 文件的头部,加入 toc_number 和 toc 项,并配置 true 或者 false 即可。
toc 是否显示文章 TOC
toc_number 和是否显示章节数
配置之后你的特定的文章将会拥有它自己的目录数字的显示与否,而不会受全局的配置影响。
自动打开 TOC
可选择进入文章页面时,是否自动打开 sidebar 显示 TOC
auto_open_sidebar:enable: true
相关文章
相关文章推荐的原理是根据文章 tags 的比重来推荐
配置butterfly.yml
related_post:enable: truelimit: 6 # 显示推荐文章数目date_type: created # or created or updated 文章日期显示创建日或者更新日
Footer 设置
博客年份
since 是一个来展示你站点起始时间的选项。它位于页面的最底部。
配置butterfly.yml
since: 2020
页脚自定义文字
footer_custom_text 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。
配置butterfly.yml
footer_custom_text: Hi, welcome to my <a href="https://chuchendjs.github.io/">blog</a>!
ICP
对于部分有备案的域名,可以在 ICP 配置显示。
配置butterfly.yml
ICP:enable: trueurl: http://www.beian.miit.gov.cn/text: 粤ICP备xxxxicon: /img/icp.png
右下角按钮
简繁转换
简体繁体互换
右下角会有简繁转换按钮。
配置butterfly.yml
translate:enable: true# 默认按钮显示文字(网站是简体,应设置为'default: 繁')default: 简#网站默认语言,1: 繁体中文, 2: 简体中文defaultEncoding: 1#延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0translateDelay: 0#博客网址cookieDomain: "https://jerryc.me/"#当文字是简体时,按钮显示的文字msgToTraditionalChinese: "繁"#当文字是繁体时,按钮显示的文字msgToSimplifiedChinese: "简"
夜间模式
右下角会有夜间模式按钮
配置butterfly.yml
darkmode:enable: true
V2.0.0 开始增加一个选项,可开啓自动切换 light mode 和 dark mode
autoChangeMode: 1 跟随系统而变化,不支持的浏览器 / 系统将按照时间晚上 6 点到早上 6 点之间切换为 dark mode
autoChangeMode: 2 只按照时间 晚上 6 点到早上 6 点之间切换为 dark mode, 其余时间为 light mode
autoChangeMode: false 取消自动切换
# 自动切换 dark mode和 light mode
autoChangeMode: false
阅读模式
阅读模式下会去掉除文章外的内容,避免干扰阅读。
只会出现在文章页面,右下角会有阅读模式按钮。
配置butterfly.yml
readmode:enable: true
侧边设置
可自行决定哪个项目需要显示,可决定位置。(至少需要显示一个)
配置butterfly.yml
aside:position: right # left or rightcard_author: true #作者卡片card_announcement: true #公告卡片card_recent_post: false #最新文章卡片card_categories: false #分类卡片card_tags: true #标签卡片card_archives: false #归档卡片card_webinfo: true #网站信息卡片
访问人数
访问 busuanzi 的官方网站查看更多的介绍。
配置butterfly.yml
busuanzi:site_uv: truesite_pv: truepage_pv: true
运行时间
网页已运行时间
配置butterfly.yml
runtimeshow:enable: truestart_date: 2020/4/28 6:00:00 ##网页开通时间#格式: 月/日/年 时间#也可以写成 年/月/日 时间
标签外挂
注意:标签外挂是Hexo独有的功能,並不是标签的Markdown格式。
以下的写法,只适用于Butterfly主题,用在其它主題上不会有效果,甚至可能会报错。使用前请留意
Note (Bootstrap Callout)
移植于next主题
配置butterfly.yml
note:# Note tag style values:# - simple bs-callout old alert style. Default.# - modern bs-callout new (v2-v3) alert style.# - flat flat callout style with background, like on Mozilla or StackOverflow.# - disabled disable all CSS styles import of note tag.style: simpleicons: falseborder_radius: 3# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).# Offset also applied to label tag variables. This option can work with disabled note tag.light_bg_offset: 0
用法:
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}[class] : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.All parameters are optional.
例如:
{% note default %}
default 提示标签符
{% endnote %}{% note primary no-icon %}
primary 提示标签符
{% endnote %}{% note success %}
success 提示标签符
{% endnote %}{% note info %}
info 提示标签符
{% endnote %}{% note warning %}
warning 提示标签符
{% endnote %}{% note danger %}
danger 提示标签符
{% endnote %}
style: simple
style: modern
style: flat
style: disabled
Gallery 相册
{% gallery %}
markdown 图片格式
{% endgallery %}
写法:
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div
- name:图库名字
- description:图库描述
- link:链接到对应相册的地址
- img-url:图库封面的地址
评论
个人觉得valine还不错
遵循 Valine的指示去配置你的 LeanCloud 應用。以及查看相应的配置説明。
官方文档:valine.js.org
参考文档:
valine 添加博主标签及微信,QQ通知
Valine评论之Valine-admin配置攻略
搜索系统
Algolia
你需要安装 hexo-algolia 或 hexo-algoliasearch. 根据它们的説明文档去做相应的配置。
配置butterfly.yml
algolia_search:enable: truehits:per_page: 6labels:input_placeholder: Search for Postshits_empty: "We didn't find any results for the search: ${query}" # if there are no resulthits_stats: "${hits} results found in ${time} ms"
本地搜索系统
你需要安装 hexo-generator-search. 根据它的文档去做相应配置。注意格式只支持 xml。
配置butterfly.yml
local_search:enable: falselabels:input_placeholder: Search for Postshits_empty: "We didn't find any results for the search: ${query}" # if there are no result
网页验证
如果需要搜索引擎收录网站,可能需要登录对应搜索引擎的管理平台进行提交。
各自的验证码可从各自管理平台拿到
配置butterfly.yml
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
bing_site_verification:# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
yandex_site_verification:# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site/
baidu_site_verification:# 360 Webmaster tools verification setting
# see http://zhanzhang.so.com/
qihu_site_verification:
分析统计
统计找到各个平台找到代码即可
baidu_analytics: #百度统计
google_analytics: # 谷歌分析通常以`UA-`打头
tencent_analytics: #腾讯分析
广告
google_adsense:enable: truejs: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.jsclient: # 填入个人识别码enable_page_level_ads: true
美化 / 特效
配置butterfly.yml
颜色值必须被双引号包裹,就像 “#000” 而不是 #000。否则将会在构建的时候报错!
theme_color:enable: truemain: "#9370DB"paginator: "#7A7FF1"button_hover: "#FF7242"text_selection: "#69c46d"link_color: "#858585"hr_color: "#A4D8FA"read-mode-bg_color: '#FAF9DE'
footer 背景
footer 的背景会与 top_img 的一致,当设置 false 时,将与主题色一致。
配置butterfly.yml
# footer是否显示图片背景(与top_img一致)
footer_bg: true
打字效果
配置butterfly.yml
activate_power_mode:enable: truecolorful: true # 冒光特效shake: false # 抖动特效
彩带
动感彩带:
配置butterfly.yml
canvas_ribbon_piao:enable: truemobile: false # false 手機端不顯示 true 手機端顯示
鼠标点击效果
配置butterfly.yml
- 烟花:
fireworks:enable: true
- 爱心
click_heart:enable: true
- 文字
ClickShowText:enable: falsetext: - 富强- 民主- 文明- 和谐- 自由- 平等- 公正- 法治- 爱国- 敬业- 诚信- 友善fontSize: 15px
文章页美化
会改变 ol、ul、h1-h5 的样式
配置butterfly.yml
post_beautify:enable: truetitle-prefix-icon: '\f0c1'title-prefix-icon-color: "#F47466"
title-prefix-icon 填写的是 fontawesome 的 icon 的 Unicode 数
字数统计
要为 Butterfly 配上字数统计特性,你需要如下几个步骤:
打开 hexo 工作目录
npm install hexo-wordcount --save or yarn add hexo-wordcount
配置butterfly.yml
wordcount:enable: true
文章置顶
要为你一些文章置顶,你需要如下步骤:
- 打开 hexo 工作目录
- npm uninstall hexo-generator-index --save 然后 npm install hexo-generator-index-pin-top --save
- 你要在文章的 front-matter 区域里添加 top: True 属性来把这篇文章置顶。
- 你可以参考 hexo-generator-index-pin-top 这个仓库来了解更多细节。
图片放大查看模式
fancybox
配置butterfly.yml
# fancybox http://fancyapps.com/fancybox/3/
fancybox:enable: true
medium_zoom
配置butterfly.yml
medium_zoom:enable: true
Snackbar 弹窗
配置butterfly.yml
# https://github.com/polonel/SnackBar
# position 弹窗位置
# 可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:enable: trueposition: bottom-leftbg_light: '#49b1f5' #light mode时弹窗背景bg_dark: '#2d3035' #dark mode时弹窗背景
参考文档:
官方: https://docs.jerryc.me/#/diy/Rating
超逸の博客:https://yangchaoyi.vip/posts/520520/
butterfly主题修改相关推荐
- hexo个人博客搭建(二)butterfly主题配置
Butterfly主题安装文档(二)之主题配置 一.回顾安装butterfly主题 1.在hexo项目根目录下执行操作clone主题 git clone -b master https://githu ...
- Butterfly主题安装文档(三)之主题配置2
图片设置 站点图标 站点图标又称站点icon(favicon.ico) 修改主题配置文件_config.butterfly.yml: favicon: /img/favicon.png # 将图片放入 ...
- Hexo搭建博客教程-基于Butterfly主题
title: Hexo搭建博客教程 tags: Hexo 博客教程 categories: Hexo keywords: 'Hexo,博客教程' description: Hexo搭建博客,以及主题b ...
- Hexo 中 Butterfly主题和看板娘的使用
默认的 Hexo 主题为 landscape,我选择了 Butterfly 作为博客主题 Butterfly 主题使用 Butterfly 安装 Git 安装 在博客的根目录执行 git clone ...
- Butterfly主题安装文档(二)之主题配置
语言 修改项目配置文件 _config.yml 默认语言是 en language: zh-CN 主题支持三种语言: default(en) zh-CN (简体中文) zh-TW (繁体中文) 网站资 ...
- butterfly主题的下载及美化
butterfly主题设置 一,安装butterfly主题 二,基础配置 三,导航栏配置 标签 分类 留言板 友链 日志 关于 四,副标题配置 五,图片设置 六,图片懒加载 七,图片大图查看 butt ...
- 【hexo】butterfly主题魔改之天气插件
前言 最近我使用hexo博客框架搭建了我的个人框架 萌新源的小窝 主题使用的是butterfly 今天给大家带来的是导航栏天气插件 效果如下: 放大一点看看 面板展开 开始 1.准备 hexo博客框架 ...
- Butterfly主题背景魔改
Butterfly主题背景魔改 顶部图片透明 页脚透明 随机背景图 页脚养鱼 预览 顶部图片透明 在hexoblog\themes\butterfly\layout\includes\header\i ...
- 在hexo的butterfly主题中开启看板娘配置
在hexo的butterfly主题中开启看板娘 官网地址配置:https://www.npmjs.com/package/hexo-helper-live2d 1.安装依赖 卸载命令:npm unin ...
最新文章
- Retrofit 网络请求参数注解@Path @Field @Query 等使用
- 寻找连通域算法_【车牌识别算法】
- 【sprinb-boot】配置和lib分离打包
- 7-150 水仙花数 (20 分)
- 将 SharePoint 2010 网站集升级到 2013 (含沙盒方案)
- 非法使用java_java中的非法远程方法
- Oracle语法限制,in内元素数量必须不大于1000
- CKEditor5安装LaTeX数学公式插件
- 晨光计算机里的铃声是什么歌曲,soul app里的音乐有哪些?soul app里的铃声有哪些?[图]...
- idea中translation插件显示网络异常(试一试)
- uniapp子组件路由跳转老是失败
- Java学习---控制流程与方法
- ODL MD-SAL Data Transactions
- 如何用妙记多 Mojidoc 设置子弹笔记
- 第三个 1024,三年的成长与期盼!
- 如何使用Nunit进行测试
- 软件中常用的反义词组
- 【从零开始学Skynet】基础篇(三):服务模块常用API
- html点击图片翻转效果,jquery+css 点击图片旋转特效
- quake3 android,Android 3D游戏引擎研发(基于Quake3开源引擎移植)
热门文章
- 老司机人手必备xxlive 仅供学习交流 勿传播以及商业用途
- 安装Windows server 2003系统后无法安装显卡驱动的解决办法 (转载)
- 绘制pdf表格 (二) 通过itext实现在pdf中绘制excel表格样式设置中文字体、水印、logo、页眉、页码
- SoundPool的使用
- 数据库约束的一些用法总结(constraint)
- idea最新版下载安装使用
- 各省排污费(环保税)面板数据(2004-2018年)
- vue3项目ts文件引入LodopFuncs.js打印控件
- 下载numpy的时候,出现CondaError错误
- 基于 Python 的自然邻域法空间插值的实现与优化