前言
在试过WordPress和Typeho后，感觉好用是好用（可以在线写文章），可惜速度慢了点，一测速全国都是1.5s~4s,于是打算折腾Hexo。
不看官方教程的后果
啥也不知道疯狂百度，瞎几把看别人的blog结果还是不会，还是得自己折腾。
搜了一圈以后还是回到了官方文档，跟着官方一步一步来。
官网： Hexo
如何折腾官网都有详细的介绍，但是还是可以记录一下的。
Let's get started!
安装环境
官方页面：文档 | Hexo
hexo和大部分开源软件一样，下载安装更新都依赖与git，我们需要去git官网下载git。
Git - Downloading Package (git-scm.com)
安装自己的架构和系统选择下载，我的是windows 64就选择win64了。
再安装hexo依赖的环境node.js即可开始你的hexo折腾之旅。
Download | Node.js (nodejs.org)
当然如果你网不太好的话可以去国内的镜像站下载：
安装Hexo
npm install -g hexo-cli即可安装Hexo的基础包。
安装完Hexo基础包后即可选择一个目录安装Hexo。
打开cmd或者poweshell，cd到你要安装到的目录。
如果你是win11可以直接在该目录右键：
输入
hexo init <folder>
cd <folder>
npm install到这里Hexo就安装完成了。
对于各个目录的说明请查看：建站 | Hexo
安装主题
我选择的是butterfly，可以说是Hexo最优秀的主题之一了：Butterfly 安裝文檔(一) 快速開始 | Butterfly
在你的Hexo安装目录执行：
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly当然你也可以选择从github拉取或者npm安装。
安装之后当然需要启用了，打开Hexo安装目录下的 _config.yml,Ctrl + F 查到到 theme: 修改成 theme: butterfly
一定要加空格，Hexo的配置文件不加空格有时会发生意想不到的的错误！这个坑我当时排了2个小时！
配置Hexo官方配置
永久链接中的trailing_index和 trailing_html强烈建议关闭，那样就不会有后缀
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://blog.loveoi.net
permalink: :category/:title/
permalink_defaults:
pretty_urls:
trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
trailing_html: false # Set to false to remove trailing '.html' from permalinks一般的，我们只需要修改开头的几个文件即可，这是我的配置文件，可以参考一下：
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: CS奇妙
subtitle: ''
description: ''
keywords:
author: only_matthew
language: zh-CN
timezone: Asia/Shanghai
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://blog.loveoi.net
permalink: :category/:title/
permalink_defaults:
pretty_urls:
trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
trailing_html: false # Set to false to remove trailing '.html' from permalinks
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly
search:
path: search.xml
field: post
format: html
limit: 10000
feed:
enable: true
type: rss
path: rss.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:
sitemap:
path:
- sitemap.xml
template: ./sitemap_template.xml
rel: false
tags: true
categories: true
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: ali-oss
region: ******
accessKeyId: ********************
accessKeySecret: ***************
bucket: *****
- type: git
repo: *************************
branch: gh-pages
message: blog_update详细的修改可以查看Hexo官方说明：配置 | Hexo
新建页面为下一步的主题页面配置铺垫
官方说明：Butterfly 安裝文檔(二) 主題頁面 | Butterfly
按照官方说明配置页面:
标签页
- 前往你的 Hexo 博客的根目录
- 输入hexo new page tags
- 你会找到source/tags/index.md这个文件
- 修改这个文件：
- 记得添加 type: "tags"
之后新建的文章也需要添加一个 tags 参数才能生效。
分类页
- 前往你的 Hexo 博客的根目录
- 输入hexo new page categories
- 你会找到source/categories/index.md这个文件
- 修改这个文件：
- 记得添加 type: "categories"
之后新建的文章也需要添加一个 categories 参数才能生效。
友链
在Hexo根目录输入
hexo new page links打开生成的文件，修改：
---
title: 友情链接
date: 999999
type: "link"
---再在Hexo安装文件夹的source下新建一个_date文件夹，在其中新建link.yml即可，可以参考我的link.yml：
class:
class_name: MySelf
link_list:
1:
name: 引导页
link: https://www.oier.xin
avatar: https://img.oier.xin/22/03/24/%E5%A4%B4%E5%83%8F%E4%B8%93%E7%94%A8%E5%9B%BE.png
descr: 引导页
2:
name: Luogu blog
link: https://loveoi.blog.luogu.org/
avatar: https://cdn.luogu.com.cn/fe/logo.png
descr: 我最喜欢的OJ
# class2:
# class_name: 链接无效
# link_list:
# 1:
# name: ******
# link: https://blog.xxx.com
# avatar: https://xxxx/avatar.png
# descr: xxxx
# 2:
# name: xx
# link: https://www.axxxx.cn/
# avatar: https://x
# descr: xx折腾配置文件
在折腾配置文件之前，强烈建议把主题文件夹中的 _config.yml 复制到 Hexo 安装文件夹将文件名改为 _config.butterfly.yml
可以参考我的butterfly配置文件（有点长，不想看的建议折叠）：
# Main menu navigation (導航目錄)
# see https://butterfly.js.org/posts/4aa8abbe/#導航菜單
# --------------------------------------
menu:
主页: / || fas fa-home
分类: /categories/ || fa fa-archive
友链: /links/ || fa fa-link
留言板: /chat/ || fa fa-paper-plane
#留言板: /messageboard/ || fa fa-paper-plane
TimeLine: /TimeLine ||fa fa-bell
关于: /about/ || fas fa-heart
# 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: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
enable: true
copyright:
enable: false
limit_count: 50
# social settings (社交圖標設置)
# formal:
# icon: link || the description
social:
# fab fa-github: https://github.com/xxxxx || Github
# fas fa-envelope: mailto:xxxxxx@gmail.com || Email
# search (搜索)
# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
# --------------------------------------
# Algolia search
algolia_search:
enable: false
hits:
per_page: 6
# Local search
local_search:
enable: true
preload: false
CDN:
# Math (數學)
# --------------------------------------
# About the per_page
# if you set it to true, it will load mathjax/katex script in each page (true 表示每一頁都加載js)
# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' in page's front-matter)
# (false 需要時加載，須在使用的 Markdown Front-matter 加上 mathjax: true)
# MathJax
mathjax:
enable: false
per_page: false
# KaTeX
katex:
enable: false
per_page: false
hide_scrollbar: true
# Image (圖片設置)
# --------------------------------------
# Favicon（網站圖標）
favicon: https://img.oier.xin/22/03/24/%E5%A4%B4%E5%83%8F%E4%B8%93%E7%94%A8%E5%9B%BE.png
# Avatar (頭像)
avatar:
img: https://img.oier.xin/img/%E5%A4%B4%E5%83%8F-jpg.jpg
effect: false
# Disable all banner image
disable_top_img: false
# The banner image of home page
index_img: https://api.oier.xin/pic?spm=1
# If the banner of page not setting, it will show the top_img
default_top_img: https://api.oier.xin/pic?spm=2
# The banner image of archive page
archive_img: https://api.oier.xin/pic?spm=3
# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: https://api.oier.xin/pic?spm=4
# The banner image of tag page
# format:
# - tag name: xxxxx
tag_per_img: https://api.oier.xin/pic?spm=5
# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: https://api.oier.xin/pic?spm=6
# The banner image of category page
# format:
# - category name: xxxxx
category_per_img: https://api.oier.xin/pic?spm=7
cover:
# display the cover or not (是否顯示文章封面)
index_enable: true
aside_enable: true
archives_enable: true
# the position of cover in home page (封面顯示的位置)
# left/right/both
position: both
# When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
default_cover:
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkxndsoj33421r7twi.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkvv6mzj33cc1vkb29.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jku9yltj32yo1o1h3v.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkts05rj31hc0u0qdv.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkt7unkj33dz1wqtgn.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkqdpvlj33341qf1g6.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h24x57ulfkj33ce1vzhdt.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h277kswgasj32yo1uou12.jpg
# Replace Broken Images (替換無法顯示的圖片)
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg
# A simple 404 page
error_404:
enable: false
subtitle: 'Page Not Found'
background: https://api.oier.xin/pic?spm=9
post_meta:
page: # Home Page
date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 主頁是否顯示分類
tags: false # true or false 主頁是否顯示標籤
label: true # true or false 顯示描述性文字
post:
date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字
# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true
# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
method: 3
length: 500 # if you set method to 2 or 3, the length need to config
# anchor
# when you scroll in post, the URL will update according to header id.
anchor: false
# Post
# --------------------------------------
# toc (目錄)
toc:
post: true
page: false
number: true
expand: false
style_simple: false # for post
post_copyright:
enable: true
decode: false
author_href:
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
# Sponsor/reward
reward:
enable: false
QR_code:
# - img: /img/wechat.jpg
# link:
# text: wechat
# - img: /img/alipay.jpg
# link:
# text: alipay
# Post edit
# Easily browse and edit blog source code online.
post_edit:
enable: false
# url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
# For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
url:
# Related Articles
related_post:
enable: true
limit: 6 # Number of posts displayed
date_type: created # or created or updated 文章日期顯示創建日或者更新日
# figcaption (圖片描述文字)
photofigcaption: false
# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1
# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
enable: true
style: flat # style: simple/flat
limit_day: 30 # When will it be shown
position: top # position: top/bottom
message_prev: It has been
message_next: days since the last update, the content of the article may be outdated.
# Share System (分享功能)
# --------------------------------------
# AddThis
# https://www.addthis.com/
addThis:
enable: false
pubid:
# Share.js
# https://github.com/overtrue/share.js
sharejs:
enable: true
sites: wechat,weibo,qq
# AddToAny
# https://www.addtoany.com/
addtoany:
enable: false
item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
# Comments System
# --------------------------------------
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus
use: # Valine,Disqus
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: false
count: false # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page
# disqus
# https://disqus.com/
disqus:
shortname:
apikey: # For newest comments widget
# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統，可以實現在網路審查地區載入 Disqus 評論列表，兼容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:
shortname:
apikey:
option:
# livere (來必力)
# https://www.livere.com/
livere:
uid:
# gitalk
# https://github.com/gitalk/gitalk
gitalk:
client_id:
client_secret:
repo:
owner:
admin:
option:
# valine
# https://valine.js.org
valine:
appId: # leancloud application app id
appKey: # leancloud application app key
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background
visitor: false
option:
# waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
serverURL: # Waline server address url
bg: # waline background
pageview: false
option:
# utterances
# https://utteranc.es/
utterances:
repo:
# Issue Mapping: pathname/url/title/og:title
issue_term: pathname
# Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
light_theme: github-light
dark_theme: photon-dark
# Facebook Comments Plugin
# https://developers.facebook.com/docs/plugins/comments/
facebook_comments:
app_id:
user_id: # optional
pageSize: 10 # The number of comments to show
order_by: social # social/time/reverse_time
lang: en_US # Language en_US/zh_CN/zh_TW and so on
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
envId:
region:
visitor: false
option:
# Giscus
# https://giscus.app/
giscus:
repo:
repo_id:
category_id:
theme:
light: light
dark: dark
option:
# Chat Services
# --------------------------------------
# Chat Button [recommend]
# It will create a button in the bottom right corner of website, and hide the origin button
chat_btn: false
# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
chat_hide_show: false
# chatra
# https://chatra.io/
chatra:
enable: false
id:
# tidio
# https://www.tidio.com/
tidio:
enable: false
public_key:
# daovoice
# http://daovoice.io/
daovoice:
enable: false
app_id:
# gitter
# https://gitter.im/
gitter:
enable: false
room:
# crisp
# https://crisp.chat/en/
crisp:
enable: false
website_id:
# Footer Settings
# --------------------------------------
footer:
owner:
enable: true
since: 2021
custom_text:
copyright: false # Copyright of theme and framework
ICP:
enable: true
url: http://www.beian.gov.cn
text: 湘ICP备2022002580号-2
# Analysis
# --------------------------------------
# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics:
# Google Analytics
# https://analytics.google.com/analytics/web/
google_analytics:
# CNZZ Analytics
# https://www.umeng.com/
cnzz_analytics:
# Cloudflare Analytics
# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics:
# Microsoft Clarity
# https://clarity.microsoft.com/
microsoft_clarity:
# Advertisement
# --------------------------------------
# Google Adsense (谷歌廣告)
google_adsense:
enable: false
auto_ads: true
js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
client:
enable_page_level_ads: true
# Insert ads manually (手動插入廣告)
# ad:
# index:
# aside:
# post:
# Verification (站長驗證)
# --------------------------------------
site_verification:
# - name: google-site-verification
# content: xxxxxx
# - name: baidu-site-verification
# content: "2Oq2TIcECGe5Qyjb"
# Beautify/Effect (美化/效果)
# --------------------------------------
# Theme color for customize
# Notice: color value must in double quotes like "#000" or may cause error!
theme_color:
enable: true
main: "#bcccff"
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"
scrollbar_color: "#49b1f5"
meta_theme_color_light: "ffffff"
meta_theme_color_dark: "#0d0d0d"
# The top_img settings of home page
# default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間)
# The position of site info, eg: 300px/300em/300rem/10% (主頁標題距離頂部距離)
index_site_info_top:
# The height of top_img, eg: 300px/300em/300rem (主頁top_img高度)
index_top_img_height:
# The user interface setting of category and tag page (category和tag頁的UI設置)
# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣)
# default - same as archives UI 默認跟archives頁面UI一樣
category_ui: # 留空或 index
tag_ui: # 留空或 index
# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#bcccff'
# Footer Background
footer_bg: 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%
)
# the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
rightside-bottom:
# Enter transitions (開啓網頁進入效果)
enter_transitions: true
# Background effects (背景特效)
# --------------------------------------
# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
enable: false
size: 150
alpha: 0.6
zIndex: -1
click_to_change: false
mobile: false
# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
enable: true
mobile: true
# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: false
color: '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: true
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
enable: true
colorful: true # open particle animation (冒光特效)
shake: true # open shake (抖動特效)
mobile: true
# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
enable: true
zIndex: 9999 # -1 or 9999
mobile: false
# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
enable: false
mobile: false
# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
enable: false
text:
# - I
# - LOVE
# - YOU
fontSize: 15px
random: false
mobile: false
# Default display mode (網站默認的顯示模式)
# light (default) / dark
display_mode: light
# Beautify (美化頁面顯示)
beautify:
enable: true
field: post # site/post
# title-prefix-icon: '\f0c1' 原内容
title-prefix-icon: '\f863'
title-prefix-icon-color: '#F47466'
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
global-font-size:
code-font-size:
font-family:
code-font-family:
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link:
font-family:
# The setting of divider icon (水平分隔線圖標設置)
hr_icon:
enable: true
icon: # the unicode value of Font Awesome icon, such as '\3423'
icon-top:
# the subtitle on homepage (主頁subtitle)
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# loop (循環打字)
loop: true
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話（簡體） https://hitokoto.cn/
# source: 2 調用一句網（簡體） http://yijuzhan.com/
# source: 3 調用今日詩詞（簡體） https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: 1
# 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
sub:
# Loading Animation (加載動畫)
preloader: false
# aside (側邊欄)
# --------------------------------------
aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: left # left or right
archives: true
card_author:
enable: true
description:
button:
enable: true
icon: fab fa-github
text: I AK IOI !
link: https://www.oier.xin
card_announcement:
enable: false
content: This is my Blog
card_recent_post:
enable: true
limit: 5 # if set 0 will show all
sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: false
sort_order: # Don't modify the setting unless you know how it works
card_archives:
enable: true
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
sort_order: # Don't modify the setting unless you know how it works
card_webinfo:
enable: true
post_count: true
last_push_date: true
sort_order: # Don't modify the setting unless you know how it works
# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
site_uv: true
site_pv: true
page_pv: true
# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
enable: true
publish_date: 2021/11/10
# Aside widget - Newest Comments
newest_comments:
enable: false
sort_order: # Don't modify the setting unless you know how it works
limit: 6
storage: 10 # unit: mins, save data to localStorage
avatar: true
# Bottom right button (右下角按鈕)
# --------------------------------------
# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
enable: false
# The text of a button
default: 繁
# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）
defaultEncoding: 2
# Time delay
translateDelay: 0
# The text of the button when the language is Simplified Chinese
msgToTraditionalChinese: '繁'
# The text of the button when the language is Traditional Chinese
msgToSimplifiedChinese: '簡'
# Read Mode (閲讀模式)
readmode: true
# dark mode
darkmode:
enable: true
# Toggle Button to switch dark/light mode
button: true
# Switch dark/light mode automatically (自動切換 dark mode和 light mode)
# autoChangeMode: 1 Following System Settings, if the system doesn't support dark mode, it will switch dark mode between 6 pm to 6 am
# autoChangeMode: 2 Switch dark mode between 6 pm to 6 am
# autoChangeMode: false
autoChangeMode: false
# Don't modify the following settings unless you know how they work (非必要請不要修改 )
# Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
# Don't repeat 不要重複
rightside_item_order:
enable: false
hide: # readmode,translate,darkmode,hideAside
show: # toc,chat,comment
# 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
# Tag Plugins settings (標籤外掛)
# --------------------------------------
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
enable: false
# built-in themes: default/forest/dark/neutral
theme:
light: default
dark: dark
# Note (Bootstrap Callout)
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: flat
icons: true
border_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
# other
# --------------------------------------
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
enable: true
exclude:
# - xxxx
# - xxxx
# Inject the css and script (aplayer/meting)
aplayerInject:
enable: false
per_page: true
# Snackbar (Toast Notification 彈窗)
# https://github.com/polonel/SnackBar
# position 彈窗位置
# 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
enable: false
position: bottom-left
bg_light: '#49b1f5' # The background color of Toast Notification in light mode
bg_dark: '#1f1f1f' # The background color of Toast Notification in dark mode
# https://instant.page/
# prefetch (預加載)
instantpage: true
# https://github.com/vinta/pangu.js
# Insert a space between Chinese character and English character (中英文之間添加空格)
pangu:
enable: false
field: site # site/post
# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload
lazyload:
enable: false
field: site # site/post
placeholder:
blur: false
# PWA
# See https://github.com/JLHwung/hexo-offline
# ---------------
# pwa:
# enable: false
# manifest: /pwa/manifest.json
# apple_touch_icon: /pwa/apple-touch-icon.png
# favicon_32_32: /pwa/32.png
# favicon_16_16: /pwa/16.png
# mask_icon: /pwa/safari-pinned-tab.svg
# Open graph meta tags
# https://developers.facebook.com/docs/sharing/webmasters/
Open_Graph_meta: true
# Add the vendor prefixes to ensure compatibility
css_prefix: true
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <link rel="stylesheet" href="/css/background.css">
- <link rel="stylesheet" href="/css/custom.css">
- <link rel="stylesheet" href="/css/fonts.css" media="defer" onload="this.media='all'">
bottom:
- <script type="text/javascript" src="/js/Cursor.js"></script>
# - <script src="xxxx"></script>
# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
# The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
# option: local/jsdelivr
# Dev version cannot choose jsdelivr (dev版的主題不能設置為 jsdelivr)
internal_provider: local
# The CDN provider of third party scripts (第三方 js 的 cdn 配置)
# option: local/jsdelivr
# when set it to local, you need to install hexo-butterfly-extjs
third_party_provider: local
version: false
option:
# main_css:
# main:
# utils:
# translate:
# local_search:
# algolia_js:
# algolia_search_v4:
# instantsearch_v4:
# pjax:
# gitalk:
# gitalk_css:
# blueimp_md5:
# valine:
# disqusjs:
# disqusjs_css:
# twikoo:
# waline_js:
# waline_css:
# sharejs:
# sharejs_css:
# mathjax:
# katex:
# katex_copytex:
# katex_copytex_css:
# mermaid:
# canvas_ribbon:
# canvas_fluttering_ribbon:
# canvas_nest:
# lazyload:
# instantpage:
# typed:
# pangu:
# fancybox_css_v4:
# fancybox_v4:
# medium_zoom:
# snackbar_css:
# snackbar:
# activate_power_mode:
# fireworks:
# click_heart:
# ClickShowText:
# fontawesomeV6:
# flickr_justified_gallery_js:
# flickr_justified_gallery_css:
# aplayer_css:
# aplayer_js:
# meting_js:
# prismjs_js:
# prismjs_lineNumber_js:
# prismjs_autoloader:官方页面：Butterfly 安裝文檔(三) 主題配置-1 | Butterfly,
导航菜单：
可以参考我的：
menu:
主页: / || fas fa-home
分类: /categories/ || fa fa-archive
友链: /links/ || fa fa-link
留言板: /chat/ || fa fa-paper-plane
#留言板: /messageboard/ || fa fa-paper-plane
TimeLine: /TimeLine ||fa fa-bell
关于: /about/ || fas fa-heart 必须是 /xxx/，后面||分开，然后写图标名。
如果不希望显示图标，图标名可不写。
默认子目录是展开的，如果你想要隐藏，在子目录里添加 hide 。
List||fas fa-list||hide:
Music: /music/ || fas fa-music
Movie: /movies/ || fas fa-video代码高亮主题:
butterfly有6种主题可以选择，试了一圈还是mac最好看，推荐mac。
highlight_theme: mac # darker / pale night / light / ocean / mac / mac light / false代码复制
也推荐打开，方便别人抄代码（不是）
highlight_copy: true代码块的展开与关闭
推荐打开，也是方便别人抄(不是)
highlight_shrink: true #代码框不展开，需点击 '>' 打开顺便提一下代码行数的显示需要去官方配置文件打开：
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: falseblog内的图片设置
还有blog的顶部图，文章封面图以及文章置顶图
# The banner image of home page
index_img: https://api.oier.xin/pic?spm=1
# If the banner of page not setting, it will show the top_img
default_top_img: https://api.oier.xin/pic?spm=2
# The banner image of archive page
archive_img: https://api.oier.xin/pic?spm=3
# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img: https://api.oier.xin/pic?spm=4
# The banner image of tag page
# format:
# - tag name: xxxxx
tag_per_img: https://api.oier.xin/pic?spm=5
# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img: https://api.oier.xin/pic?spm=6
# The banner image of category page
# format:
# - category name: xxxxx
category_per_img: https://api.oier.xin/pic?spm=7
cover:
# display the cover or not (是否顯示文章封面)
index_enable: true
aside_enable: true
archives_enable: true
# the position of cover in home page (封面顯示的位置)
# left/right/both
position: both
# When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
default_cover:
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkxndsoj33421r7twi.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkvv6mzj33cc1vkb29.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jku9yltj32yo1o1h3v.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkts05rj31hc0u0qdv.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkt7unkj33dz1wqtgn.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h25jkqdpvlj33341qf1g6.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h24x57ulfkj33ce1vzhdt.jpg
- https://tva4.sinaimg.cn/large/008jvtsVgy1h277kswgasj32yo1uou12.jpg
参考我的和官方我的即可达到效果.
自定义css
可以查看折腾之旅（二）
