From 44dff1c30b5cb78a5c408c9e30b3a1a3cd8b531a Mon Sep 17 00:00:00 2001 From: qwernot <491298200@qq.com> Date: Sun, 31 Dec 2023 10:51:32 +0800 Subject: [PATCH] Site updated: 2023-12-31 10:51:31 --- 2023/12/29/dome/index.html | 8 +- 2023/12/31/ce/index.html | 304 ++++++++++++++++++ archives/2023/12/index.html | 11 +- archives/2023/index.html | 11 +- archives/index.html | 11 +- .../index.html" | 189 +++++++++++ categories/hexo/index.html | 189 +++++++++++ categories/index.html | 9 +- index.html | 64 +++- "tags/hexo\343\200\201GitHub/index.html" | 11 +- .../index.html" | 189 +++++++++++ tags/index.html | 9 +- 12 files changed, 988 insertions(+), 17 deletions(-) create mode 100644 2023/12/31/ce/index.html create mode 100644 "categories/Hexo-Butterfly\344\270\273\351\242\230\347\276\216\345\214\226/index.html" create mode 100644 categories/hexo/index.html create mode 100644 "tags/hexo\343\200\201GitHub\343\200\201Butterfly/index.html" diff --git a/2023/12/29/dome/index.html b/2023/12/29/dome/index.html index 5edff9c..617a2ea 100644 --- a/2023/12/29/dome/index.html +++ b/2023/12/29/dome/index.html @@ -7,7 +7,7 @@ - + @@ -56,7 +56,7 @@ isHome: false, isHighlightShrink: false, isToc: true, - postUpdate: '2023-12-31 09:07:52' + postUpdate: '2023-12-31 09:49:43' }

Hexo+GitHub 搭建个人博客

准备工作

安装必要的软件

+ })(window)

Hexo+GitHub 搭建个人博客

准备工作

安装必要的软件

Node.js

https://nodejs.org/en/

  • Windows:通过 nvs(推荐)或者 nvm 安装。
  • @@ -222,7 +222,7 @@

    至此,简单的 Hexo 博客框架就完成搭建了

    -

文章作者: 何子墨
文章链接: https://qwernot.github.io/2023/12/29/dome/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 子墨の小屋
-
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
-

Hexo Butterfly主题美化

代码样式

+

代码块中的所有功能只适用于 Hexo 自带的代码渲染。如果使用第三方的渲染器,不一定会有效

+
+

代码高亮主题

Butterfly 支持 6 种代码高亮样式:

+
    +
  • darker
  • +
  • pale night
  • +
  • light
  • +
  • ocean
  • +
  • mac
  • +
  • mac light
  • +
+

修改主题配置文件 _config.butterfly.yml

+
1
2
YML
highlight_theme: mac
+ +

代码复制

主题支持代码复製功能

+

修改 主题配置文件

+
1
2
YML
highlight_copy: true
+ +

代码高度限制

+

3.7.0 及以上支持

+
+

顶部图

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
配置解释
index_img主页的 top_img
default_top_img默认的 top_img,当页面的 top_img 没有配置时,会显示 default_top_img
archive_img归档页面的 top_img
tag_imgtag 子页面 的 默认 top_img
tag_per_imgtag 子页面的 top_img,可配置每个 tag 的 top_img
category_imgcategory 子页面 的 默认 top_img
category_per_imgcategory 子页面的 top_img,可配置每个 category 的 top_img
+

修改主题配置文件 _config.butterfly.yml

+
1
2
YML
index_img: xxx.png
+ +

其它页面 (tags/categories/ 自建页面)和文章页的 top_img ,请到对应的 md 页面设置 front-matter 中的 top_img

+

tag_per_imgcategory_per_img 是 3.2.0 新增的内容,可对 tag 和 category 进行单独的配置

+

并不推荐为每个 tag 和每个 category 都配置不同的顶部图,因为配置太多会拖慢生成速度

+
1
2
3
4
5
6
7
8
YML
tag_per_img:
aplayer: https://xxxxxx.png
android: ddddddd.png

category_per_img:
随想: hdhdh.png
推荐: ddjdjdjd.png
+ +

修改主题配置文件 _config.butterfly.yml

+
1
2
3
YML
# footer是否显示图片背景(与 top_img一致)
footer_bg: true
+ +

打字效果

打字效果 activate-power-mode

