hexo个人博客搭建(二)butterfly主题配置
Butterfly主题安装文档(二)之主题配置
一、回顾安装butterfly主题
1、在hexo项目根目录下执行操作clone主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
2、如果沒有 pug 以及 stylus 的渲染器,还需要下载,否则在项目运行时会报错:
npm install hexo-renderer-pug hexo-renderer-stylus --save
3、修改项目根目录下的_config.yml文件(称为站点配置文件),开启主题
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
theme: butterfly
4、升级建议
为了減少升级主题带来的不便,我们还需要做以下操作:
把主题文件夹中的 _config.yml
复制到 Hexo 根目录下,同重命名为 _config.butterfly.yml
Hexo会自动合并主题中的_config.yml
和 _config.butterfly.yml
里的配置,如果存在同名配置,会使用_config.butterfly.yml
的配置,其优先度较高。
二、设置网站个人资料
修改根目录下的站点配置文件_config.yml
修改网站各种资料,例如标题、副标题和邮箱等个人资料
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/# Site
title: 荒岛 #标题
subtitle: '' #副标题
description: 归途也还可爱 #个性签名
keywords:
author: 寻 #作者
language: zh-CN #语言
timezone: Asia/Shanghai #中国的时区
主题支持三种语言:
- default(en)
- zh-CN (简体中文)
- zh-TW (繁体中文)
三、导航菜单
修改主题配置文件 _config.butterfly.yml
menu:主页: / || fas fa-home博文 || fa fa-graduation-cap:分类: /categories/ || fa fa-archive标签: /tags/ || fa fa-tags归档: /archives/ || fa fa-folder-open生活 || fas fa-list:分享: /shuoshuo/ || fa fa-comments-o相册: /photos/ || fa fa-camera-retro音乐: /music/ || fa fa-music影视: /movies/ || fas fa-video友链: /links/ || fa fa-link留言板: /comment/ || fa fa-paper-plane#留言板: /messageboard/ || fa fa-paper-plane关于笔者: /about/ || fas fa-heart
效果图
四、代码块显示设置
1、highlight_copy
开启代码复制功能, 修改主题配置文件_config.butterfly.yml
:
highlight_copy: true
2、highlight_shrink
- true 全部代码框不展开,需点击
>
打开 - false 代码狂展开,有
>
点击按钮 - none 不显示
>
按钮
修改主题配置文件_config.butterfly.yml
:
highlight_shrink: false #代码框展开
3、code_word_wrap
在默认情况下,hexo-highlight
在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话,可以_config.butterfly.yml
开启代码换行:
code_word_wrap: true
4、我的_config.butterfly.yml
:
# Code Blocks (代码块样式)
# --------------------------------------
highlight_theme: mac # darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button 是否显示复制按钮
highlight_lang: true # show the code language 展示代码块语言
highlight_shrink: false # true: 打开文章默认折叠代码块内容 / false: 打开文章默认展开代码块内容
highlight_height_limit: false # unit: px
code_word_wrap: true #是否关闭滚动条
站点配置文件_config.yml
:将line_number的值改为false
highlight:enable: trueline_number: false auto_detect: falsetab_replace: ''
5、效果图:
五、本地搜索功能
1、安装插件
npm install hexo-generator-search --save
2、主题配置文件 _config.butterfly.yml
:
# Local search
local_search:enable: truelabels:input_placeholder: Search for Postshits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示
3、效果图
六、创建文件夹
1、分类
hexo new page categories
会出现source/categories/index.md文件
2、标签
命令行输入:
hexo new page tags
会出现source/tags/index.md
文件:
…以此类推创建自己要的子页面
七、修改副标题
1、修改主题配置文件 _config.butterfly.yml
:
# the subtitle on homepage (主頁subtitle)
subtitle:enable: true# Typewriter Effect (开启打字效果)effect: true# loop (循環打字)loop: true# source調用第三方服務# source: false 關閉調用# source: 1 調用搏天api的隨機語錄(簡體)# source: 2 調用一言網的一句話(簡體)# source: 3 調用一句網(簡體)# source: 4 調用今日詩詞(簡體)# subtitle 會先顯示 source , 再顯示 sub 的內容source: false# 如果有英文逗号' , ',请使用转义字元 ,# 如果有英文双引号' " ',请使用转义字元 "# 开头不允許转义字元,如需要,请把整個句子用双引号包住# 如果关闭打字效果,subtitle只会现示sub的第一行文字sub:- 你在抱怨什么呢- 为明天到来的事,说人生像是没有意义- 没有选择会是唯一的路- 这不是你自己的问题,人终归要好好去生活
2、副标题字体大小颜色
在\themes\butterfly\source\css_layout中的head.styl:
#site-subtitlecolor: var(--white) //此处修改为白色font-size: 1.05em // 字体大小+minWidth768()font-size: 1.40em // 字体大小
效果图:sub句子轮流出现
八、图片设置
图片可以用云图片链接或者放在本地文件夹位置:/themes/butterfly/source/img
1、网站图标
# Favicon(网站图标)
favicon: /img/favicon.png
2、头像
avatar:img: /img/avatar.jpg #图片路径effect: false #头像会一直转圈
3、主页封面图片
# The banner image of home page
index_img: /img/background.jpg
4、文章详情页的顶部图片
当没有在front-matter
设置top_img
和cover
的情况下会显示该图
修改主题配置文件_config.butterfly.yml
:
# If the banner of page not setting, it will show the top_img
default_top_img: /img/default_top_img.jpg #我设置的本地图片
5、归档页顶部图片
#归档子标签页图片
# The banner image of archive page
archive_img: /img/archive.jpg
6、tag页顶部图
#tag页(标签页)
# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: /img/tag_img.jpg
7、category页顶部图
#category页
# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: /img/category_img.jpg
8、文章封面
每篇文章都可以设置一张封面,可以为每篇文章设置默认封面
也可以修改每个md文件的front-matter的cover属性,会覆盖上面的默认封面。修改主题配置文件_config.butterfly.yml:
cover:index_enable: true # 是否展示文章封面aside_enable: truearchives_enable: trueposition: both # 封面展示的位置 left/right/both# 当没有设置cover时,默认展示的文章封面default_cover:# 当配置多张图片时,会随机选择一张作为 cover. 此时写法为- https:- http:- http:- http:- http:- http:
9、错误页面
配置了该属性后会替换无法展示的图片
# Replace Broken Images (替換無法顯示的圖片)
error_img:flink: /img/friend_404.gifpost_page: /img/404.jpg
效果图
九、图片懒加载
1.新增hexo-lazyload-image模块
npm install hexo-lazyload-image --save
2.在主目录配置文件_config.yml增加配置
lazyload:enable: trueloadingImg: /img/loading.gif
这个就是图片没加载出来的时候,出现一个动图转转转的文章页样式
十、图片大图查看
修改主题配置文件_config.butterfly.yml
# Lightbox (圖片大圖查看模式)
# --------------------------------------
# You can only choose one, or neither (只能選擇一個 或者 兩個都不選)# medium-zoom
# https://github.com/francoischalifour/medium-zoom
medium_zoom: false# fancybox
# http://fancyapps.com/fancybox/3/
fancybox: true
十一、文章页样式
以下修改主题配置文件_config.butterfly.yml
1、复制的内容后面加上版权信息
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:enable: true # 是否开启网站复制权限copyright: # 复制的内容后面加上版权信息enable: false # 是否开启复制版权信息添加limit_count: 50 # 字数限制,当复制文字大于这个字数限制时
2、文章版权信息
在底部会出现对应的作者、链接、声明
post_copyright:enable: truedecode: truelicense: CC BY-NC-SA 4.0license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
效果图:
3、相关文章
在文章最下面出现推送
# Related Articles
related_post:enable: truelimit: 6 # Number of posts displayeddate_type: created # or created or updated 文章日期顯示創建日或者更新日
4、打赏
给文章结尾设置打赏按钮,可以放上收款二维码
# Sponsor/reward
reward:enable: trueQR_code:- img: /img/wechat.jpglink:text: 微信- img: /img/alipay.jpglink:text: 支付宝
效果图:
十二、侧边栏样式
以下修改主题配置文件_config.butterfly.yml
1、调整侧边栏出现位置
aside:enable: truehide: falsebutton: truemobile: true # display on mobileposition: right # left or right 我的是右边
2、个人信息
...
card_author:enable: truedescription:button:enable: trueicon: fab fa-githubtext: Follow Me #按钮文字link: https://github.com/xxxxxx #可以放上自己的github地址
# social settings (社交圖標設置)
# formal:
# icon: link || the description
#书写格式:图标名:url || 描述性文字`
social:fab fa-github: https://githubfast.com/lyr233 || Githubfa fa-book-open: https://blog.csdn.net/YR_112233 || CSDNfab fa-qq: tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=728831102&website=www.oicqzone.com || QQfas fa-envelope-open-text: mailto:728831102@qq.com || Email
效果图:
3、公告栏设置
...
card_announcement:enable: truecontent: This is my Blog #修改公告栏信息
4、Toc目录
# toc (目錄)
toc:enable: truenumber: true#style_simple: falseauto_open: true # auto open the sidebar
效果图:
十三、特效/美化
以下均为修改主题配置文件 _config.butterfly.yml
:
1、鼠标点击的效果
有冒光特效、烟火特效、爱心特效、文字特效,选择其中一个将enable
设置为true就可以
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:enable: falsecolorful: true # open particle animation (冒光特效)shake: true # open shake (抖動特效)mobile: false# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:enable: falsezIndex: 9999 # -1 or 9999mobile: false# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:enable: falsemobile: false# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:enable: truetext:- 富强- 民主- 文明- 和谐- 平等- 公正- 法治- 爱国- 敬业- 诚信- 友善fontSize: 15pxrandom: truemobile: true
2、打字效果
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:enable: truecolorful: true # open particle animation (冒光特效)shake: true # open shake (抖動特效)mobile: true
3、自定义主题色
可以修改部分的UI颜色
# 我的没改# theme_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"
# blockquote_padding_color: "#49b1f5"
# blockquote_background_color: "#49b1f5"
4、网站背景
默认显示白色,可设置图片或者颜色
修改主题配置文件_config.butterfly.yml
:
background:
我的修改为渐变色,步骤:
(1)在\Butterfly\source\css\
目录下创建css文件 backgound.css
:
可以自己调色
//代码百度得来
#web_bg {background: -webkit-linear-gradient(0deg,rgba(247, 149, 51, 0.1) 0,rgba(243, 112, 85, 0.1) 15%,rgba(239, 78, 123, 0.1) 30%,rgba(161, 102, 171, 0.1) 44%,rgba(80, 115, 184, 0.1) 58%,rgba(16, 152, 173, 0.1) 72%,rgba(7, 179, 155, 0.1) 86%,rgba(109, 186, 130, 0.1) 100%);background: -moz-linear-gradient(0deg,rgba(247, 149, 51, 0.1) 0,rgba(243, 112, 85, 0.1) 15%,rgba(239, 78, 123, 0.1) 30%,rgba(161, 102, 171, 0.1) 44%,rgba(80, 115, 184, 0.1) 58%,rgba(16, 152, 173, 0.1) 72%,rgba(7, 179, 155, 0.1) 86%,rgba(109, 186, 130, 0.1) 100%);background: -o-linear-gradient(0deg,rgba(247, 149, 51, 0.1) 0,rgba(243, 112, 85, 0.1) 15%,rgba(239, 78, 123, 0.1) 30%,rgba(161, 102, 171, 0.1) 44%,rgba(80, 115, 184, 0.1) 58%,rgba(16, 152, 173, 0.1) 72%,rgba(7, 179, 155, 0.1) 86%,rgba(109, 186, 130, 0.1) 100%);background: -ms-linear-gradient(0deg,rgba(247, 149, 51, 0.1) 0,rgba(243, 112, 85, 0.1) 15%,rgba(239, 78, 123, 0.1) 30%,rgba(161, 102, 171, 0.1) 44%,rgba(80, 115, 184, 0.1) 58%,rgba(16, 152, 173, 0.1) 72%,rgba(7, 179, 155, 0.1) 86%,rgba(109, 186, 130, 0.1) 100%);background: linear-gradient(90deg,rgba(247, 149, 51, 0.1) 0,rgba(243, 112, 85, 0.1) 15%,rgba(239, 78, 123, 0.1) 30%,rgba(161, 102, 171, 0.1) 44%,rgba(80, 115, 184, 0.1) 58%,rgba(16, 152, 173, 0.1) 72%,rgba(7, 179, 155, 0.1) 86%,rgba(109, 186, 130, 0.1) 100%);
}
(2)修改配置文件_config.butterfly.yml
的引入方式
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:head:- <link rel="stylesheet" href="/css/background.css">bottom:# - <script src="xxxx"></script>
(3)如果背景色不生效,设置_config.butterfly.yml
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'
效果图:
5、footer 背景
footer 的背景,当设置 false
时,将与主题色一致。
修改主题配置文件_config.butterfly.yml
:
# footer是否显示图片背景(与top_img一致)
footer_bg: true
6、背景特效
有三种,自己选择开启,将enable
设置为true就可以
修改主题配置文件_config.butterfly.yml
:
# Background effects (背景特效)
# --------------------------------------# canvas_ribbon (静止彩带)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:enable: falsesize: 150alpha: 0.6zIndex: -1click_to_change: falsemobile: false# Fluttering Ribbon (动态彩带)
canvas_fluttering_ribbon:enable: falsemobile: false#星空特效
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:enable: truecolor: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)opacity: 0.7 # the opacity of line (0~1), default: 0.5.zIndex: -1 # z-index property of the background, default: -1.count: 99 # the number of lines, default: 99.mobile: false
十四、字数统计
1、项目目录右键打开 Git Bash Here,
2、npm install hexo-wordcount --save or
yarn add hexo-wordcount
3、修改主题配置文件_config.butterfly.yml
# wordcount (字數統計)
wordcount:enable: truepost_wordcount: truemin2read: truetotal_wordcount: true
效果图:
十五、文章分享功能
addThis
、sharejs
、addtoany
三个选一个开启
addThis官网:https://www.addthis.com/
# Share System (分享功能)
# --------------------------------------# AddThis
# https://www.addthis.com/
addThis:enable: falsepubid: #访问 AddThis 官网, 找到你的 pub-id# Share.js
# https://github.com/overtrue/share.js
sharejs:enable: true #我开启的sites: facebook,twitter,wechat,weibo,qq #想要显示的内容# AddToAny
# https://www.addtoany.com/
addtoany:enable: falseitem: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
sharejs效果图:
hexo个人博客搭建(二)butterfly主题配置相关推荐
- Hexo+Github博客搭建之Matery主题个性化修改篇(一)
首先声明一下,一定要分清什么是站点配置文件,什么是主题文件,比如我在F盘新建我的博客文件夹,名称为blog,那么站点配置文件的路径为F:/blog/_config.yml,而你的主题配置文件路径为F: ...
- Hexo个人博客搭建教程
Hexo个人博客搭建教程 1 搭建前准备 1.1 环境配置 需要安装git.node,最后安装hexo 1.1.1 安装Git: 首先看电脑是否已经安装了git $ git 若提示not founde ...
- hexo个人博客搭建
title: hexo个人博客搭建 date: 2020-10-14 21:06:50 tags: 随笔 copyright: false hexo个人博客搭建过程 安装软件 git nodejs t ...
- hexo+GitHub博客搭建实战
我的个人博客链接:wangwlj.com 想要搭建类似的博客吗? 如果是,那就赶快点进来吧-- 手把手教学,现在开始!! PS: 将会在个人博客持续更新,本文链接:hexo+GitHub博客搭建实战. ...
- 【个人博客】Hexo个人博客搭建与配置详细教程 + Fluid主题 + Gitee发布
文章目录 一.环境准备 1.1 安装 NodeJs 1.2 安装 Git 1.3 安装 Hexo 二.Gitee仓库搭建 2.1 Gitee账号注册 2.2 仓库搭建 三.Hexo博客搭建 3.1 基 ...
- hexo+gitHub 个人博客搭建及更换主题历程(特适合入门小白)
内容涵盖 hexo+gitHub 个人博客搭建 搭建过程中遇到的问题及解决方案 更换主题 1. gitHub 创建博客仓库 (1) 注册Github(如果已注册可以忽略次此步骤) 详细注册步骤请参考: ...
- Github+Hexo+matery博客搭建
文章目录 前言 主题介绍 一.博客环境搭建 1. 下载Git和Node.js 1.1 Node.js的安装与配置 1.2 Git的安装与配置 二.Github注册以及Github Pages创建 三. ...
- Hexo个人博客搭建历程
环境配置 Github的创建和配置 安装Git 安装Node.js 安装Hexo Hexo主题设置 主题1:stun 安装 使用 更新 本地效果 主题优化 主题2:black-blue 安装 使用 更 ...
- 个人网站搭建 03——Hexo + Github 博客搭建
使用 Github Pages 服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话根 ...
最新文章
- git clone 代码下载速度慢的解决方法
- ubuntu系统安装和配置
- Spring-Spring4.X 概述
- JVM内存模型知识点总结
- [code] spectral cluster
- 【已解决】如何干干净净的卸载MySQL数据库
- 蓝桥杯 第十届 JAVAB组 E迷宫
- table 鼠标移上去改变单元格边框颜色。
- csdn 到底怎么了?不准转载?
- 监听文件变化并自动运行 npm script
- acill排序 java_Map集合按照ASCII码从小到大(字典序)排序--JAVA
- 【测试】软件测试分类体系系统学习
- 冠军奖 3 万元!CSDN×易观算法大赛火热进行中
- 做词云时报错cannot import name ‘WordCloud‘ from partially initialized module ‘wordcloud‘的解决办法
- Lucene.Net 2.3.1开发介绍 —— 一、接触Lucene.Net
- 《数据结构与抽象:Java语言描述(原书第4版)》一2.2 使用可变大小的数组实现ADT包...
- linux输入法_惊奇软件:这是我见过最有【态度】的输入法!
- 软件测试记录表模版,简单软件测试报告模板.doc
- Flutter仿京东商城项目实战视频教程
- ReactOS实践(一) ReactOS 源代码编译以及VMWare下运行
热门文章
- 那么厉害的个人所得税计算器代码你竟然不点开看看,你膨胀了!
- GF(Go Frame)开发框架
- 爱思助手安卓能用吗_苹果的蓝牙耳机安卓能用吗
- 并发编程(五)——生产者消费者模式
- linux wifi repeater,WHR-G300N V2 上使用 OpenWrt 构建 WDS 无线网络扩展
- 小米商城秒杀脚本python
- redis也可以根据经纬度查询附近的元素以及计算两个经纬度的距离???
- vulnhub之 BLUEMOON: 2021
- yarn create umi 报错问题
- 用计算机进行图片处理课后反思,使用曲线工具画图教学反思