🔵HexoFluid主题代码块样式修改

本文最后更新于：2024年4月25日 上午

文字选中样式

/source/css目录新建selection.css

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
::selection {
  background: #ffffff00;
  color: #f00;
}

.icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

pre::selection, pre ::selection {
  background: #fff;
}

[data-user-color-scheme='dark'] pre::selection, [data-user-color-scheme='dark'] pre ::selection {
  background: #424858;
  color: #fff;
}

/* 标题,目录...不可选中 */
h1, h2, h3, h4, h5, h6, .line, footer, #toc, time, #subtitle.h2, .nav-link, .post-meta.mr-2, #busuanzi_container_page_pv, .note, .hover-with-bg {
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

_fluid.config.yml引入selection.css

1
2
3
4
5
# 指定自定义 .css 文件路径，用法和 custom_js 相同
# The usage is the same as custom_js
custom_css: 
# -...
  - /css/selection.css

代码块样式

Mac-border

source/css新建macBorder.css在_fluid.config.yml中导入(同上)

若为了方便,可以直接在selection.css添加

source/css/sleection.css 

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
.hljs-comment, .hljs-quote {
  color: #ff6262;
  font-family: auto;
  font-style: normal;
}


figure.highlight {
  background: #838383;
  border-radius: 5px;
  padding-top: 30px;
  box-shadow: 0 5px 10px #a1a1a1;
}

[data-user-color-scheme='dark'] figure.highlight {
  background: #000;
}

/* 该伪元素用于展示代码语言,若不需要可删除 */
figure.highlight::before {
  content: attr(data-type);
  z-index: 999;
  color: #ff8d33;
  display: block;
  width: 100%;
  position: absolute;
  top: 2px;
  text-align: center;
  font-weight: 600;
}

figure.highlight::after {
  background: #fc625d;
  border-radius: 100%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: '';
  height: 12px;
  width: 12px;
  position: absolute;
  top: 9px;
  left: 12px;
}

.hljs {
  background-color: #00000000;
}

/* 代码块颜色 */
figure.highlight tr {
  background-color: #f9fffa;
}

[data-user-color-scheme='dark'] .markdown-body table tr {
  background-color: #25272d;
}

figure.highlight > table {
  border-radius: 0 0 5px 5px;
}

.gutter {
  background-color: #f9fffa;
}

[data-user-color-scheme='dark'] .gutter {
  background-color: #25272d;
}

该方案基于<table>标签,所以务必把行号显示打开,且方案基于highlight.js高亮

若未生效,试试hexo clean+hexo g

_fluid.config.yml

1
2
3
# 代码块是否显示行号
# If true, the code block display line numbers
line_number: true

显示文件路径

若为了方便,可以直接在selection.css添加

source/css/sleection.css 

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
p.file-path + figure.highlight {
  border-top-left-radius: 0;
}

p.file-path {
font-family: 华文新魏,SSTXinwei;
color: #9ce159;
background: #838383;
border-radius: 5px 0 0 0;
height: 1.6rem;
margin-bottom: -0.5rem;
padding: 0 0.2rem 0 0.2rem;
display: inline-block;
font-weight: 600;
position: relative;
top: 1.5rem;
filter: drop-shadow(0 0 4px #a1a1a1);
}

p.file-path>span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
  max-width: 500px;
}

@media (max-width: 768px) {
  p.file-path>span {
    max-width: 300px;
  }
}

@media (max-width: 500px) {
  p.file-path>span {
    max-width: 160px;
  }
}

[data-user-color-scheme='dark'] p.file-path {
  background: #000;
}

p.file-path::before {
content: '🔖 Path:/';
color: #ff7e7e;
font-weight: 700;
position: relative;
top: -0.4rem;
}

p.file-path::after {
content: '';
display: inline-block;
width: 0;
height: 0;
position: absolute;
border-width: 20px;
border-top: 0.8rem solid #00000000;
border-bottom: 0.8rem solid #00000000;
right: -1.2rem;
border-left: 20px solid #838383;
}

[data-user-color-scheme='dark'] p.file-path::after {
  border-left: 20px solid #000;
}

路径使用

在代码块上一行添加<p class="file-path"><span>这里写路径</span></p>