+

修改主题配置文件 _config.butterfly.yml

+
1
2
3
4
5
6
7
8
YML
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
enable: true
colorful: true # open particle animation (冒光特效)
shake: true # open shake (抖動特效)
mobile: false
+ +

鼠标点击效果

zIndex 建议只在 -19999 上选
-1 代表烟火效果在底部
9999 代表烟火效果在前面

+

修改主题配置文件 _config.butterfly.yml

+
1
2
3
4
5
YML
fireworks:
enable: true
zIndex: 9999 # -1 or 9999
mobile: false
+ +

网站副标题

可设置主页中展示的网站副标题或者自己喜欢的座右铭

+

修改主题配置文件 _config.butterfly.yml

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
YML

# Site
title: Hexo
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: 3
# 如果關閉打字效果,subtitle 只會顯示 sub 的第一行文字
sub:
- xxxxx
- xxxxx
- xxxxx
+ +

侧边栏设置

侧边排版

可自行决定哪个项目需要显示,可决定位置,也可以设置不显示侧边栏。

+

修改主题配置文件 _config.butterfly.yml

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
YML

aside:
enable: true
hide: false
button: true
mobile: false # display on mobile
position: right # left or right
card_author:
enable: true
description: 手握日月摘心陈
button:
enable: true
icon: iconfont icon-youxishoubing
text: 摸鱼
link: https://haiyong.site/moyu/
card_announcement:
enable: true
content:
<b><font color="#e66b6d">双</font> <font color="#e66d98">手</font> <font color="#e66cc6">合</font> <font color="#cc6de6">十</font> <font color="#9770e6">成</font> <font color="#6d93e6">为</font> <font color="#6fcde6">自</font> <font color="#72e6b6">己</font> <font color="#72e689">的</font> <font color="#99e670">神</font>, <font color="#cde670">自</font> <font color="#e6df72">己</font> <font color="#e6c073">所</font> <font color="#e6a271">信</font> <font color="#e6796f">念</font> <font color="#e65454">的</font> <font color="#e63333">即</font> <font color="#e62c2c">是</font> <font color="#e60101">信</font> <font color="#e60101">仰</font></b>
<p align="center"><img src="https://haiyong.site/img/img-blog.csdnimg.cn/f7384c88956d4378b72e47548e19c9f8.gif" width="50" alt="mao"></p>
<p align="center">微信号: </p>
<p align="center">QQ号:491298200</p>
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: true
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
card_tags color: true
+ +

访问人数 busuanzi (UV 和 PV)

访问 busuanzi 的官方网站查看更多的介绍。

+

修改主题配置文件 _config.butterfly.yml

+
1
2
3
4
5
YML
busuanzi:
site_uv: true
site_pv: true
page_pv: true
+ + + +

运行时间

网页已运行时间

+

修改主题配置文件 _config.butterfly.yml

+
1
2
3
4
5
6
7
YML
runtimeshow:
enable: true
publish_date: 6/7/2018 00:00:00
##网页开通时间
#格式: 月/日/年 时间
#也可以写成 年/月/日 时间
+ +

