最新回复

更新

2021.01.26

  • 手机端音乐播放器优化为圆角,且添加旋转效果,相关源码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .类名{
    ...
    -webkit-animation:rotateImg 20s linear infinite;
    ...
    }
    @keyframes rotateImg {
    0% {transform : rotate(0deg);}
    100% {transform : rotate(360deg);}
    }

    @-webkit-keyframes rotateImg {
    0%{-webkit-transform : rotate(0deg);}
    100%{-webkit-transform : rotate(360deg);}
    }
  • 优化手机端搜索页面错位

  • 优化手机端客服布局大小

    2021.01.21

  • 存在问题:bb页面音乐刷新 -> 建议使用pjax局部刷新技术

2021.01.20

  • 将评论工具更改为 twikoo:teikoo 官方文档

  • 设置最近评论:参考链接

  • 添加aplayer播放器
    themes\next\layout\_partials\footer.njk中添加代码

    1
    2
    3
    4
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <div id="aplayer" class="aplayer" data-autoplay="true" data-id="7561667199" data-server="tencent" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#fc6423"></div>
    <script src="https://unpkg.com/meting@1.2.0/dist/Meting.min.js"></script>

    2021.01.19

  • 基本完成了网站整体样式与模块的搭建

  • 为网站整体样式整洁,新增工具页面,并将代码随笔更新站点地图简易信息聚合作为该页面的子页面

  • 新增工具页面介绍

  • 新增个人项目主页

  • 新增站点地图

  • 新增简易信息聚合

  • 新增更新页面

2020.12.19

相关配置:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
# 采用Gemini主题
scheme: Gemini

# 启用暗黑模式
darkmode: true

# 设置头像
favicon:
small: /images/my-16x16.png
medium: /images/my-32x32.png
apple_touch_icon: /images/my-32x32.png
safari_pinned_tab: /images/my-32x32.png

# 设置自定义徽标
custom_logo: /images/my.png

# 知识共享
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language: deed.zh

# 页面
menu:
home: / || fa fa-home
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
schedule: /schedule/ || fa fa-calendar
# sitemap: /sitemap.xml || fa fa-sitemap
# commonweal: /404/ || fa fa-heartbeat
about: /about/ || fa fa-user

# 菜单显示方式:图标/数量
menu_settings:
icons: true
badges: true

# 显示侧栏头像
avatar:
# Replace the default image and set the url here.
url: /images/my.jpg
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true

# 社交
social:
GitHub: https://github.com/Vxiaozhe1998 || fab fa-github
E-Mail: mailto:957798624@qq.com || fa fa-envelope
Weibo: https://weibo.com/Vxiaozhe1998 || fab fa-weibo
zhihu: https://www.zhihu.com/people/vxiaozhe1998 || fab fa-zhihu

# 显示信息
social_icons:
enable: true
icons_only: true
transition: true

# 角标设置
footer:
# Specify the year when the site was setup. If not defined, current year will be used.
since: 2017

# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/icons
name: fa fa-heart
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#ff0000"

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright: by Vxiaozhe1998

codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light: default
dark: tomorrow-night
prism:
light: prism
dark: prism-dark
# Add copy button on codeblock
copy_button:
enable: true
# Available values: default | flat | mac
style: mac

back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true

# Reading progress bar
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#37c6c0"
height: 3px

# Bookmark Support
bookmark:
enable: true
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/vxiaozhe1998
title: Follow me on Github

计数插件

安装
1
2
$ npm install hexo-word-counter
$ hexo clean
hexo 配置hexo _config.yml
1
2
3
4
5
6
7
8
9
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: true
awl: 4
wpm: 275
suffix: "mins."
next 配置next _config.yml
1
2
3
4
5
6
7
8
9
10
11
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false

注意symbol_count_time部分一定要缩进,否则会变成两行

标签使用图标
1
tag_icon: true

赞赏

1
2
3
4
5
6
7
8
9
reward_settings:
# If true, a donate button will be displayed in every article by default.
enable: true
animation: false
# comment: Buy me a coffee

reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png

添加新页面

创建一个新页面
1
2
$ cd hexo-site
$ hexo new page about
在页面中添加内容
引用
1
2
3
# 页面
menu:
about: /about/ || fa fa-user

添加标签页

tags

1
2
$ cd hexo-site
$ hexo new page tags

\source\tags\index.md中添加类型

1
2
3
4
5
---
title: 标签
date: 2014-12-22 12:39:04
type: tags
---
1
2
3
# 页面
menu:
tags: /tags/ || fa fa-tags

标签使用通常有两种方式:

1
2
3
4
5
tags: [Testing, Another Tag]

tags:
- Testing
- Another Tag

第三方服务

1
pjax: true
查看大图
1
fancybox: true

图片懒加载
1
lazyload: true

延迟在长网页中加载图像。在用户滚动到视口外部的图像之前,不会加载它们。这与图像预加载相反。

中英文排版
1
pangu: true

自动在页面上的所有汉字和英语数字符号之间插入一个空格。

快速链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
quicklink:
enable: true

# Home page and archive page can be controlled through home and archive options below.
# This configuration item is independent of `enable`.
home: true
archive: true

# Default (true) will initialize quicklink after the load event fires.
delay: true
# Custom a time in milliseconds by which the browser must execute prefetching.
timeout: 3000
# Default (true) will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).
priority: true

# For more flexibility you can add some patterns (RegExp, Function, or Array) to ignores.
# See: https://github.com/GoogleChromeLabs/quicklink#custom-ignore-patterns
ignores:

通过在空闲时间预取视口链接来加快后续页面加载速度。

动画
1
2
3
4
5
6
7
8
9
10
11
12
motion:
enable: true
# 异步动画
async: false
transition:
# All available transition variants: https://theme-next.js.org/animate/
post_block: fadeIn
post_header: fadeInDown
post_body: fadeInDown
coll_header: fadeInLeft
# Only for Pisces | Gemini.
sidebar: fadeInUp

注:异步动画不遵循时间轴设定,每个动画独立进行

更多动画:https://animate.style/

颜色渐变动画文字
hexo 引用文章
1
{% post_link 颜色渐变动画文字 %}

加载进度条

1
2
3
nprogress:
enable: true
spinner: false

评论系统

1
2
3
4
changyan:
enable: true
appid: cyvdoguuA
appkey: b110a12011dbe766857745fb251140d4

字体配置

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
font:
enable: true

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host: https://fonts.cat.net

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
external: true
family: Noto Sans SC
size: 16px

# Font settings for site title (.site-title).
title:
external: true
family: Noto Sans SC
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family: Noto Sans SC
size:

# Font settings for posts (.post-body).
posts:
external: true
family: Noto Sans SC

# Font settings for <code> and code blocks.
codes:
external: true
family: Roboto Mono

黑石哔哔

通过手机微信随时随地发表碎片化思想

https://www.heson10.com/posts/25624.html

聊天脚本

https://app.crisp.chat/