增加标题自动编号的设置

sumruler · Dec 18, 2024 · c60f2a0 · c60f2a0
1 parent d99deca
commit c60f2a0
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -32,19 +32,20 @@ Phycat是我精心制作的一款Typora主题。主题经过精心打磨，听
    导出的HTML页面不仅与软件内样式完全相同，而且也专门写了HTML页面侧边大纲的样式，一样的辅助线，一样的小子弹头。你可以点击下面的链接查看导出HTML页面的效果，它们都是在Typora软件中直接导出的。
 
    | 主题系列 | 主题链接                                                     |
-| -------- | :----------------------------------------------------------- |
+   | -------- | :----------------------------------------------------------- |
    | 亮色主题 | [沉稳红](https://sumruler.github.io/typora-theme-phycat/phycat-red.html)、[物理猫橙](https://sumruler.github.io/typora-theme-phycat/phycat-orange.html)、[前端绿](https://sumruler.github.io/typora-theme-phycat/phycat-green.html)、[薄荷青](https://sumruler.github.io/typora-theme-phycat/phycat-mint.html)、[普鲁士蓝](https://sumruler.github.io/typora-theme-phycat/phycat-plusblue.html)、[魅惑紫](https://sumruler.github.io/typora-theme-phycat/phycat-purple.html) |
-| 暗色主题 | [普鲁士蓝](https://sumruler.github.io/typora-theme-phycat/phycat-dark.html) |
+   | 暗色主题 | [普鲁士蓝](https://sumruler.github.io/typora-theme-phycat/phycat-dark.html) |
 
+
 **每款主题都可以设置开启网格背景，具体方法可以查看下面的Q&A。**
-   
+
 这里特别推荐沉稳红、薄荷蓝、普鲁士蓝。
 
 ## 主题截图
 
 ### 正文
 
-![正文](https://cdn.phycat.cn/localediter/202412131127887.jpg)
+![正文](https://cdn.phycat.cn/localediter/202412131700150.png)
 
 ### 标题
 

diff --git a/phycat-dark.css b/phycat-dark.css
@@ -15,6 +15,15 @@
   --h6-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(93, 93, 150, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 16c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>")
     no-repeat center;
 
+
+  /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/
+  --autonum-h1: counter(h1) ". ";
+  --autonum-h2: counter(h1) "." counter(h2) ". ";
+  --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
+  /* --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
+  --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+  --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; */
+
   /* 暗色主题 必须 */
   --bg-color:#222222;
   --text-color:#c5c5c5;

diff --git a/phycat-green.css b/phycat-green.css
@@ -12,6 +12,14 @@
   /* 是否开启网格背景？1 是；0 否 */
   --bg-grid: 0;
 
+  /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/
+  --autonum-h1: counter(h1) ". ";
+  --autonum-h2: counter(h1) "." counter(h2) ". ";
+  --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
+  /* --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
+  --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+  --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; */
+
   /* 主题颜色 */
 
   --head-title-color: #11aa63;

diff --git a/phycat-mint.css b/phycat-mint.css
@@ -12,6 +12,14 @@
   /* 是否开启网格背景？1 是；0 否 */
   --bg-grid: 0;
 
+  /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/
+  --autonum-h1: counter(h1) ". ";
+  --autonum-h2: counter(h1) "." counter(h2) ". ";
+  --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
+  /* --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
+  --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+  --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; */
+
   /* 主题颜色 */
 
   --head-title-color: #3db8bf;

diff --git a/phycat-orange.css b/phycat-orange.css
@@ -12,6 +12,14 @@
   /* 是否开启网格背景？1 是；0 否 */
   --bg-grid: 0;
 
+  /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/
+  --autonum-h1: counter(h1) ". ";
+  --autonum-h2: counter(h1) "." counter(h2) ". ";
+  --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
+  /* --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
+  --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+  --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; */
+
   /* 主题颜色 */
 
   --head-title-color: #ffc000;

diff --git a/phycat-plusblue.css b/phycat-plusblue.css
@@ -12,6 +12,14 @@
   /* 是否开启网格背景？1 是；0 否 */
   --bg-grid: 0;
 
+  /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/
+  --autonum-h1: counter(h1) ". ";
+  --autonum-h2: counter(h1) "." counter(h2) ". ";
+  --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
+  /* --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
+  --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+  --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; */
+
   /* 主题颜色 */
 
   --head-title-color: #5c7aaa;

diff --git a/phycat-purple.css b/phycat-purple.css
@@ -12,6 +12,14 @@
   /* 是否开启网格背景？1 是；0 否 */
   --bg-grid: 1;
 
+  /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/
+  --autonum-h1: counter(h1) ". ";
+  --autonum-h2: counter(h1) "." counter(h2) ". ";
+  --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
+  /* --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
+  --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+  --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; */
+
   /* 主题颜色 */
 
   --head-title-color: #cfacfa;

diff --git a/phycat-red.css b/phycat-red.css
@@ -12,6 +12,14 @@
   /* 是否开启网格背景？1 是；0 否 */
   --bg-grid: 0;
 
+  /* 自动编号格式设置 无序自动编号可全部注释掉或部分注释掉*/
+  --autonum-h1: counter(h1) ". ";
+  --autonum-h2: counter(h1) "." counter(h2) ". ";
+  --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
+  /* --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
+  --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+  --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; */
+
   /* 主题颜色 */
 
   --head-title-color: #aa1141;

diff --git a/phycat/phycat.dark.css b/phycat/phycat.dark.css
@@ -225,6 +225,61 @@ h6:after {
   vertical-align: inherit;
 }
 
+/* 标题自动编号 */
+#write {
+  counter-reset: h1;
+}
+
+h1 {
+  counter-reset: h2;
+}
+
+h2 {
+  counter-reset: h3;
+}
+
+h3 {
+  counter-reset: h4;
+}
+
+h4 {
+  counter-reset: h5;
+}
+
+h5 {
+  counter-reset: h6;
+}
+
+#write h1:before {
+  counter-increment: h1;
+  content: var(--autonum-h1);
+}
+
+#write h2:before {
+  counter-increment: h2;
+  content: var(--autonum-h2);
+}
+
+#write h3 > span::before {
+  counter-increment: h3;
+  content: var(--autonum-h3);
+}
+
+#write h4 > span::before {
+  counter-increment: h4;
+  content: var(--autonum-h4);
+}
+
+#write h5 > span::before {
+  counter-increment: h5;
+  content: var(--autonum-h5);
+}
+
+#write h6 > span::before {
+  counter-increment: h6;
+  content: var(--autonum-h6);
+}
+
 /* 列表 */
 ::marker {
   color: var(--dark-text-color);

diff --git a/phycat/phycat.light.css b/phycat/phycat.light.css
@@ -22,7 +22,7 @@
 }
 @font-face {
   font-family: "CascadiaCode";
-  src: url('Cascadia-Code-Regular.ttf');
+  src: url("Cascadia-Code-Regular.ttf");
 }
 
 html {
@@ -45,7 +45,11 @@ html {
   p {
     line-height: 1.5rem; /*设置打印内容的行高*/
   }
-  ol,ul,figure,pre {  /*设置一些元素不会被分页截断对应有序列表、无序列表、图片(表格)、代码块*/
+  ol,
+  ul,
+  figure,
+  pre {
+    /*设置一些元素不会被分页截断对应有序列表、无序列表、图片(表格)、代码块*/
     page-break-inside: avoid;
     break-inside: avoid;
   }
@@ -62,7 +66,16 @@ html {
   word-break: break-word;
   word-wrap: break-word;
   text-align: left;
-  background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) calc(3%*var(--bg-grid)), rgba(0, 0, 0, 0) calc(3%*var(--bg-grid))), linear-gradient(360deg, rgba(50, 0, 0, 0.05) calc(3%*var(--bg-grid)), rgba(0, 0, 0, 0) calc(3%*var(--bg-grid)));
+  background-image: linear-gradient(
+      90deg,
+      rgba(50, 0, 0, 0.05) calc(3% * var(--bg-grid)),
+      rgba(0, 0, 0, 0) calc(3% * var(--bg-grid))
+    ),
+    linear-gradient(
+      360deg,
+      rgba(50, 0, 0, 0.05) calc(3% * var(--bg-grid)),
+      rgba(0, 0, 0, 0) calc(3% * var(--bg-grid))
+    );
   background-size: 20px 20px;
   background-position: center center;
 }
@@ -209,6 +222,66 @@ h6:after {
   vertical-align: inherit;
 }
 
+/* 标题自动编号 */
+#write {
+  counter-reset: h1;
+}
+
+h1 {
+  counter-reset: h2;
+}
+
+h2 {
+  counter-reset: h3;
+}
+
+h3 {
+  counter-reset: h4;
+}
+
+h4 {
+  counter-reset: h5;
+}
+
+h5 {
+  counter-reset: h6;
+}
+
+#write h1:before {
+  counter-increment: h1;
+  content: var(--autonum-h1);
+}
+
+#write h2:before {
+  counter-increment: h2;
+  content: var(--autonum-h2);
+  color: var(--head-title-h2-color);
+}
+
+#write h3 > span::before {
+  counter-increment: h3;
+  content: var(--autonum-h3);
+  color: var(--element-color);
+}
+
+#write h4 > span::before {
+  counter-increment: h4;
+  content: var(--autonum-h4);
+  color: var(--element-color);
+}
+
+#write h5 > span::before {
+  counter-increment: h5;
+  content: var(--autonum-h5);
+  color: var(--element-color);
+}
+
+#write h6 > span::before {
+  counter-increment: h6;
+  content: var(--autonum-h6);
+  color: var(--element-color);
+}
+
 /* 列表 */
 ::marker {
   color: var(--element-color-deep);
@@ -585,6 +658,7 @@ pre.CodeMirror-line {
 kbd {
   padding: 2px 4px;
   font-size: 90%;
+  font-weight: bolder;
   color: var(--element-color-linecode);
   border: var(--element-color) solid 1px;
   border-radius: 3px;
@@ -689,7 +763,7 @@ kbd:hover {
 }
 
 #file-library::-webkit-scrollbar {
-  width:5px;
+  width: 5px;
 }
 
 ::-webkit-scrollbar-track {