侧边栏时钟 (转载自:安知鱼

1、如果有安装店长的插件版侧边栏电子钟(与店长的电子钟冲突),在博客根目录 [Blogroot] 下打开终端,运行以下指令

+
1
2
3
BASH
# 卸载原版电子钟
npm uninstall hexo-butterfly-clock
+ +

2、安装插件,在博客根目录 [Blogroot] 下打开终端,运行以下指令:

+
1
2
YML
npm install hexo-butterfly-clock-anzhiyu --save
+ +

3、添加配置信息,以下为写法示例在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
YML

# electric_clock
# see https://anzhiy.cn/posts/fc18.html
electric_clock:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
exclude:
# - /posts/
# - /about/
layout: # 挂载容器类型
type: class
name: sticky_layout
index: 0
loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
qweather_key: # 和风天气key
gaud_map_key: # 高得地图web服务key
default_rectangle: false # 开启后将一直显示rectangle位置的天气,否则将获取访问者的地理位置与天气
rectangle: 112.982279,28.19409 # 获取访问者位置失败时会显示该位置的天气,同时该位置为开启default_rectangle后的位置
+ +

其中 qweather_keygaud_map_key 最好自己去申请对应的 api key,默认使用安知鱼的,可能会被限制,不保证可靠性

+

字数统计

要为 Butterfly 配上字数统计特性,你需要如下几个步骤:

+
    +
  1. 打开 hexo 工作目录
  2. +
  3. npm install hexo-wordcount —save or yarn add hexo-wordcount
  4. +
  5. 修改主题配置文件 _config.butterfly.yml
  6. +
+
1
2
3
4
5
6
YML
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true
+ +

动态标题

如我网站所示,当你离开本站,标签页会显示 w(゚Д゚)w 不要走!再看看嘛!,回到本站显示♪(^∇^*)欢迎回来!,如何实现此效果?

+

其实很简单,在你的 JS 中加入以下代码即可:

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
JAVASCRIPT

//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
//离开当前页面时标签显示内容
document.title = 'w(゚Д゚)w 不要走!再看看嘛!';
clearTimeout(titleTime);
}
else {
//返回当前页面时标签显示内容
document.title = '♪(^∇^*)欢迎回来!' + OriginTitile;
//两秒后变回正常标题
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});
+ +
文章作者: 何子墨
文章链接: https://qwernot.github.io/2023/12/31/ce/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 子墨の小屋
-
\ No newline at end of file diff --git a/archives/2023/12/index.html b/archives/2023/12/index.html index e209ac7..0ffd5ae 100644 --- a/archives/2023/12/index.html +++ b/archives/2023/12/index.html @@ -51,7 +51,7 @@ isHome: false, isHighlightShrink: false, isToc: false, - postUpdate: '2023-12-31 09:33:47' + postUpdate: '2023-12-31 10:41:24' }
文章总览 - 1
2023
Hexo+GitHub 搭建个人博客
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
网站资讯
文章数目 :
1
本站访客数 :
本站总访问量 :
最后更新时间 :
-
文章总览 - 2
2023
Hexo Butterfly主题美化
Hexo+GitHub 搭建个人博客
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
+ + 分类 + +
+
网站资讯
文章数目 :
2
本站访客数 :
本站总访问量 :
最后更新时间 :
-
文章总览 - 1
2023
Hexo+GitHub 搭建个人博客
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
网站资讯
文章数目 :
1
本站访客数 :
本站总访问量 :
最后更新时间 :
-
文章总览 - 2
2023
Hexo Butterfly主题美化
Hexo+GitHub 搭建个人博客
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
+ + 分类 + +
+
网站资讯
文章数目 :
2
本站访客数 :
本站总访问量 :
最后更新时间 :
-
文章总览 - 1
2023
Hexo+GitHub 搭建个人博客
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
网站资讯
文章数目 :
1
本站访客数 :
本站总访问量 :
最后更新时间 :
-
文章总览 - 2
2023
Hexo Butterfly主题美化
Hexo+GitHub 搭建个人博客
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
+ + 分类 + +
+
网站资讯
文章数目 :
2
本站访客数 :
本站总访问量 :
最后更新时间 :
-
分类 - Hexo Butterfly主题美化
2023
Hexo Butterfly主题美化
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
+ + 分类 + +
+
网站资讯
文章数目 :
2
本站访客数 :
本站总访问量 :
最后更新时间 :
-
\ No newline at end of file diff --git a/categories/hexo/index.html b/categories/hexo/index.html new file mode 100644 index 0000000..6c50f10 --- /dev/null +++ b/categories/hexo/index.html @@ -0,0 +1,189 @@ +分类: hexo | 子墨の小屋 + + + + + + + +
分类 - hexo
2023
Hexo+GitHub 搭建个人博客
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
+ + 分类 + +
+
网站资讯
文章数目 :
2
本站访客数 :
本站总访问量 :
最后更新时间 :
-
\ No newline at end of file diff --git a/categories/index.html b/categories/index.html index c870eaf..5df244c 100644 --- a/categories/index.html +++ b/categories/index.html @@ -150,7 +150,14 @@ } } detectApple() - })(window)
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
网站资讯
文章数目 :
1
本站访客数 :
本站总访问量 :
最后更新时间 :
-
avatar
何子墨
手握日月摘星辰
摸鱼
公告
,

mao

微信号:HT-T-TH

QQ号:491298200

最新文章
+ + 分类 + +
+
网站资讯
文章数目 :
2
本站访客数 :
本站总访问量 :
最后更新时间 :
-