@wulechuan/css-stylus-markdown-themes 7.3.2 → 7.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/ReadMe.md +14 -14
  2. package/package.json +22 -22
  3. package//346/226/207/346/241/243/{ → 351/233/206/}/346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/225/210/346/236/234/347/244/272/344/276/213/351/233/206//345/216/237/345/247/213/347/232/204-markdown-/346/240/274/345/274/217/347/232/204/346/226/207/347/253/240/illustrates/duan-er-pretty.jpg +0 -0
  4. package//346/226/207/346/241/243/{ → 351/233/206/}/346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/225/210/346/236/234/347/244/272/344/276/213/351/233/206//345/216/237/345/247/213/347/232/204-markdown-/346/240/274/345/274/217/347/232/204/346/226/207/347/253/240/illustrates/flower.webm +0 -0
  5. package//346/226/207/346/241/243/{ → 351/233/206/}/346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/225/210/346/236/234/347/244/272/344/276/213/351/233/206//345/216/237/345/247/213/347/232/204-markdown-/346/240/274/345/274/217/347/232/204/346/226/207/347/253/240/illustrates/softimage_xsi_2011_ice_graph.jpg +0 -0
  6. package//346/226/207/346/241/243/{ → 351/233/206/}/346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/225/210/346/236/234/347/244/272/344/276/213/351/233/206//345/216/237/345/247/213/347/232/204-markdown-/346/240/274/345/274/217/347/232/204/346/226/207/347/253/240/theming-example-article.en-US.md +0 -0
  7. package//346/226/207/346/241/243/{ → 351/233/206/}/346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/225/210/346/236/234/347/244/272/344/276/213/351/233/206//345/216/237/345/247/213/347/232/204-markdown-/346/240/274/345/274/217/347/232/204/346/226/207/347/253/240/theming-example-article.zh-hans-CN.md +16 -5
  8. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206/javascript/table-of-contents-and-back-to-top-anchor-behaviors.js +37 -21
  9. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206/javascript/table-of-contents-and-back-to-top-anchor-behaviors.min.js +1 -1
  10. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--with-toc.css +202 -43
  11. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--with-toc.min.css +1 -1
  12. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--wrapped--with-toc.css +202 -43
  13. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default--wrapped--with-toc.min.css +1 -1
  14. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--with-toc.css +202 -43
  15. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--with-toc.min.css +1 -1
  16. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--wrapped--with-toc.css +202 -43
  17. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.default-dark--wrapped--with-toc.min.css +1 -1
  18. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--with-toc.css +202 -43
  19. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--with-toc.min.css +1 -1
  20. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--wrapped--with-toc.css +202 -43
  21. package//346/272/220/344/273/243/347/240/201//345/217/221/345/270/203/347/232/204/346/272/220/344/273/243/347/240/201//346/226/207/347/253/240/346/216/222/347/211/210/344/270/216/351/205/215/350/211/262/346/226/271/346/241/210/351/233/206//345/261/202/345/217/240/346/240/267/345/274/217/350/241/250/wulechuan-styles-for-html-via-markdown.generic-default-light--atom-one-dark--wrapped--with-toc.min.css +1 -1
package/ReadMe.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  ## Multilingual Editions of this Article
12
12
 
13
- - [English version of this ReadMe](./文档/说明书/en-US/ReadMe.md)
13
+ - [English version of this ReadMe](./文档集集/说明书/en-US/ReadMe.md)
14
14
 
15
15
 
16
16
 
@@ -39,15 +39,15 @@
39
39
 
40
40
 
41
41
 
42
- ## 文档章节
42
+ ## 文档集章节
43
43
 
44
44
  > 以下章节均存在于单独的文件中,并非本文章之部分。
45
45
 
