refactor: make theme color configurable

ourai · Mar 23, 2023 · fd7561e · fd7561e
1 parent 2be1a95
commit fd7561e
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 5 deletions.
diff --git a/man/cookbook/apis/site-config/readme.md b/man/cookbook/apis/site-config/readme.md
@@ -24,8 +24,13 @@ interface Link {
 | 属性名 | 值类型/可选值 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | `text` | `string` | `site.title` | 当前网站品牌所要显示的文本，不指定则显示网站标题 |
+| `color` | `string` | - | 品牌主题色，详见下方 |
 | `parent` | `Link` | - | 当前网站的父品牌，指定后会在当前网站品牌的左边显示 |
 
+### `color`
+
+设置之后，会在 `<head>` 标签内生成 [`<meta name="theme-color" content="指定主题色">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color){:target="_blank"}{:rel="external "}。
+
 ## `modules`
 
 | 属性名 | 值类型/可选值 | 默认值 | 说明 |

diff --git a/man/cookbook/guides/getting-started/entity.yml b/man/cookbook/guides/getting-started/entity.yml
@@ -0,0 +1 @@
+title: 快速上手
diff --git a/man/cookbook/guides/getting-started/readme.md b/man/cookbook/guides/getting-started/readme.md
@@ -0,0 +1,11 @@
+## 与静态网站生成器集成
+
+本主题可在一些主流的静态网站生成器中使用，如 Jekyll、Hexo 等。
+
+为了尽量统一用法和便于自动化处理，在封装适配时遵循如下约定：
+
+- 除了个别文件外，主题所提供的和强依赖的资源基本都放在 `ksio` 文件夹下；
+- 用于控制主题预置渲染逻辑的配置项都挂在静态网站生成器配置文件中的 `ksio` 下面（详见《[网站配置]({{ site.baseurl }}/apis/site-config/)》）；
+- 通过 [KnoSys](https://knosysio.github.io/){:target="_blank"}{:rel="external "} 生成的文件都在 `knosys` 或 `_knosys` 文件夹下。
+
+### Jekyll
diff --git a/src/jekyll/_config.yml b/src/jekyll/_config.yml
@@ -132,11 +132,12 @@ feed:
 # KnoSys site config
 ksio:
  brand:
+ color: "#0871ab"
  parent:
  text: OOSS
  url: https://oss.ourai.ws/
  navs:
- - text: 指南
+ - text: 文档
  url: /guides/
  - text: 博客
  url: /posts/

diff --git a/src/jekyll/_data/local/repos.yml b/src/jekyll/_data/local/repos.yml
@@ -5,6 +5,7 @@ cookbook:
  - text: 概述
  collection: pages
  slug: guides
+ - slug: getting-started
  - text: API
  collection: apis
  items:

diff --git a/src/jekyll/_includes/ksio/components/doc-toc.html b/src/jekyll/_includes/ksio/components/doc-toc.html
@@ -10,12 +10,12 @@
  {% include ksio/components/doc-toc.html repo=include.repo items=_inc_item.items collection=_inc_collection %}
  {% elsif _inc_item.slug %}
  {% if _inc_collection == "pages" %}
- <a{% if _inc_item.slug == _inc_url_parts[1] and _inc_url_parts.size == 2 %} class="is-selected"{% endif %} href="/{{ _inc_item.slug }}/">{{ _inc_item.text }}</a>
+ <a{% if _inc_item.slug == _inc_url_parts[1] and _inc_url_parts.size == 2 %} class="is-selected"{% endif %} href="{{_inc_site_url}}/{{ _inc_item.slug }}/">{{ _inc_item.text }}</a>
  {% else %}
- <a{% if _inc_item.slug == _inc_url_parts[2] %} class="is-selected"{% endif %} href="{{ '/' | append: _inc_collection | append: '/' | append: _inc_item.slug | append: '/' | prepend: _inc_site_url }}">{{ _inc_docs[_inc_item.slug].title }}</a>
+ <a{% if _inc_item.slug == _inc_url_parts[2] %} class="is-selected"{% endif %} href="{{ _inc_site_url }}/{{ _inc_collection | append: '/' | append: _inc_item.slug }}/">{{ _inc_docs[_inc_item.slug].title }}</a>
  {% endif %}
  {% else %}
- <a{% if _inc_item == _inc_url_parts[2] %} class="is-selected"{% endif %} href="{{ '/' | append: _inc_collection | append: '/' | append: _inc_item | append: '/' | prepend: _inc_site_url }}">{{ _inc_docs[_inc_item].title }}</a>
+ <a{% if _inc_item == _inc_url_parts[2] %} class="is-selected"{% endif %} href="{{ _inc_site_url }}/{{ _inc_collection | append: '/' | append: _inc_item }}/">{{ _inc_docs[_inc_item].title }}</a>
  {% endif %}
  </li>
  {% endfor %}

diff --git a/src/jekyll/_includes/ksio/meta/brand.html b/src/jekyll/_includes/ksio/meta/brand.html
@@ -1,2 +1,2 @@
-<meta name="theme-color" content="#0871ab">
+{% if site.ksio.brand.color %}<meta name="theme-color" content="{{ site.ksio.brand.color }}">{% endif %}
 <link rel="icon" href="{{ 'favicon' | asset_path }}">
diff --git a/src/jekyll/_pages/guides.md b/src/jekyll/_pages/guides.md
@@ -63,3 +63,5 @@ permalink: /guides/
 {% highlight html %}
 本站主题 <a href="https://ourai.github.io/lime/" target="_blank" rel="external ">Lime</a> 由 <a href="https://linxoid.com/ourai/" target="_blank" rel="external ">欧雷</a> 提供
 {% endhighlight %}
+
+关于主题的使用方式详见《[快速上手]({{ site.baseurl }}/guides/getting-started/)》。