功能包括:
- 一些基本样式改动,按我个人喜好
- 我有用TOC生成目录,script那里针对a链接跳转做区分,内链直接跳转,外链在新窗口打开
- 比较神奇的是各级标题自动标号,效果如下图。不过没考虑十以上情况。有需要再说。
<!-- 样式 -->
<style>
/* 初始化计数器 */
body {
/* 临时 */
margin-right:50%;
counter-reset: h1 h2 h3 h4 h5 h6;
}
/* 针对 h1 标题的编号 */
h1 {
counter-increment: h1;
counter-reset: h2;
}
h1::before {
content: counter(h1, cjk-ideographic) "、 ";
}
/* 针对 h2 标题的编号 */
h2 {
counter-increment: h2;
counter-reset: h3;
}
h2::before {
content: counter(h2) ". ";
}
/* 针对 h3 标题的编号 */
h3 {
counter-increment: h3;
counter-reset: h4;
}
h3::before {
content: counter(h2) "." counter(h3) " ";
}
/* 针对 h4 标题的编号 */
h4 {
counter-increment: h4;
counter-reset: h5;
}
h4::before {
content: "(" counter(h4) ") ";
}
/* 针对 h5 标题的编号 */
h5 {
counter-increment: h5;
counter-reset: h6;
}
h5::before {
content: "(" counter(h4) "." counter(h5) ") ";
}
/* 针对 h6 标题的编号 */
h6 {
counter-increment: h6;
}
h6::before {
content: "(" counter(h4) "." counter(h5) "." counter(h6) ") ";
}
header {
padding-bottom: 0.3em;
font-size: 2.5em;
line-height: 1.2;
position: relative;
margin-top: 1em;
margin-bottom: 16px;
font-weight: bold;
text-shadow: 0.15rem 0.15rem rgba(150,150,150,0.5);
}
.ct {
text-align: center;
}
/* 小代码块 */
code {
color: #e42557;
background-color: rgba(180,180,180,0.25) !important;
margin: auto 0.2em !important;
}
blockquote {
background-color: rgba(83,160,107, 0.05);
border-left: 3px solid rgba(83,160,107, 0.5) !important;
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
}
blockquote code {
color: #e46363;
}
blockquote a {
color: #80b4e8;
}
/* 换行 */
wb, .wb {
word-break: break-all;
}
/* 注意 */
note, .note {
padding: 0.2em 0.5em;
margin: 0 0.2em;
border-width: 0.12em;
border-style: solid;
border-color: rgba(239,156,56,01.8);
border-radius: 0.6em;
}
.toc {
border: 0.15rem solid rgba(83,160,107, 0.5) !important;
border-radius: 1rem;
padding: 1rem;
}
</style>
<script>
// 内链直接跳转到对应位置。外链在新窗口打开。
document.querySelectorAll('a').forEach(function(link) {
console.log(link.href)
// 内链是`http://127.0.0.1`开头
if (/^https?:\/\/127\.0\.0\.1/i.test(link.href)) {
return
}
// 或以`file:///`开头
if (/^file:\/\/\//i.test(link.href)) {
return
}
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认点击行为
window.open(link.href, '_blank'); // 在新标签页打开链接
});
});
</script>