46
- - 《[本工具之简介](./文档/说明书/汉语/本工具之简介.md)》
47
- - 《[关于文章排版与配色效果示例集的说明(含最终视觉效果)](./文档/说明书/汉语/关于文章排版与配色效果示例集的说明.md)》
48
- - 《[本工具构建层叠样式表时所采用之内在规则之介绍](./文档/说明书/汉语/本工具构建层叠样式表时所采用之内在规则之介绍.md)》
49
- - 《[业已支持的应用场景](./文档/说明书/汉语/业已支持的应用场景.md)》
50
- - 《[采用本工具开发一套新的文章排版与配色方案之详细步骤](./文档/说明书/汉语/采用本工具开发一套新的文章排版与配色方案之详细步骤.md)》
46
+ - 《[本工具之简介](./文档集/说明书/汉语/本工具之简介.md)》
47
+ - 《[关于文章排版与配色效果示例集的说明(含最终视觉效果)](./文档集/说明书/汉语/关于文章排版与配色效果示例集的说明.md)》
48
+ - 《[本工具构建层叠样式表时所采用之内在规则之介绍](./文档集/说明书/汉语/本工具构建层叠样式表时所采用之内在规则之介绍.md)》
49
+ - 《[业已支持的应用场景](./文档集/说明书/汉语/业已支持的应用场景.md)》
50
+ - 《[采用本工具开发一套新的文章排版与配色方案之详细步骤](./文档集/说明书/汉语/采用本工具开发一套新的文章排版与配色方案之详细步骤.md)》
51
51
 
52
52
 
53
53
 
@@ -60,24 +60,24 @@
60
60
 
61
61
  ### 应用默认浅色主题的范文截图
62
62
 
