From 4d4a9c653744b40087dd12d2374aabeaaaac7286 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E4=BA=91=E8=8B=8D=E7=8B=97?= Date: Tue, 11 Oct 2022 12:22:37 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=83=20docs:=20=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/_config.async.yml | 10 +++- demo/source/_data/style/index.less | 2 +- docs/.vitepress/assets/log.json | 27 ++++++++++ docs/.vitepress/components/ChangeLog.vue | 2 +- docs/.vitepress/components/ChangeLogs.vue | 15 +++++- docs/guide/config.md | 66 +++++++++++++++++++++-- docs/guide/third-party-support.md | 11 ++-- package/hexo-theme-async/_config.yml | 2 +- 8 files changed, 121 insertions(+), 14 deletions(-) diff --git a/demo/_config.async.yml b/demo/_config.async.yml index 504b0b12..40ae9cfe 100644 --- a/demo/_config.async.yml +++ b/demo/_config.async.yml @@ -24,8 +24,6 @@ sidebar: url: https://www.npmjs.com/package/hexo-theme-async name: Npm -is_toc: true - footer: powered: enable: true @@ -60,3 +58,11 @@ creative_commons: language: deed.zh post: true clipboard: true + +swup: true + +toc: + enable: true + list_number: true + max_depth: 3 + min_depth: 1 \ No newline at end of file diff --git a/demo/source/_data/style/index.less b/demo/source/_data/style/index.less index 6e107bf4..e67cb25c 100644 --- a/demo/source/_data/style/index.less +++ b/demo/source/_data/style/index.less @@ -15,7 +15,7 @@ } } -body::before { +.trm-app-frame::before { content : 'dev'; position : absolute; z-index : 55; diff --git a/docs/.vitepress/assets/log.json b/docs/.vitepress/assets/log.json index 7750fce5..8e918cbe 100644 --- a/docs/.vitepress/assets/log.json +++ b/docs/.vitepress/assets/log.json @@ -1,4 +1,31 @@ [ + { + "large_version": "v1.2.x", + "children": [ + { + "version": "1.2.1", + "date": "2022-10-11", + "logs": [ + { + "type": "refactor", + "text": "修改主题切换方式" + }, + { + "type": "perf", + "text": "优化移动端间距" + }, + { + "type": "perf", + "text": "优化文章目录" + }, + { + "type": "fix", + "text": "嵌套导航 target 设置失效" + } + ] + } + ] + }, { "large_version": "v1.1.x", "children": [ diff --git a/docs/.vitepress/components/ChangeLog.vue b/docs/.vitepress/components/ChangeLog.vue index 3beef115..7e2f46d7 100644 --- a/docs/.vitepress/components/ChangeLog.vue +++ b/docs/.vitepress/components/ChangeLog.vue @@ -22,7 +22,7 @@ const props = defineProps({ } &.fix { - color: #ff9900; + color: #ff2600; } // 样式 diff --git a/docs/.vitepress/components/ChangeLogs.vue b/docs/.vitepress/components/ChangeLogs.vue index 3ba9f7d5..05069108 100644 --- a/docs/.vitepress/components/ChangeLogs.vue +++ b/docs/.vitepress/components/ChangeLogs.vue @@ -11,10 +11,23 @@ import logs from "../assets/log.json"; - \ No newline at end of file + + \ No newline at end of file diff --git a/docs/guide/config.md b/docs/guide/config.md index 31391152..22992c21 100644 --- a/docs/guide/config.md +++ b/docs/guide/config.md @@ -371,11 +371,19 @@ reward: true ``` ### 文章目录 +文章目录，默认是关闭的。开启后，根据您的 [Markdown](https://segmentfault.com/markdown) 自动生成目录。如果您想关闭指定文章的目录，您可以在文章页单独配置当前文章关闭。[参考这里](/guide/page.html#文章-posts) -文章详情页目录，默认关闭。开启后，您可以在文章页单独配置当前文章关闭。[参考这里](/guide/page.html#文章-posts) +- `enable`：是否开启 +- `list_number`：是否显示编号 +- `max_depth`：生成 TOC 的最大深度 +- `min_depth`：生成 TOC 的最小深度 ``` yaml -is_toc: true +toc: + enable: true + list_number: true + max_depth: 3 + min_depth: 1 ``` ### 图片懒加载 @@ -461,9 +469,49 @@ icons: ``` ## 自定义样式 Style - 相比 `head` 引入，您可以直接编写 `less` 文件，并使用主题已有的变量，且将和主题样式文件一起编译。 +::: danger +在 `1.2.x + ` 修改主题切换实现方式，由原来多份样式文件调整为 CSS 变量形式。所以自定义样式也有些许变化。 +::: + +### `1.2.x` 版本 +- 新建 `source/_data/style/index.less`，开始编写你的自定义样式了。 + +```text {5} +┌── blog +│ └── source +│ └── _data +│ └── style +│ ├── index.less +│ └── themes +``` + +`:root` 下为白色主题，`:root.dart` 下为暗黑色主题， + +修改主题色示例： + +``` less source/_data/style/index.less +:root { + .var-primary(#5a5df0, #697be2); + + &.dark { + .var-primary(#a4ce60, #82df7a); + } +} +``` + +跟随操作系统选择主题示例： + +``` less source/_data/style/index.less +@media (prefers-color-scheme: dark) { + :root { + .dark() + } +} +``` +### `1.1.x` 版本 + - 新建 `source/_data/style/dark.less`、`source/_data/style/light.less`，开始编写你的自定义样式了。他们分别默认会合并到 `dark`、`light` 两种模式中去。 - 如果需要覆盖变量可以添加 `source/_data/style/dark.variables.less`、`source/_data/style/light.variables.less`，进行覆盖。 @@ -478,6 +526,18 @@ icons: │ └── light.variables.less │ └── themes ``` +修改主题色示例： +``` less source/_data/style/dark.less +// source/_data/style/dark.less +@primary :#6062ce; +@primary-weak :#7a89df; +``` + +``` less source/_data/style/light.less +// source/_data/style/light.less +@primary :#6062ce; +@primary-weak :#7a89df; +``` ## 渐进式应用 PWA diff --git a/docs/guide/third-party-support.md b/docs/guide/third-party-support.md index e320c0ca..d1e9d8e0 100644 --- a/docs/guide/third-party-support.md +++ b/docs/guide/third-party-support.md @@ -3,6 +3,7 @@ 所有配置默认在 `_config.async.yml` 文件下进行。 与额外依赖库支持的区别，此处主要为使用第三方服务商提供的服务实现。 + ## 分析统计 默认内置了 百度、谷歌、腾讯三个种。 @@ -46,6 +47,10 @@ comment: ``` 若果您需要集成一些三方评论插件，您可以通过修改下列 layout 文件进行集成。 +::: tip +增加三方评论插件，一般来说只需要按照三方插件添加对应 `js`、`css` 文件，在 `layout/_widget/comment.ejs` 添加对应初始化代码，处理好主题切换样式就可以了。 +::: + 第一部分： 你需要 修改 `layout/_widget/comment.ejs`（评论插件模板，所有使用评论页面都引用了这个文件） 文件，有关三方评论插件使用的 HTML 相关代码可以在这个文件编写。`layout/comment.ejs` 文件为留言页面模板，一般不需要额外修改。 @@ -63,11 +68,7 @@ assets: ``` 并在 `layout/_third-party/plugin.ejs` 里，编写您动态加载插件代码。 -~~第三部分：~~ - -~~通过上面步骤发现加载出您的评论插件后，您可能会发现，有评论页面，滚动条出现异常并不能滚动到底。是因为评论区域数据是动态的，滚动插件没更新高度导致的。您可以[参考这里](https://github.com/MaLuns/hexo-theme-async/blob/415eba005dffe1e42b10c7b9c104e901542a9dc7/source/js/main.js)代码的 InitLocomotiveScroll 函数。~~ - -如果您集成了三方评论插件，欢迎您提交 Pull Request 。 +如果您集成了三方评论插件，欢迎您提交 [Pull Request](https://github.com/MaLuns/hexo-theme-async/pulls) ，完善主题健壮性。 ## 搜索 diff --git a/package/hexo-theme-async/_config.yml b/package/hexo-theme-async/_config.yml index b9d00228..b83aaec6 100644 --- a/package/hexo-theme-async/_config.yml +++ b/package/hexo-theme-async/_config.yml @@ -184,7 +184,7 @@ reward: # url: methods: -# p +# Article table of contents toc: enable: false list_number: true