Hexo-Fluid主题-代码块实现Mac版效果

本文最后更新于：December 3, 2021 pm

目录

1.导入自定义样式

node_modules\hexo-theme-fluid\source\css\macpanel.css

即在你的主题目录下（我这里的是fluid主题，即： /themes/fluid ），（不是根目录下的）。在 source中的 css 目录下新建一个css样式文件：macpanel.css

macpanel.css 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.highlight {
  background: #21252b;
  border-radius: 5px;
  box-shadow: 0 10px 30px 0 rgba(0,0,0,0.4);
  padding-top: 30px;
}
.highlight::before {
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: ' ';
  height: 12px;
  left: 12px;
  margin-top: -20px;
  position: absolute;
  width: 12px;
}

2.修改配置

还是在你的主题目录（themes中）下的配置文件：_config.yml ，有的人可能是（_config.fluid.yml），修改：

1
2
custom_css:
  - /css/macpanel

这样就完成了配置。