1
2
3
4
5
6
<p class="file-path"><span>这里写路径</span></p>
```markdown
#### 路径使用

在代码块上一行添加`<p class="file-path"><span>这里写路径</span></p>`
```

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss/sssssssss/ssssssssss/sssssssssssss/超出省略/这里写路径 

1
2
3
4
5
6
7
8
9
10
#### 路径使用

在代码块上一行添加
`
<p class="file-path">
<span>
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss/sssssssss/ssssssssss/sssssssssssss/超出省略/这里写路径
</span>
</p>
`

一定要写span标签🦾🦾🦾(为了移动端的适配用了文本左侧超出省略)不会处理了

显示代码语言

source/js目录新建codeType.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const languageStyle = (str) => {
  /* 单独优化 */
  if (['js', 'javascript'].includes(str)) return 'JavaScript'
  if (['ts', 'typescript'].includes(str)) return 'TypeScript'
  /* 曲线救国(Highlight不支持vue) */
  if (str === 'xml') return 'Vue'
  
  // return str
  /* 全小写风格 */
  return str.toUpperCase()
  /*全大写风格 */
  // return str[0].toUpperCase() + str.substring(1)
  /*首字母大写风格 */
}

document.querySelectorAll('figure.highlight').forEach((item) => {
  item.setAttribute('data-type', languageStyle(item.getAttribute('class').substring(10)))
})

_fluid.config.yml引入

1
2
custom_js: 
  - /js/codeType.js

附带一笔

前几天看到自己的博客样式混乱了,以为是更新主题出现了错误,打开控制台发现是静态资源请求全是500

Fuluid主题的默认CDN是这个https://cdn.jsdelivr.net,但在几天前中国地区无法访问了

后来在Github issue#18397中看到了https://fastly.jsdelivr.net的替代CDN,把CDN地址替换后就可正常访问了

另外有个仓库似乎有解决方案cdn.jsdelivr.net 无法访问的问题 (github.com)

/_config.fluid.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
static_prefix:
  # 内部静态
  # Internal static
  internal_js: /js
  internal_css: /css
  internal_img: /img

  # remark: https://fastly.jsdelivr.net
  # --------------------------------------------------------------------
  anchor: https://fastly.jsdelivr.net/npm/anchor-js@4/

  github_markdown: https://fastly.jsdelivr.net/npm/github-markdown-css@4/

  jquery: https://fastly.jsdelivr.net/npm/jquery@3/dist/

  bootstrap: https://fastly.jsdelivr.net/npm/bootstrap@4/dist/

  highlightjs: https://fastly.jsdelivr.net/npm/highlight.js@11/

  prismjs: https://fastly.jsdelivr.net/npm/prismjs@1/

  tocbot: https://fastly.jsdelivr.net/npm/tocbot@4/dist/

  typed: https://fastly.jsdelivr.net/npm/typed.js@2/lib/

  fancybox: https://fastly.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/

  nprogress: https://fastly.jsdelivr.net/npm/nprogress@0/

  mathjax: https://fastly.jsdelivr.net/npm/mathjax@3/es5/

  katex: https://fastly.jsdelivr.net/npm/katex@0/dist/

  busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/

  clipboard: https://fastly.jsdelivr.net/npm/clipboard@2/dist/

  mermaid: https://fastly.jsdelivr.net/npm/mermaid@8/dist/

  valine: https://fastly.jsdelivr.net/npm/valine@1/dist/
  
  waline: https://fastly.jsdelivr.net/npm/@waline/client@1/dist/

  gitalk: https://fastly.jsdelivr.net/npm/gitalk@1/dist/

  disqusjs: https://fastly.jsdelivr.net/npm/disqusjs@1/dist/

  twikoo: https://fastly.jsdelivr.net/npm/twikoo@1/dist/

  hint: https://fastly.jsdelivr.net/npm/hint.css@2/

参考文档:

《Fluid 主题美化汇总 (Stalo)》

🐛 找不到作者的文章了 (AIGISSS)

hexo
#Hexo #Fluid
🔵HexoFluid主题代码块样式修改
https://qingshaner.com/HexoFluid主题代码块样式修改/
作者
清山
发布于
2022年5月3日
许可协议