网站配置记录
网站配置记录
〇、环境配置
Node.js+Git
详细配置过程
official::Download | Node.js (nodejs.org)
安装过程中不选中Automatically install the necessary tools.其他默认。
测试可以在控制台输入node -v和npm -v，返回版本就是安装成功。
然后再node.js下创建两个文件并配置路径，文件名为node_global，node_cache，命令如下：
npm config set prefix "D:\Node.js\node_global"npm config set cache "D:\Node.js\node_cache"
然后配置环境变量。
系统变量配置：
新增NODE_PATH：
D:\nodejs\node_global\node_modules（此时会在文件夹中自动生成node_modules，没有则自己手动创建）在Path中添加：
%NODE_PATH%
用户变量配置
- 在Path中修改：
...npm的路径改为D:\Node.js\node_global
之后安装时带-g表示会全局安装，安装到node_global中。
official::Git - Downloading Package (git-scm.com)
全点下一步。
hexo+butterfly
详细配置过程
全局安装hexo框架：npm install hexo -g
当前目标生成demo（注意安装前记得切换目录）：hexo init demoblog
在demoblog下用git下载butterfly：git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
启动hexo：hexo s -p 8080
一、简单文件配置
hexo配置
详细配置过程
site
# 5行
# Site
title: Magialeaf的小窝
subtitle: ''
description: 欢迎来到我的小窝！
keywords:
author: Maigaleaf
language: zh-CN
timezone: Asia/Shanghaiurl
# 14行
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://Magialeaf.github.io
permalink: :title.html
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks跳过渲染
# 35行，跳过作品栏的渲染
skip_render: [works/Games/**]解析文件名
# 38行
new_post_name: :title.md # File name of new posts
default_layout: post代码
# 50行
relative_link: false
future: true
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace: ''
wrap: false
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''主题
# 106行
theme: butterfly
butterfly配置
详细配置过程
目录
# 大约11行
# Menu 目錄
menu:
首页: / || fas fa-home
文章 || fa fa-graduation-cap || hide:
分类: /categories/ || fa fa-archive
标签: /tags/ || fa fa-tags
归档: /archives/ || fa fa-folder-open
作品 || fa-solid fa-bookmark || hide:
作品集: /works/ || fa-sharp fa-solid fa-star
社区 || fa-solid fa-comment || hide:
留言板: /comments/ || fas fa-envelope-open
关于: /about/ || fas fa-heart代码样式
# 大约39行
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: true头像栏
# 大约46行
# Social Settings (社交圖標設置)
social:
# Image (圖片設置)
# --------------------------------------
# Favicon（網站圖標）
favicon:
# Avatar (頭像)
avatar:文章封面
# 大约96行
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://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
# Replace Broken Images (替換無法顯示的圖片)
error_img:
flink: /img/friend_404.gif
post_page: /img/error.png # /img/404.jpg
# A simple 404 page
error_404:
enable: true
subtitle: '页面没有找到'
background: /img/404.jpg文章信息
post_meta:
page: # Home Page
date_type: both # 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: relative # date/relative 顯示日期還是相對日期
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字copy
# 大约168行，开启超过字数限制会自带版权提示
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
enable: true
copyright:
enable: true
limit_count: 50toc
# 大约179行
# toc (目錄)
toc:
post: true
page: false
number: false # 关闭，不然在我的目录号前还会有目录号
expand: false
style_simple: false # for post
scroll_percent: truereward
# 大约196行，打赏
reward:
enable: false
QR_code:推荐文章
# 大约214行
# Related Articles
related_post:
enable: true
limit: 6 # Number of posts displayed
date_type: updated # or created or updated 文章日期顯示創建日或者更新日文章过期提醒
# 大约227行
# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
enable: true
style: flat # style: simple/flat
limit_day: 365 # When will it be shown
position: top # position: top/bottom
message_prev: 距离上次更新已经过去
message_next: 天了，文章内容可能已经过期！footer
# 大约236行
# Footer Settings
# --------------------------------------
footer:
owner:
enable: true
since: 2023
custom_text: 版本V1.0
copyright: false # Copyright of theme and frameworkaside
# 大约248行
# 侧边栏显示的信息
aside:
enable: true
...
card_announcement:
enable: true
content: <card_announce_top>当前网站版本为V1.0<br /></card_announce_top>
<card_announce_content>
1.这里大多数文章是我之前随意记的笔记，可能格式以及对网站的适配性有点不好。<br />
2.并且文章大多数都类似于思维导图，没有太详细的内容。<br />
3.之后会完善一些之前写的文章，以及写一些详细的文章放到网站上。<br /><br />
</card_announce_content>
<card_announce_tip>
文章链接为紫色，链接前缀如下：<br />
1.无前缀（百科或其他作者的链接）<br />
2.author::（文章中引用了许多该作者的内容）<br />
3.official::（官网链接）<br />
4.text::（我的其他文本）<br />
5.my::（我的库或其他链接）<br />
</card_announce_tip>
# 其他如card_categories,card_tags,card_archives设置为false简繁切换
# 大约336行
# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
enable: true阅读模式
# 大约350行
# Read Mode (閲讀模式)
readmode: true黑夜模式
# 大约354行
# dark mode
darkmode:
enable: true
button: true
autoChangeMode: 2 #模式2，在晚上18点到早上6点的时间自动切换成黑夜模式mathjax
# 大约385行，要安装插件，如下
# npm uninstall hexo-renderer-marked --save
# npm install hexo-renderer-kramed --save
# MathJax
mathjax:
enable: true
per_page: false本地搜索
# 大约407行
# 可能要npm install hexo-generator-search -g
# Local search
local_search:
enable: True
# Preload the search data when the page loads.
preload: false
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
CDN:主题色
# 大约653行
theme_color:
enable: true
main: "#49B1F5"
paginator: "#00c4b6"
button_hover: "#FF7242"
text_selection: "#00c4b6"
link_color: "#DA20D8" # 超链接颜色
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"网站背景和页脚
# 大约687行
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(/img/background.jpg)
# Footer Background
footer_bg: true背景彩带
# 大约726行
canvas_nest:
enable: true
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: 40 # the number of lines, default: 99.
mobile: true
水平分割线和字体
# 大约760行
# Beautify (美化頁面顯示)
beautify:
enable: true # 开启才有水平分割线，下面的标题前的符号可以注释掉
# field: site # site/post
# title-prefix-icon: '' # '\f0c1'
# title-prefix-icon-color: '' # '#F47466'
font:
global-font-size: '15.5px'
code-font-size: '14.5px'
font-family: YSHST, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
code-font-family: Consolas_1, YSHST, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif
# Font settings for the site title and site subtitle
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link:
font-family: YSHST
# The setting of divider icon (水平分隔線圖標設置)
hr_icon:
enable: true
icon: '\f2dc' # the unicode value of Font Awesome icon, such as '\3423'
icon-top: -10px主页副标题
# 大约787行
# the subtitle on homepage (主頁subtitle)
subtitle:
enable: True
effect: true
typed_option:
source: false
sub:
- 欢迎来到我的小窝
- 立于浮华之世，奏响天籁之音字数统计
# 817行
# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true弹窗关闭
snackbar:
enable: false
position: top-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中英文空格
# 大约902行
pangu:
enable: true
field: site # site/post图片懒加载
# 大约908行
lazyload:
enable: true
field: site # site/post
placeholder:
blur: true
CSS插件
详细配置过程
butterfly中引入css
# 大约944行 |
custom.css
一图流
/*引用大佬的css*/
/*一图流*/
/* 页脚与头图透明 */
#footer {
background: transparent ;
}
#page-header {
background: transparent ;
}
/* 白天模式遮罩透明 *//*设置的话记得不设置头图*/
/*#footer::before {
background: transparent !important;
}
#page-header::before {
background: transparent !important;
}*/
/* 夜间模式遮罩透明 *//*设置的话记得不设置页脚*/
/*[data-theme="dark"] #footer::before {
background: transparent !important;
}
[data-theme="dark"] #page-header::before {
background: transparent !important;
}*/字体
/*引用大佬的css*/
/*字体*/
@font-face {
/* 为载入的字体取名字(随意) */
font-family: 'YSHST';
/* 字体文件地址(相对或者绝对路径都可以) */
src: url(/font/MaoKenZhuYuanTi-MaokenZhuyuanTi-2.ttf);
/* 定义加粗样式(加粗多少) */
font-weight: normal;
/* 定义字体样式(斜体/非斜体) */
font-style: normal;
/* 定义显示样式 */
font-display: block;
}菜单栏
/*引用大佬的css*/
/*菜单栏设置*/
/* 一级菜单居中 */
#nav .menus_items {
position: absolute ;
width: fit-content ;
left: 50% ;
transform: translateX(-50%) ;
}
/* 子菜单横向展示 */
/*#nav .menus_items .menus_item:hover .menus_item_child {
display: flex !important;
}*/
/* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */
/*.menus_items .menus_item:nth-child(2) .menus_item_child {
left: -125px;
}*/夜间霓虹灯
/*引用大佬的css*/
/*夜间霓虹灯*/
/* 日间模式不生效 */
[data-theme="light"] #site-name,
[data-theme="light"] #site-title,
[data-theme="light"] #site-subtitle,
[data-theme="light"] #post-info {
animation: none;
}
/* 夜间模式生效 */
[data-theme="dark"] #site-name,
[data-theme="dark"] #site-title {
animation: light_15px 10s linear infinite;
}
[data-theme="dark"] #site-subtitle {
animation: light_10px 10s linear infinite;
}
[data-theme="dark"] #post-info {
animation: light_5px 10s linear infinite;
}
/* 关键帧描述 */
@keyframes light_15px {
0% {
text-shadow: #5636ed 0 0 15px;
}
12.5% {
text-shadow: #11ee5e 0 0 15px;
}
25% {
text-shadow: #f14747 0 0 15px;
}
37.5% {
text-shadow: #f1a247 0 0 15px;
}
50% {
text-shadow: #f1ee47 0 0 15px;
}
50% {
text-shadow: #b347f1 0 0 15px;
}
62.5% {
text-shadow: #002afa 0 0 15px;
}
75% {
text-shadow: #ed709b 0 0 15px;
}
87.5% {
text-shadow: #39c5bb 0 0 15px;
}
100% {
text-shadow: #5636ed 0 0 15px;
}
}
@keyframes light_10px {
0% {
text-shadow: #5636ed 0 0 10px;
}
12.5% {
text-shadow: #11ee5e 0 0 10px;
}
25% {
text-shadow: #f14747 0 0 10px;
}
37.5% {
text-shadow: #f1a247 0 0 10px;
}
50% {
text-shadow: #f1ee47 0 0 10px;
}
50% {
text-shadow: #b347f1 0 0 10px;
}
62.5% {
text-shadow: #002afa 0 0 10px;
}
75% {
text-shadow: #ed709b 0 0 10px;
}
87.5% {
text-shadow: #39c5bb 0 0 10px;
}
100% {
text-shadow: #5636ed 0 0 10px;
}
}
@keyframes light_5px {
0% {
text-shadow: #5636ed 0 0 5px;
}
12.5% {
text-shadow: #11ee5e 0 0 5px;
}
25% {
text-shadow: #f14747 0 0 5px;
}
37.5% {
text-shadow: #f1a247 0 0 15px;
}
50% {
text-shadow: #f1ee47 0 0 5px;
}
50% {
text-shadow: #b347f1 0 0 5px;
}
62.5% {
text-shadow: #002afa 0 0 5px;
}
75% {
text-shadow: #ed709b 0 0 5px;
}
87.5% {
text-shadow: #39c5bb 0 0 5px;
}
100% {
text-shadow: #5636ed 0 0 5px;
}
}宇宙星空特效
/*引用大佬的css*/
/*宇宙星空特效*/
/* 背景宇宙星光 */
#universe{
display: block;
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* 这个是调置顶的优先级的，-1在文章页下面，背景上面，个人推荐这种 */
z-index: -1;
}个人卡片渐变色
/*引用大佬的css*/
/*个人卡片渐变色*/
/* 侧边栏个人信息卡片动态渐变色 */
#aside-content > .card-widget.card-info {
background: linear-gradient(
-45deg,
#e8d8b9,
#eccec5,
#a3e9eb,
#bdbdf0,
#eec1ea
);
box-shadow: 0 0 5px rgb(66, 68, 68);
position: relative;
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite ;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 黑夜模式适配 */
[data-theme="dark"] #aside-content > .card-widget.card-info {
background: #191919ee;
}
/* 个人信息Follow me按钮 */
#aside-content > .card-widget.card-info > #card-info-btn {
background-color: #3eb8be;
border-radius: 8px;
}样式整体设计
/*引用大佬的css*/
/*页面样式整体设计*/
/*根*/
:root {
--trans-light: rgba(255, 255, 255, 0.65);
--trans-dark: rgba(25, 25, 25, 0.65);
--border-style: 2px solid rgb(169, 169, 169);
--backdrop-filter: blur(5px) saturate(150%);
}
/* 首页文章卡片 */
#recent-posts > .recent-post-item {
background: var(--trans-light);
backdrop-filter: var(--backdrop-filter);
border-radius: 25px;
border: var(--border-style);
}
/* 首页侧栏卡片 */
#aside-content .card-widget {
background: var(--trans-light);
backdrop-filter: var(--backdrop-filter);
border-radius: 18px;
border: var(--border-style);
}
/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
/*background: var(--trans-light);*/
backdrop-filter: var(--backdrop-filter);
border: var(--border-style);
border-radius: 20px;
}
/* 导航栏 */
#page-header.nav-fixed #nav {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: var(--backdrop-filter);
}
[data-theme="dark"] #page-header.nav-fixed #nav {
background: rgba(0, 0, 0, 0.7) ;
}
/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
background: var(--trans-dark);
}
/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
background: transparent ;
}
[data-theme="dark"] #page-header::before {
background: transparent ;
}
/* 阅读模式 */
.read-mode #aside-content .card-widget {
background: rgba(158, 204, 171, 0.5) ;
}
.read-mode div#post {
background: rgba(158, 204, 171, 0.5) ;
}
/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
background: rgba(25, 25, 25, 0.9) ;
color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
background: rgba(25, 25, 25, 0.9) ;
color: #ffffff;
}顶栏常驻
/*引用大佬的css*/
/*顶栏常驻*/
.nav-fixed #nav{
transform: translateY(58px);
-webkit-transform: translateY(58px);
-moz-transform: translateY(58px);
-ms-transform: translateY(58px);
-o-transform: translateY(58px);
}
#nav{
transition: none;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}导航栏和滚动条设置
/*导航栏改大小（字体大于16px会变形，所以要做配置）*/
#aside-content #card-toc .toc-content
{
width: 115%;
margin-left: 0 0 0 -10px;
}
/*滚动条设置*/
::-webkit-scrollbar {
width: 10px; /*大小*/
}
::-webkit-scrollbar-thumb {
background-color: #14c6d3; /* 颜色 */
border-radius: 5px; /* 圆角 */
}
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 背景色 */
}
announcement.css
/*公告栏配置（标签自己加载公告栏里）*/ |
readPercent.css
/*引用大佬的css*/ |
JS插件
详细配置过程
butterfly中引入js文件
bottom: |
copy.js
// 引用大佬的js并小改了一下 |
readPercent.js
// 引用大佬的js |
runtime.js
// 引用大佬的js并小改了一下 |
universe.js
// 引用大佬的js |
pug文件修改
详细配置过程
去除搜索二字
// Blog\themes\Butterfly\layout\includes\header\nav.pug
对下列语句进行注释：// span=' '+_p('search.title')直达顶部和底部
// Blog\themes\butterfly\layout\includes\rightside.pug
/*在
if showArray
+rightsideItem(showArray)
加上如下代码：（首缩进同if）*/
// 顶部百分比
button#go-up(type="button" title=_p("rightside.back_to_top"))
i.fas.fa-arrow-up
span#percent 0
// 直达底部
button#go-up(type="button" title=_p("rightside.back_to_top"))
i.fas.fa-arrow-up
// 上述代码替换如下代码
button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
i.fas.fa-arrow-down
styl文件修改
详细配置过程
微改版权样式
// Blog\themes\butterfly\source\css\_layout\post.styl |
二、复杂插件配置
评论信箱
详细配置过程
在blog下运行
npm install hexo-butterfly-envelope --save在butterfly的配置中加入
# 信箱评论
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
enable: true #控制开关
custom_pic:
cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
message: #信笺正文，多行文本，写法如下
- 有什么想问的？
- 有什么想说的？
- 有什么想吐槽的？
- 哪怕是有什么想吃的，都可以告诉我哦~
bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
height: #1050px，信封划出的高度
path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
front_matter: #【可选】comments页面的 front_matter 配置
title: 留言板
comments: true
页脚徽标
详细配置过程
在blog下运行
npm install hexo-butterfly-footer-beautify --save在butterfly的配置中加入
# 页脚内容
# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
enable:
timer: true # 计时器开关
bdage: true # 徽标开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
exclude: #屏蔽页面
# - /posts/
# - /about/
layout: # 挂载容器类型
type: id
name: footer-wrap
index: 0
# 计时器部分配置项（看你喜欢哪个，最好下载下来放到自己的项目中不然会增加我网站的负载）
# 这是我的
# runtime_js: https://www.fomal.cc/static/js/runtime.js
# runtime_css: https://www.fomal.cc/static/css/runtime.min.css
# 这是店长的
runtime_js: /js/runtime.js
runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
# 徽标部分配置项
swiperpara: 0 #若非0，则开启轮播功能，每行徽标个数
bdageitem:
- link: https://hexo.io/ #徽标指向网站链接
shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
message: 博客框架为Hexo_v6.3.0 #徽标提示语
- link: https://butterfly.js.org/
shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
message: 主题版本Butterfly_v4.8.5
# - link: https://vercel.com/
# shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
# message: 本站采用多线部署，主线路托管于Vercel
# - link: https://dashboard.4everland.org/
# # https://img.shields.io/badge/Hosted-4EVERLAND-3FE2C1?style=flat&logo=IPFS
# shields: https://img.shields.io/badge/Hosted-4EVERLAND-22DDDD?style=flat&logo=IPFS
# message: 本站采用多线部署，备用线路托管于4EVERLAND
- link: https://github.com/
shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
message: 本站项目由Github托管
- link: http://creativecommons.org/licenses/by-nc-sa/4.0/
shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js
首页分类磁贴
详细配置过程
在blog下运行
npm install hexo-butterfly-categories-card --save在butterfly的配置中加入
# 分类栏
# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
column: odd # odd：3列 | even：4列
row: 1 #显示行数，默认两行，超过行数切换为滚动显示
message:
- descr: 编程语言知识 # 编程语言
cover: /img/default_cover_1.png
custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css
首页轮播栏
详细配置过程
在blog下运行
npm install hexo-butterfly-swiper --save在butterfly的配置中加入
# 首页轮播栏
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
enable: true # 开关
priority: 7 #过滤器优先权
enable_page: / # 应用页面
timemode: update #date/updated
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
default_descr: 再怎么看我也不知道怎么描述它的啦！
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法
文章双栏显示
详细配置过程
在blog下运行
npm i hexo-butterfly-article-double-row --save在hexo的配置中加入
# 文章双栏显示
butterfly_article_double_row:
enable: true翻页按钮可能存在bug，在custom.css中加上
/*底部页面选项栏*/
/* 翻页按钮居中 */
#pagination {
width: 100%;
margin: auto;
}
wowjs动画
详细配置过程
在blog下运行
npm install hexo-butterfly-wowjs --save在butterfly的配置中加入
# 出场动画
wowjs:
enable: true #控制动画开关。true是打开，false是关闭
priority: 10 #过滤器优先级
mobile: false #移动端是否启用，默认移动端禁用
animateitem:
- class: recent-post-item #必填项，需要添加动画的元素的class，文章卡片
style: animate__fadeIn #必填项，需要添加的动画
duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
# delay: 0s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
offset: 100 #选填项，开始动画的距离（相对浏览器底部）
# iteration: 1 #选填项，动画重复的次数
- class: card-widget # 侧边栏
style: animate__fadeInRight
duration: 1.25s
offset: 100
animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
MD外挂标签
详细配置过程
在blog下运行
npm install hexo-butterfly-tag-plugins-plus --savehexo自带的插件可能兼容性差，用hexo-renderer-kramed替换：
npm uninstall hexo-renderer-marked --savenpm install hexo-renderer-kramed --save
在butterfly的配置中加入
# tag-plugins-plus
# see https://akilar.top/posts/615e2dec/
tag_plugins:
enable: true # 开关
priority: 5 #过滤器优先权
issues: false #issues标签依赖注入开关
link:
placeholder: /img/link.png #link_card标签默认的图标图片
CDN:
anima: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css #动画标签anima的依赖
jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js #issues标签依赖
issues: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js #issues标签依赖
iconfont: //at.alicdn.com/t/font_2032782_8d5kxvn09md.js #参看https://akilar.top/posts/d2ebecef/
carousel: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js
tag_plugins_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css
网站常用外挂标签如下
// 链接 |
图片渲染
详细配置过程
安装
npm install hexo-asset-image --save在hexo配置文件中配置
# 45行
post_asset_folder: true引用图片时用
page_name/img_name.jpg，其中page_name为文章所处文件夹下的一个与文章同名的文件夹。
永久链接
详细配置过程
author::Hexo-abbrlink插件生成永久固定链接
安装
npm install hexo-abbrlink --save在hexo配置文件中设置
permalink: posts/:abbrlink.html # 此处可以自己设置，也可以直接使用 :/abbrlink
abbrlink:
alg: crc32 #算法： crc16(default) and crc32
rep: hex #进制： dec(default) and hex
// 下面是不同配置的效果
crc16 & hex
https://test.com/posts/55c6.html
crc16 & dec
https://test.com/posts/43212.html
crc32 & hex
https://test.com/posts/6ec16a2c.html
crc32 & dec
https://test.com/posts/1521457752.html
三、上传github
详细配置过程
在github中新建一个仓库，仓库名是
<username>.github.io，要公开。创建好后可以在setting里找到pages，brance选择main保存。选好后在pages页最上面会显示Your site is live at url，表示网址已经可以被访问了。在blog根目录下执行如下操作
1.绑定用户名：git config --global user.name "yourname"
2.绑定邮箱：git config --global user.email "your_e_mail"
3.生成密钥：ssh-keygen -t rsa -C "your_email"
# 然后全回车，密钥文件在[C:\Users\用户名\.ssh\id_rsa.pub]，该文件可能被隐藏。点击个人头像进入setting——SSH and GPG keys，新建一个SSH密钥，密钥填入刚刚记事本的中的密钥。
验证密钥：ssh -T git@github.com
# 输出successfully表示验证成功在Blog根目录下安装
npm install hexo-deployer-git --save进入Blog的配置文件
# 113行
deploy:
type: git
repository: git@github.com:<your_name>/<your_name>.github.io.git
branch: main上传页面（上传后分支如果不是main要在pages中改）
上传页面：hexo d
更新页面：hexo clean && hexo g && hexo d
hexo clean：删除之前生成的文件。
hexo g(generate)：生成静态文章。
hexo d(deploy)：部署文章。
显示Deploy done: git表示成功了
四、后续BUG修复
代码自动换行
在butterfly中配置了code_word_wrap: true后，代码块前面会自动多出两列行号。原因不明。
后续修复方式：卸载全部文章再重新放入网站中就正常了。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Magialeaf的小窝！
