FixCode Blog

网站更新公告

修改时间为从下到上，上面的配置有些修改是在下面的配置基础上

2024/4/11 侧边栏添加圆角和描边

source/_data/styles.styl
1
2
3
4
5
header.header,.sidebar-inner{
  border-radius: 10px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
}

2024/4/10 文章分开展示，去掉分割线条

去掉分割线

source/_data/styles.styl
1
2
3
4
5
.post-eof {
  background: $grey-light;
  height: 0px;
  width: 0%;
}

分隔文章添加边框阴影

source/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//添加边距，使得文章分隔，并添加圆角10px
.post-block {
  background: var(--content-bg-color);
  border-radius: 10px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
  padding: 10px;
}
.post-block + .post-block {
  border-radius: 10px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12), 0 -1px 0.5px 0 rgba(0,0,0,0.09);
  margin-top: 12px;
}

// 修改背景色使得黑白模式切换的时候颜色切换
.main-inner {
    background: var(--body-bg-color);
    padding: 10px;
}

2024/4/10 页面黑白模式

关闭Next自带的darkmode

themes/next/_config.yml
1
darkmode: false

安装插件

Cmd
1
npm install hexo-next-darkmode --save

添加配置

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

开启自定义格式,在Hexo下创建source/_data/styles.styl

themes/next/_config.yml
1
2
custom_file_path:
  style: source/_data/styles.styl

添加暗黑模式下的颜色配置

source/_data/styles.styl
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
.darkmode--activated {
  --body-bg-color: #282828;
  --content-bg-color: #333;
  --card-bg-color: #555;
  --text-color: #ccc;
  --blockquote-color: #bbb;
  --link-color: #ccc;
  --link-hover-color: #eee;
  --brand-color: #ddd;
  --brand-hover-color: #ddd;
  --table-row-odd-bg-color: #282828;
  --table-row-hover-bg-color: #363636;
  --menu-item-bg-color: #555;
  --btn-default-bg: #222;
  --btn-default-color: #ccc;
  --btn-default-border-color: #555;
  --btn-default-hover-bg: #666;
  --btn-default-hover-color: #ccc;
  --btn-default-hover-border-color: #666;
  --highlight-background: #282b2e;
  --highlight-foreground: #a9b7c6;
  --highlight-gutter-background: #34393d;
  --highlight-gutter-foreground: #9ca9b6;
}

.darkmode--activated img {
  opacity: 0.75;
}

.darkmode--activated img:hover {
  opacity: 0.9;
}

.darkmode--activated code {
  color: #69dbdc;
  background: transparent;
}

2024/4/9添加圆角

blog/source/_data/variables.styl
1
2
3
4
5
6
7
8
9
//圆角
$border-radius-inner = 10px 10px 10px 10px;
$border-radius = 10px;


.back-to-top{
    border-radius: 0px 0px 10px 10px;
}