63
- - [示例:简体中文范文配默认浅色主题,在宽大尺寸浏览器中的效果(目录已收叠)](./文档/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/示例:简体中文范文配默认浅色主题,1-在宽大尺寸浏览器中的效果(目录已收叠).png)
64
- - [Snapshot: In default light-colored theme, in a wide window, with toc collapsed](./文档/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/example_en-US_default-light-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
63
+ - [示例:简体中文范文配默认浅色主题,在宽大尺寸浏览器中的效果(目录已收叠)](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/示例:简体中文范文配默认浅色主题,1-在宽大尺寸浏览器中的效果(目录已收叠).png)
64
+ - [Snapshot: In default light-colored theme, in a wide window, with toc collapsed](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/example_en-US_default-light-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
65
65
 
66
66
 
67
67
  ### 应用默认深色主题的范文截图
68
68
 
69
- - [示例:简体中文范文配默认深色主题,在宽大尺寸浏览器中的效果(目录已收叠)](./文档/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/示例:简体中文范文配默认深色主题,1-在宽大尺寸浏览器中的效果(目录已收叠).png)
70
- - [Snapshot: In default dark-colored theme, in a wide window, with toc collapsed](./文档/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/example_en-US_default-dark-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
69
+ - [示例:简体中文范文配默认深色主题,在宽大尺寸浏览器中的效果(目录已收叠)](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/示例:简体中文范文配默认深色主题,1-在宽大尺寸浏览器中的效果(目录已收叠).png)
70
+ - [Snapshot: In default dark-colored theme, in a wide window, with toc collapsed](./文档集/文章排版与配色效果示例集/以-html-格式渲染好的文章成品/各文章最终呈现效果之截图/example_en-US_default-dark-colored-theme_1-in-a-wide-window_with-toc-collapsed.png)
71
71
 
72
72
 
73
73
  ### 范文的所有截图
74
74
 
75
75
  两篇范文之截图不止于上文中提及的四幅。更多图例,见:
76
76
 
77
- - 《[应用效果示例(汉语版)](./文档/说明书/汉语/关于文章排版与配色效果示例集的说明.md)》
78
- - 《[Application Examples (en-US)](./文档/说明书/en-US/application-examples.md)》
77
+ - 《[应用效果示例(汉语版)](./文档集/说明书/汉语/关于文章排版与配色效果示例集的说明.md)》
78
+ - 《[Application Examples (en-US)](./文档集/说明书/en-US/application-examples.md)》
79
79
 
80
- 另附《[示范文章之截图之制作指南](./文档/说明书/汉语/示范文章之截图之制作指南.md)》
80
+ 另附《[示范文章之截图之制作指南](./文档集/说明书/汉语/示范文章之截图之制作指南.md)》
81
81
 
82
82
 
83
83
 
package/package.json CHANGED
@@ -2,37 +2,37 @@
2
2
  "name": "@wulechuan/css-stylus-markdown-themes",
3
3
  "author": "吴乐川 <wulechuan@live.com>",
4
4
  "license": "WTFPL",
5
- "version": "7.3.2",
6
- "description": "吴乐川的 HTML 文章排版与配色之方案集。本工具用于构建一组层叠样式表(即 CSS )文件,本工具亦现场提供了一组层叠样式表文件。凡这些样式表,均可用于美化采用超文本标记语言(即 HTML )格式存储的文章。且不必同时取用多个样式表文件,仅取其一足矣。",
5
+ "version": "7.4.0",
6
+ "description": "此为吴乐川的 HTML 文章排版与配色之方案集。本工具可用于构建一组层叠样式表(即 CSS )文件,本工具亦提供了一组现成的层叠样式表文件。凡这些样式表,均可用于美化采用超文本标记语言(即 HTML )格式存储的文章。且不必同时取用多个样式表文件,仅取其一足矣。",
7
7
  "directories": {
8
8
  "source": "源代码/原始的源代码",
9
9
  "dist": "源代码/发布的源代码",
10
10
  "test": "测试集",
11
- "doc": "文档"
11
+ "doc": "文档集"
12
12
  },
13
13
  "main": "源代码/发布的源代码/本工具作为其他-javascript-工具之依赖模块时的代码/index.js",
14
14
  "types": "源代码/发布的源代码/本工具作为其他-javascript-工具之依赖模块时的代码/index.d.ts",
15
15
  "scripts": {
16
- "eslint": "eslint ./.eslintrc.js ./gulpfile.esm.js/**/*.js ./文档/文章排版与配色效果示例集/*.js ./测试集/*.js ./源代码/发布的源代码/本工具作为其他-javascript-工具之依赖模块时的代码/*.js ./源代码/原始的源代码/用于设计文章排版与配色方案的代码/js/**/*.js ./本项目之全局配置项集.js",
17
- "firefox": "start firefox ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.en-us.default-light-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.en-us.default-dark-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.zh-hans-cn.default-light-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.zh-hans-cn.default-dark-colored-theme.html",
18
- "open-dev-htmls": "start ./测试集/产生的临时文件/示例性-html-文件集(仅限于当前正在开发的排版与配色方案)/default-theming-example.--DEV--.en-us.html && start ./测试集/产生的临时文件/示例性-html-文件集(仅限于当前正在开发的排版与配色方案)/default-theming-example.--DEV--.zh-hans-cn.html",
19
- "clean": "gulp --silent cleanAll",
20
- "clean2": "gulp cleanAll",
21
- "_build": "gulp --silent buildAllThemesOnce",
22
- "_build2": "gulp buildAllThemesOnce",
23
- "_update-example-htmls": "gulp --silent updateExampleHTMLs",
24
- "_update-example-htmls2": "gulp updateExampleHTMLs",
25
- "start2": "gulp --silent devSingleThemeOnce && npm run open-dev-htmls && gulp --silent devSingleTheme",
26
- "start": "gulp devSingleThemeOnce && npm run open-dev-htmls && gulp devSingleTheme",
16
+ "eslint": "eslint ./.eslintrc.js ./gulpfile.esm.js/**/*.js ./文档集/文章排版与配色效果示例集/*.js ./测试集/*.js ./源代码/发布的源代码/本工具作为其他-javascript-工具之依赖模块时的代码/*.js ./源代码/原始的源代码/用于设计文章排版与配色方案的代码/js/**/*.js ./本项目之全局配置项集.js",
17
+ "open-firefox-for-snapshots": "start firefox ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.en-us.default-light-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.en-us.default-dark-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.zh-hans-cn.default-light-colored-theme.html ./测试集/产生的临时文件/示例性-html-文件集(均嵌有半自动化截图辅助逻辑)/example.zh-hans-cn.default-dark-colored-theme.html",
18
+ "open-dev-htmls": "start ./测试集/产生的临时文件/示例性-html-文件集(仅限于当前正在开发的排版与配色方案)/default-theming-example.--DEV--.en-us.html && start ./测试集/产生的临时文件/示例性-html-文件集(仅限于当前正在开发的排版与配色方案)/default-theming-example.--DEV--.zh-hans-cn.html",
19
+ "clean": "gulp --silent cleanAll",
20
+ "clean-2": "gulp cleanAll",
21
+ "_build": "gulp --silent buildAllThemesOnce",
22
+ "_build-2": "gulp buildAllThemesOnce",
23
+ "_update-example-htmls": "gulp --silent updateExampleHTMLs",
24
+ "_update-example-htmls-2": "gulp updateExampleHTMLs",
25
+ "start-2": "gulp --silent devSingleThemeOnce && npm run open-dev-htmls && gulp --silent devSingleTheme",
26
+ "start": "gulp devSingleThemeOnce && npm run open-dev-htmls && gulp devSingleTheme",
27
27
  "_test-package-interfaces": "node ./测试集/用于测试本项目之-javascript-接口的测试代码集.js",
28
- "_test-all-without-linting-without-browser": "npm run _test-package-interfaces && npm run _build2 && npm run _update-example-htmls2 && gulp devSingleThemeOnce",
29
- "update-example-htmls": "npm run _update-example-htmls && npm run firefox",
30
- "update-example-htmls2": "npm run _update-example-htmls2 && npm run firefox",
31
- "test": "npm run eslint && npm run _test-all-without-linting-without-browser && npm run firefox && npm run open-dev-htmls",
32
- "build": "npm run eslint && npm run _build && npm run update-example-htmls",
33
- "build2": "npm run eslint && npm run _build2 && npm run update-example-htmls2",
34
- "before-git-commit": "npm i && npm test",
35
- "prepublishOnly": "npm i && npm test"
28
+ "_test-all-without-linting-without-browser": "npm run _test-package-interfaces && npm run _build-2 && npm run _update-example-htmls-2 && gulp devSingleThemeOnce",
29
+ "update-example-htmls": "npm run _update-example-htmls && npm run open-firefox-for-snapshots",
30
+ "update-example-htmls-2": "npm run _update-example-htmls-2 && npm run open-firefox-for-snapshots",
31
+ "test": "npm run eslint && npm run _test-all-without-linting-without-browser && npm run open-firefox-for-snapshots && npm run open-dev-htmls",
32
+ "build": "npm run eslint && npm run _build && npm run update-example-htmls",
33
+ "build-2": "npm run eslint && npm run _build-2 && npm run update-example-htmls-2",
34
+ "每当制作集得之版本之前": "npm i && npm test",
35
+ "prepublishOnly": "npm i && npm test"
36
36
  },
37
37
  "keywords": [
38
38
  "markdown",
@@ -274,13 +274,19 @@ CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 D
274
274
 
275
275
  ### JavaScript 代码片段
276
276
 
277
- - 列表项中的代码片段
277
+ #### 列表项中的代码片段1
278
+
279
+ - 先定义一个函数:
278
280
 
279
281
  ```js
280
282
  function getCircleArea(r) {
281
283
  return 3.14159265 * r * r;
282
284
  }
285
+ ```
283
286
 
287
+ 然后调用它:
288
+
289
+ ```
284
290
  getCircleArea(100);
285
291
  ```
286
292
 
@@ -295,7 +301,7 @@ CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 D
295
301
 
296
302
  > `circumference` [sər&apos;kʌmf(ə)rəns] <i>n.</i> 圆周长
297
303
 
298
- <details open>
304
+ - <details open>
299
305
  <summary>折叠内容中的代码块1</summary>
300
306
 
301
307
  ```js
@@ -306,7 +312,10 @@ CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 D
306
312
 
307
313
 
308
314
 
309
- 下面是不在列表项内的代码片段。
315
+
316
+ #### 叠内容中的代码块
317
+
318
+ 下面是在叠内容中的代码块。
310
319
 
311
320
  <details open>
312
321
  <summary>折叠内容中的代码块2</summary>
@@ -318,6 +327,8 @@ console.log(NaN === NaN); // false
318
327
  </details>
319
328
 
320
329
 
330
+ #### 在行文结构之所谓“顶层”的代码块
331
+
321
332
  ```js
322
333
  // 这是一句行尾注释。好吧,我承认它恰好在这一行的开头。
323
334
  import something from 'somethingjs'
@@ -483,7 +494,7 @@ exports.author = 'wulechun@live.com';
483
494
  <meta charset="UTF-8">
484
495
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
485
496
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
486
- <title>乐川的示范文档</title>
497
+ <title>吴乐川的示范文档</title>
487
498
  <!-- 这是简短的单行注释。 -->
488
499
  <style id="my-embedded-styles">
489
500
  div {
@@ -592,7 +603,7 @@ exports.author = 'wulechun@live.com';
592
603
  <meta charset="UTF-8">
593
604
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
594
605
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
595
- <title>乐川的示范文档</title>
606
+ <title>吴乐川的示范文档</title>
596
607
  </head>
597
608
  <body>
598
609
  <h1>DOM 的概念</h1>
@@ -2,7 +2,7 @@ window.shouldShowOnlyTwoLevelsOfTOCItemsAtMost = false
2
2
  window.atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan = 1
3
3
  window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
4
4
 
5
- ;(function setupAndStartApp() {
5
+ ;(function setupAndStartApp () {
6
6
  const gitRepoURIs = [
7
7
  'https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns.git',
8
8
  // 'https://code.aliyun.com/wulechuan/wulechuan-themes-for-htmls-via-markdowns.git',
@@ -81,6 +81,7 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
81
81
  const cssClassNameTOCIsVisible = 'markdown-article-toc-is-visible'
82
82
  const cssClassNameTOCItemHasNestedList = 'has-nested-toc-list'
83
83
  const cssClassNameTOCItemIsCollapsed = 'is-collapsed'
84
+ const cssClassNameTOCItemIsExpanded = 'is-expanded'
84
85
  const cssClassNameTOCTogglingButton = 'markdown-article-toc-toggling-button'
85
86
  const cssClassNameTOCShowsOnly2LevelsOfItems = 'should-show-2-levels-at-most'
86
87
 
@@ -143,10 +144,10 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
143
144
 
144
145
 
145
146
 
146
- function buildTOCPanelTogglingButton() {
147
+ function buildTOCPanelTogglingButton () {
147
148
  /**
148
149
  * 我倾向于用 Javascript 来临时构建该按钮。
149
- * 因为如果一共苛刻的环境仅允许读文档,而不允许
150
+ * 因为如果一个苛刻的环境仅允许读文档,而不允许
150
151
  * Javascript 程序运行,那咱们还要切换按钮干嘛?
151
152
  *
152
153
  * ---------------------------------------------
@@ -160,7 +161,7 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
160
161
  let tocTogglingButton = document.querySelector(`.${cssClassNameTOCTogglingButton}`)
161
162
 
162
163
  /**
163
- * 万一按钮确实已j经存在呢?比如工具构建好了静态的按钮?那就不必再创建一个新的了。
164
+ * 万一按钮确实已经存在呢?比如工具构建好了静态的按钮?那就不必再创建一个新的了。
164
165
  * What if the button already exists? Then we simply don't create one more.
165
166
  */
166
167
  if (!tocTogglingButton) {
@@ -181,24 +182,24 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
181
182
  return tocTogglingButton
182
183
  }
183
184
 
184
- function onTOCTogglingButtonClick() {
185
+ function onTOCTogglingButtonClick () {
185
186
  showOrHideTOCPanel(!tocIsVisible)
186
187
  }
187
188
 
188
- function showOrHideTOCPanel(isToShowIt) {
189
+ function showOrHideTOCPanel (isToShowIt) {
189
190
  tocStatusCSSClassNamesCarrier.classList.toggle(cssClassNameTOCIsVisible, isToShowIt)
190
191
  tocIsVisible = isToShowIt
191
192
  }
192
193
 
193
- function isTOCPanelFloatingOverArticle() {
194
+ function isTOCPanelFloatingOverArticle () {
194
195
  return window.innerWidth <= maxWindowWidthToEnableArticleClickingToHideTOC
195
196
  }
196
197
 
197
- function isTOCPanelCoveringEntirePage() {
198
+ function isTOCPanelCoveringEntirePage () {
198
199
  return window.innerWidth <= maxWindowWidthWhenTOCPanelCoversEntirePage
199
200
  }
200
201
 
201
- function onArticleClick() {
202
+ function onArticleClick () {
202
203
  if (!isTOCPanelFloatingOverArticle()) {
203
204
  return
204
205
  }
@@ -206,7 +207,7 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
206
207
  showOrHideTOCPanel(false)
207
208
  }
208
209
 
209
- function onBackToTopLinkClick() {
210
+ function onBackToTopLinkClick () {
210
211
  if (!isTOCPanelCoveringEntirePage()) {
211
212
  return
212
213
  }
@@ -214,7 +215,7 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
214
215
  showOrHideTOCPanel(false)
215
216
  }
216
217
 
217
- function markLevelIdForTOCAllItems(listRootParent, currentLevel) {
218
+ function markLevelIdForTOCAllItems (listRootParent, currentLevel) {
218
219
  const listRoot = listRootParent.querySelector('ol, ul')
219
220
  if (!listRoot) { return }
220
221
 
@@ -234,7 +235,7 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
234
235
  })
235
236
  }
236
237
 
237
- function makeTOCItemsEachCollapsible() {
238
+ function makeTOCItemsEachCollapsible () {
238
239
  const lis = Array.prototype.slice.apply(tocRoot.querySelectorAll('li'))
239
240
  lis.forEach(li => {
240
241
  if (li.querySelectorAll('li').length > 0) {
@@ -258,14 +259,12 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
258
259
 
259
260
  Array.prototype.slice.apply(allCollapsibleLis).forEach(li => {
260
261
  li.isCollapsible = true
261
-
262
- if (li.tocLevelId > window.atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan) {
263
- li.classList.add(cssClassNameTOCItemIsCollapsed)
264
- }
262
+ const liShouldExpand = li.tocLevelId <= window.atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan
263
+ collapseOrExpandSingleLiElement(li, liShouldExpand)
265
264
  })
266
265
  }
267
266
 
268
- function tocItemAnchorClickHandler(e) {
267
+ function tocItemAnchorClickHandler (e) {
269
268
  e.stopPropagation()
270
269
 
271
270
  const { srcElement } = e
@@ -297,10 +296,27 @@ window.atBeginingShouldExpandTOCWhenWindowIsWideEnough = false
297
296
  }
298
297
 
299
298
  if (TOCItemIsCollapsibleInCurrentSituation) {
300
- if (liElement.classList.contains(cssClassNameTOCItemIsCollapsed) || forceToExpand) {
301
- liElement.classList.remove(cssClassNameTOCItemIsCollapsed)
302
- } else {
303
- liElement.classList.add(cssClassNameTOCItemIsCollapsed)
299
+ const { classList } = liElement
300
+ const liShouldExpand = classList.contains(cssClassNameTOCItemIsCollapsed) || forceToExpand
301
+ collapseOrExpandSingleLiElement(liElement, liShouldExpand)
302
+ }
303
+ }
304
+
305
+ function collapseOrExpandSingleLiElement (liElement, shouldExpand) {
306
+ const { classList } = liElement
307
+ if (shouldExpand) {
308
+ if (!classList.contains(cssClassNameTOCItemIsExpanded)) {
309
+ classList.add(cssClassNameTOCItemIsExpanded)
310
+ }
311
+ if (classList.contains(cssClassNameTOCItemIsCollapsed)) {
312
+ classList.remove(cssClassNameTOCItemIsCollapsed)
313
+ }
314
+ } else {
315
+ if (!classList.contains(cssClassNameTOCItemIsCollapsed)) {
316
+ classList.add(cssClassNameTOCItemIsCollapsed)
317
+ }
318
+ if (classList.contains(cssClassNameTOCItemIsExpanded)) {
319
+ classList.remove(cssClassNameTOCItemIsExpanded)
304
320
  }
305
321
  }
306
322
  }
@@ -1 +1 @@
1
- window.shouldShowOnlyTwoLevelsOfTOCItemsAtMost=!1,window.atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan=1,window.atBeginingShouldExpandTOCWhenWindowIsWideEnough=!1,function(){const e=["https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns.git","https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns.git"],t=e.reduce(((e,t)=>Math.max(e,t.length)),0)+0,n=Math.floor(t/2)+6,l="-".repeat(t),o="=".repeat(t),s="wulechuan@live.com",c="北京时间 2021-03-21",i=[];"中国人——特别是汉族人,理应坚持广泛、规范地使用汉语。凡非必要之情形不说外国话、不用外国字。此乃天经地义!\n然则每当必要,亦不排斥采用外国之语言。不妨博世界之学问,养中国之精神。\n本人亦支持少数民族坚持采用自己民族的传统语言。仍须强调,凡中国人,皆应会用汉语、积极使用汉语,此乃中华各民族之大一统之必由。".split("\n").forEach((e=>{i.push(""),i.push(" "+e.slice(0,n-4));let t=e.slice(n-4);for(;t.length>0;){const e=t.match(/^(,|。|!|,”|。”|!”| 》,|》。| 》!| 》,”| 》。”| 》!”)/);if(e){const n=e[1],l=i[i.length-1];i[i.length-1]=l+n,t=t.slice(n.length)}const l=t.slice(0,n);l&&i.push(l),t=t.slice(l.length)}})),console.log(`\n${o}\n\n欢迎使用吴乐川设计的用于控制文章目录之交互的控制器。\n( Welcome to wulechuan's article TOC controller. )\n\n${" ".repeat(t-s.length)}${s}\n${" ".repeat(t-c.length-3)}${c}\n\n${l}\n\n${e.join("\n")}\n\n${l}\n${i.join("\n")}\n\n${o}\n\n\n`);const r="has-nested-toc-list",a="is-collapsed",u="markdown-article-toc-toggling-button",d=1e3,h=document.querySelector(".markdown-article");if(!h)return;const w=document.querySelector("nav.markdown-article-toc");if(!w)return;w.classList.toggle("should-show-2-levels-at-most",window.shouldShowOnlyTwoLevelsOfTOCItemsAtMost);const p=document.querySelector(".markdown-article-back-to-top");p&&(p.onclick=function(){if(!O())return;v(!1)}),h.onclick=function(){if(!(window.innerWidth<=d))return;v(!1)};const m=document.body,f=m,g=m;let y;g.classList.add("markdown-article-toc-exists"),function e(t,n){const l=t.querySelector("ol, ul");if(!l)return;n||(n=1);l.classList.add(`toc-list-level-${n}`);Array.prototype.slice.apply(l.children).filter((e=>"li"===e.tagName.toLowerCase())).forEach((t=>{t.tocLevelId=n,t.classList.add(`toc-list-level-${n}-item`),e(t,n+1)}))}(w),function(){let e;if(Array.prototype.slice.apply(w.querySelectorAll("li")).forEach((e=>{if(e.querySelectorAll("li").length>0){const t=e.querySelector("a");e.classList.add(r),e.hasNestedList=!0,e.isCollapsible=!1,e.selfAnchor=t,e.onclick=C}})),window.shouldShowOnlyTwoLevelsOfTOCItemsAtMost){const t=w.querySelector("ol, ul").children;e=t}else e=w.querySelectorAll("li.has-nested-toc-list");Array.prototype.slice.apply(e).forEach((e=>{e.isCollapsible=!0,e.tocLevelId>window.atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan&&e.classList.add(a)}))}(),function(){let e=document.querySelector(`.${u}`);e||(e=document.createElement("button"),e.className=u,f===m?f.insertBefore(e,document.scripts[0]):f.appendChild(e));null===e.onclick&&(e.onclick=S)}();let L="";function S(){v(!y)}function v(e){g.classList.toggle("markdown-article-toc-is-visible",e),y=e}function O(){return window.innerWidth<=600}function C(e){e.stopPropagation();const{srcElement:t}=e,n=this,{selfAnchor:l}=n;if(t!==n&&t!==l)return;const o=l.href;let s="";o.match(/#/)&&(s=`#${o.split("#").pop()}`);const c=!!s&&L!==s;L=s;let i=n.isCollapsible;O()&&(i=!1),i&&(n.classList.contains(a)||c?n.classList.remove(a):n.classList.add(a))}v(window.atBeginingShouldExpandTOCWhenWindowIsWideEnough&&window.innerWidth>=d)}();
1
+ window.shouldShowOnlyTwoLevelsOfTOCItemsAtMost=!1,window.atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan=1,window.atBeginingShouldExpandTOCWhenWindowIsWideEnough=!1,function(){const e=["https://gitee.com/nanchang-wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns.git","https://github.com/wulechuan/wulechuan-css-stylus-themes-for-htmls-via-markdowns.git"],t=e.reduce(((e,t)=>Math.max(e,t.length)),0)+0,n=Math.floor(t/2)+6,o="-".repeat(t),l="=".repeat(t),s="wulechuan@live.com",c="北京时间 2021-03-21",i=[];"中国人——特别是汉族人,理应坚持广泛、规范地使用汉语。凡非必要之情形不说外国话、不用外国字。此乃天经地义!\n然则每当必要,亦不排斥采用外国之语言。不妨博世界之学问,养中国之精神。\n本人亦支持少数民族坚持采用自己民族的传统语言。仍须强调,凡中国人,皆应会用汉语、积极使用汉语,此乃中华各民族之大一统之必由。".split("\n").forEach((e=>{i.push(""),i.push(" "+e.slice(0,n-4));let t=e.slice(n-4);for(;t.length>0;){const e=t.match(/^(,|。|!|,”|。”|!”| 》,|》。| 》!| 》,”| 》。”| 》!”)/);if(e){const n=e[1],o=i[i.length-1];i[i.length-1]=o+n,t=t.slice(n.length)}const o=t.slice(0,n);o&&i.push(o),t=t.slice(o.length)}})),console.log(`\n${l}\n\n欢迎使用吴乐川设计的用于控制文章目录之交互的控制器。\n( Welcome to wulechuan's article TOC controller. )\n\n${" ".repeat(t-s.length)}${s}\n${" ".repeat(t-c.length-3)}${c}\n\n${o}\n\n${e.join("\n")}\n\n${o}\n${i.join("\n")}\n\n${l}\n\n\n`);const a="has-nested-toc-list",r="is-collapsed",u="is-expanded",d="markdown-article-toc-toggling-button",h=1e3,w=document.querySelector(".markdown-article");if(!w)return;const p=document.querySelector("nav.markdown-article-toc");if(!p)return;p.classList.toggle("should-show-2-levels-at-most",window.shouldShowOnlyTwoLevelsOfTOCItemsAtMost);const f=document.querySelector(".markdown-article-back-to-top");f&&(f.onclick=function(){if(!C())return;O(!1)}),w.onclick=function(){if(!(window.innerWidth<=h))return;O(!1)};const m=document.body,g=m,y=m;let v;y.classList.add("markdown-article-toc-exists"),function e(t,n){const o=t.querySelector("ol, ul");if(!o)return;n||(n=1);o.classList.add(`toc-list-level-${n}`);Array.prototype.slice.apply(o.children).filter((e=>"li"===e.tagName.toLowerCase())).forEach((t=>{t.tocLevelId=n,t.classList.add(`toc-list-level-${n}-item`),e(t,n+1)}))}(p),function(){let e;if(Array.prototype.slice.apply(p.querySelectorAll("li")).forEach((e=>{if(e.querySelectorAll("li").length>0){const t=e.querySelector("a");e.classList.add(a),e.hasNestedList=!0,e.isCollapsible=!1,e.selfAnchor=t,e.onclick=k}})),window.shouldShowOnlyTwoLevelsOfTOCItemsAtMost){const t=p.querySelector("ol, ul").children;e=t}else e=p.querySelectorAll("li.has-nested-toc-list");Array.prototype.slice.apply(e).forEach((e=>{e.isCollapsible=!0;$(e,e.tocLevelId<=window.atBeginingShouldCollapseAllTOCItemsOfLevelsGreaterThan)}))}(),function(){let e=document.querySelector(`.${d}`);e||(e=document.createElement("button"),e.className=d,g===m?g.insertBefore(e,document.scripts[0]):g.appendChild(e));null===e.onclick&&(e.onclick=S)}();let L="";function S(){O(!v)}function O(e){y.classList.toggle("markdown-article-toc-is-visible",e),v=e}function C(){return window.innerWidth<=600}function k(e){e.stopPropagation();const{srcElement:t}=e,n=this,{selfAnchor:o}=n;if(t!==n&&t!==o)return;const l=o.href;let s="";l.match(/#/)&&(s=`#${l.split("#").pop()}`);const c=!!s&&L!==s;L=s;let i=n.isCollapsible;if(C()&&(i=!1),i){const{classList:e}=n;$(n,e.contains(r)||c)}}function $(e,t){const{classList:n}=e;t?(n.contains(u)||n.add(u),n.contains(r)&&n.remove(r)):(n.contains(r)||n.add(r),n.contains(u)&&n.remove(u))}O(window.atBeginingShouldExpandTOCWhenWindowIsWideEnough&&window.innerWidth>=h)}();