refactor: make header and footer of layout configurable

ourai · Mar 24, 2023 · d8fcdc9 · d8fcdc9
1 parent d35646a
commit d8fcdc9
Show file tree

Hide file tree

Showing 17 changed files with 150 additions and 56 deletions.
diff --git a/man/cookbook/apis/site-config/readme.md b/man/cookbook/apis/site-config/readme.md
@@ -14,35 +14,92 @@ interface Link {
 
 | 属性名 | 值类型/可选值 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `brand` | `object` | - | 品牌相关配置，主要控制页头左上角的链接与文本，详见下方 |
-| `navs` | `Link[]` | - | 页面头部导航 |
-| `links` | `Link[]` | - | 页面底部链接 |
-| `modules` | `object` | - | 模块功能控制，详见下方 |
+| `meta` | `object` | - | 网站信息，[详见下方](#meta) |
+| `brand` | `object` | - | 品牌相关配置，主要控制页头左上角的链接与文本，[详见下方](#brand) |
+| `copyright` | `object` | - | 网站版权声明，[详见下方](#copyright) |
+| `header` | `object` | - | 页面头部，[详见下方](#header) |
+| `footer` | `object` | - | 页面底部，[详见下方](#footer) |
+| `social` | `object` | - | 社交相关功能的开关与配置，[详见下方](#social) |
+
+## `meta`
+
+| 属性名 | 值类型/可选值 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `url` | `string` | - | 网站发布后的访问链接 |
 
 ## `brand`
 
 | 属性名 | 值类型/可选值 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | `text` | `string` | `site.title` | 当前网站品牌所要显示的文本，不指定则显示网站标题 |
-| `color` | `string` | - | 品牌主题色，详见下方 |
+| `color` | `string` | - | 品牌主题色，[详见下方](#color) |
 | `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`
+## `copyright`
+
+| 属性名 | 值类型/可选值 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `owner` | `Link` | - | 版权所有人，默认使用网站标题与地址 |
+| `period` | `object` | - | 有效期间，[详见下方](#period) |
+
+### `period`
+
+结构、默认值与说明如下：
+
+{% highlight js %}
+{
+ start: 当前年份, // 起始时间，一般只有年份
+}
+{% endhighlight %}
+
+## `header`
+
+| 属性名 | 值类型/可选值 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `partial` | `string` | `'ksio/header.html'` | 预置布局模板中页头部分，可指定自定义的替换主题预置的 |
+| `navs` | `Link[]` | - | 页面头部导航 |
+| `navbar` | `object` | - | 页头导航栏，[详见下方](#navbar) |
+
+### `navbar`
+
+结构、默认值与说明如下：
+
+{% highlight js %}
+{
+ placement: 'left', // 导航菜单显示位置
+}
+{% endhighlight %}
+
+## `footer`
 
 | 属性名 | 值类型/可选值 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| `social` | `object` | - | 社交相关功能的开关与配置，详见下方 |
+| `partial` | `string` | `'ksio/footer.html'` | 预置布局模板中页脚部分，可指定自定义的替换主题预置的 |
+| `links` | `Link[]` | - | 页面底部链接 |
 
-### `social`
+## `social`
+
+| 属性名 | 值类型/可选值 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `feed` | `object` | - | feed 订阅功能，[详见下方](#feed) |
+| `share` | `boolean` | `false` | 是否启用将页面分享到其他 SNS 的按钮 |
+| `comment` | `object` | - | 评论功能，[详见下方](#comment) |
+
+### `feed`
 
 结构、默认值与说明如下：
 
 {% highlight js %}
 {
- share: false, // 是否启用将页面分享到其他 SNS 的按钮
+ rss: false, // 是否生成 RSS feed
+ atom: false, // 是否生成 Atom feed
 }
 {% endhighlight %}
+
+### `comment`
+
+待补充。
diff --git a/src/jekyll/_config.yml b/src/jekyll/_config.yml
@@ -131,31 +131,43 @@ feed:
 
 # KnoSys site config
 ksio:
+ meta:
+ url: https://ourai.github.io/lime
  brand:
  color: "#0871ab"
  parent:
  text: OOSS
  url: https://oss.ourai.ws/
- navs:
- - text: 文档
- url: /guides/
- - text: 博客
- url: /posts/
- - text: 关于
- children:
- - text: 本站
- url: /about/
- - text: 作者
- url: https://linxoid.com/ourai/
- - text: GitHub
- url: https://github.com/ourai/lime
- links:
- - text: OOSS
- url: https://oss.ourai.ws/
- - text: 关于
- url: /about/
- - text: 资助
- url: /about/#donation
- modules:
- social:
- share: true
+ copyright:
+ owner:
+ text: 欧雷流
+ url: https://ourai.ws/
+ period:
+ start: 2015
+ header:
+ navs:
+ - text: 文档
+ url: /guides/
+ - text: 博客
+ url: /posts/
+ - text: 关于
+ children:
+ - text: 本站
+ url: /about/
+ - text: 作者
+ url: https://linxoid.com/ourai/
+ - text: GitHub
+ url: https://github.com/ourai/lime
+ navbar:
+ placement: right
+ footer:
+ partial: footer.html
+ links:
+ - text: OOSS
+ url: https://oss.ourai.ws/
+ - text: 关于
+ url: /about/
+ - text: 资助
+ url: /about/#donation
+ social:
+ share: true
diff --git a/src/jekyll/_includes/footer.html b/src/jekyll/_includes/footer.html
@@ -0,0 +1,19 @@
+<footer class="Page-footer Footer">
+ <div class="{% if site.data.local.repos[page.repo] %}container-fluid{% else %}container{% endif %}">
+ {% assign utm_params = "utm_source=" | append: site.ksio.meta.url | append: "&utm_medium=common-footer" %}
+ <div class="Footer-description">
+ {% if site.ksio.footer.links and site.ksio.footer.links.size > 0 %}
+ <nav class="Footer-navs">
+ <ul>{% for link in site.ksio.footer.links %}<li>{% include ksio/components/link.html link=link wrap=true utm=utm_params %}</li>{% endfor %}</ul>
+ </nav>
+ {% endif %}
+ <div class="Footer-copyright">
+ <p>{% include ksio/components/copyright.html utm=utm_params %}</p>
+ <p>由 <a href="https://linxoid.com/ourai/?{{ utm_params }}" target="_blank" rel="external ">欧雷</a> 用 ♥ 设计与开发</p>
+ </div>
+ <div class="Footer-licenses">
+ <p>本站通过 <a href="https://knosysio.github.io/?{{ utm_params }}" target="_blank" rel="external ">KnoSys</a> 借助 <a href="https://jekyllrb.com" target="_blank" rel="external ">Jekyll</a> 生成</p>
+ </div>
+ </div>
+ </div>
+</footer>
diff --git a/src/jekyll/_includes/ksio/components/brand-link.html b/src/jekyll/_includes/ksio/components/brand-link.html
@@ -2,7 +2,7 @@
 {% assign _inc_brand_url = '/' | prepend: site.baseurl | prepend: site.url %}
 {% assign _inc_brand_text = site.ksio.brand.text | default: site.title %}
 {% if _inc_parent_brand %}
- <a href="{{ _inc_parent_brand.url }}?utm_source=ourai.github.io/lime&utm_medium=brand" target="_blank" rel="external ">{{ _inc_parent_brand.text }}</a><a href="{{ _inc_brand_url }}">{{ _inc_brand_text }}</a>
+ <a href="{{ _inc_parent_brand.url }}?utm_source={{ site.ksio.meta.url }}&utm_medium=brand" target="_blank" rel="external ">{{ _inc_parent_brand.text }}</a><a href="{{ _inc_brand_url }}">{{ _inc_brand_text }}</a>
 {% else %}
  <a {% if include.class %}class="{{ include.class }}" {% endif %}href="{{ _inc_brand_url }}">{{ _inc_brand_text }}</a>
 {% endif %}
diff --git a/src/jekyll/_includes/ksio/components/copyright.html b/src/jekyll/_includes/ksio/components/copyright.html
@@ -0,0 +1,8 @@
+{% assign _inc_cr = site.ksio.copyright %}{% if _inc_cr %}{% assign _inc_current = site.time | date: "%Y" %}{% assign _inc_start = _inc_cr.period.start | default: _inc_current %}{% assign _inc_site_url = "/" | prepend: site.baseurl | prepend: site.url %}{% assign _inc_url = _inc_cr.owner.url | default: _inc_site_url %}{% if _inc_url contains "http" %}
+{% assign _inc_external = true %}{% if include.utm %}
+ {% assign _inc_url = _inc_url | append: "?" | append: include.utm %}
+ {% endif %}
+{% else %}
+ {% assign _inc_external = false %}
+{% endif %}&copy; {% if _inc_start != _inc_current %}{{ _inc_start }}-{% endif %}{{ _inc_current }} <a href="{{ _inc_url }}"{% if _inc_external %} target="_blank" rel="external "{% endif %}>{{ _inc_cr.owner.text | default: site.title }}</a> 版权所有
+{% endif %}
diff --git a/src/jekyll/_includes/ksio/components/nav-list.html b/src/jekyll/_includes/ksio/components/nav-list.html
@@ -7,7 +7,8 @@
  <ul class="dropdown-menu">{% include ksio/components/nav-list.html navs=_inc_nav.children %}</ul>
  </li>
  {% else %}
- <li>{% include ksio/components/link.html link=_inc_nav utm="utm_source=ourai.github.io/lime&utm_medium=common-header" %}</li>
+ {% assign _inc_utm = "utm_source=" | append: site.ksio.meta.url | append: "&utm_medium=common-header" %}
+ <li>{% include ksio/components/link.html link=_inc_nav utm=_inc_utm %}</li>
  {% endif %}
  {% endfor %}
 {% endif %}
diff --git a/src/jekyll/_includes/ksio/footer.html b/src/jekyll/_includes/ksio/footer.html
@@ -1,20 +1,17 @@
 <footer class="Page-footer Footer">
  <div class="{% if site.data.local.repos[page.repo] %}container-fluid{% else %}container{% endif %}">
- {% assign utm_params = "utm_source=ourai.github.io/lime&utm_medium=common-footer" %}
+ {% assign utm_params = "utm_source=" | append: site.ksio.meta.url | append: "&utm_medium=common-footer" %}
  <div class="Footer-description">
- {% if site.ksio.links and site.ksio.links.size > 0 %}
+ {% if site.ksio.footer.links and site.ksio.footer.links.size > 0 %}
  <!-- Important links -->
  <nav class="Footer-navs">
- <ul>{% for link in site.ksio.links %}<li>{% include ksio/components/link.html link=link wrap=true utm=utm_params %}</li>{% endfor %}</ul>
+ <ul>{% for link in site.ksio.footer.links %}<li>{% include ksio/components/link.html link=link wrap=true utm=utm_params %}</li>{% endfor %}</ul>
  </nav>
  {% endif %}
  <!-- Copyright -->
  <div class="Footer-copyright">
- <p>&copy; 2015-{{ site.time | date: "%Y" }} <a href="https://ourai.ws/?{{ utm_params }}" target="_blank">欧雷流</a> 版权所有</p>
- <p>由 <a href="https://linxoid.com/ourai/?{{ utm_params }}" target="_blank" rel="external ">欧雷</a> 用 ♥ 设计与开发</p>
- </div>
- <div class="Footer-licenses">
- <p>本站通过 <a href="https://knosysio.github.io/?{{ utm_params }}" target="_blank" rel="external ">KnoSys</a> 借助 <a href="https://jekyllrb.com" target="_blank" rel="external ">Jekyll</a> 生成</p>
+ <p>{% include ksio/components/copyright.html utm=utm_params %}</p>
+ {{ site.ksio.copyright.fragments }}
  </div>
  </div>
  </div>

diff --git a/src/jekyll/_includes/ksio/header.html b/src/jekyll/_includes/ksio/header.html
@@ -1,7 +1,7 @@
 <header class="Page-header">
  <div class="navbar navbar-static-top">
  <div class="{% if site.data.local.repos[page.repo] %}container-fluid{% else %}container{% endif %}">
- {% assign site_navs = site.ksio.navs %}
+ {% assign site_navs = site.ksio.header.navs %}
  <div class="navbar-header">
  {% if site_navs and site_navs.size > 0 %}
  <button class="navbar-toggle collapsed" type="button" data-target=".Page-navs" data-toggle="collapse">
@@ -19,7 +19,7 @@
  </div>
  <!-- Nav menus -->
  <nav class="Page-navs navbar-collapse collapse">
- <ul class="nav navbar-nav navbar-right">
+ <ul class="nav navbar-nav{% if site.ksio.header.navbar.placement == 'right' %} navbar-right{% endif %}">
  {% include ksio/components/nav-list.html navs=site_navs %}
  </ul>
  </nav>

diff --git a/src/jekyll/_includes/ksio/meta/feed.html b/src/jekyll/_includes/ksio/meta/feed.html
@@ -1,4 +1,4 @@
-{% assign feed_config = site.ksio.modules.social.feed %}
+{% assign feed_config = site.ksio.social.feed %}
 {% if feed_config %}
 <!-- 订阅 -->
 {% if feed_config.atom %}{% feed_meta %}{% endif %}

diff --git a/src/jekyll/_includes/ksio/widgets/disqus.html b/src/jekyll/_includes/ksio/widgets/disqus.html
@@ -1,4 +1,4 @@
-{% assign comment_config = site.ksio.modules.social.comment.disqus %}
+{% assign comment_config = site.ksio.social.comment.disqus %}
 {% if comment_config %}
  {% if jekyll.environment == "production" %}
  {% assign disqus_shortname = comment_config.shortname %}

diff --git a/src/jekyll/_includes/ksio/widgets/share.html b/src/jekyll/_includes/ksio/widgets/share.html
@@ -1,4 +1,4 @@
-{% if site.ksio.modules.social.share == true %}
+{% if site.ksio.social.share == true %}
  <div class="Widget Widget--share">
  <div class="Widget-body">
  <p>分享到<i class="fa fa-share-alt"></i></p>

diff --git a/src/jekyll/_layouts/ksio/default.html b/src/jekyll/_layouts/ksio/default.html
@@ -10,7 +10,7 @@
  <head>
  {% include ksio/head.html %}
  <!-- 静态资源 -->
- {% if site.ksio.modules.social.comment.disqus.proxy %}{% stylesheet ksio/vendors/disqusjs.min %}{% endif %}
+ {% if site.ksio.social.comment.disqus.proxy %}{% stylesheet ksio/vendors/disqusjs.min %}{% endif %}
  {% stylesheet global %}
  {% if layout.css %}
  {% for css in layout.css %}{{ css | stylesheet }}{% endfor %}

diff --git a/src/jekyll/_layouts/ksio/doc.html b/src/jekyll/_layouts/ksio/doc.html
@@ -8,7 +8,7 @@
  - ksio/components
 ---
 
-{% include ksio/header.html %}
+{% include {{ site.ksio.header.partial | default: "ksio/header.html" }} %}
 <div class="Page-content">
  {% assign repo = site.data.local.repos[page.repo] %}
  {% assign url_parts = page.id | split: "/" %}
@@ -30,7 +30,7 @@ <h1 class="Article-title">{{ page.title }}</h1>
  {% include ksio/widgets/toc.html %}
  </footer>
  </article>
- {% include ksio/footer.html %}
+ {% include {{ site.ksio.footer.partial | default: "ksio/footer.html" }} %}
  </main>
 </div>
 

diff --git a/src/jekyll/_layouts/ksio/page.html b/src/jekyll/_layouts/ksio/page.html
@@ -7,7 +7,7 @@
  - ksio/components
 ---
 
-{% include ksio/header.html %}
+{% include {{ site.ksio.header.partial | default: "ksio/header.html" }} %}
 <main class="Page-content">
  {% assign banner = page.banner %}
  {% if banner %}
@@ -88,4 +88,4 @@ <h3>{{ sibling.title }}</h3>
  {% endifhascontent %}
  </div>
 </main>
-{% include ksio/footer.html %}
+{% include {{ site.ksio.footer.partial | default: "ksio/footer.html" }} %}
diff --git a/src/jekyll/_pages/about.md b/src/jekyll/_pages/about.md
@@ -2,7 +2,7 @@
 title: 关于本站
 ---
 
-{% assign utm_params = "utm_source=ourai.github.io/lime&utm_medium=about" %}
+{% assign utm_params = "utm_source=" | append: site.ksio.meta.url | append: "&utm_medium=about" %}
 {% assign sponsor_url = "https://ourai.ws/sponsor/?" | append: utm_params %}
 
 本站既是主题的使用文档，又是在线示例——在浏览学习如何使用本主题的同时，又将其所提供的外观和各种布局几乎都体验了个遍，一举两得！

diff --git a/src/jekyll/_pages/guides.md b/src/jekyll/_pages/guides.md
@@ -11,7 +11,7 @@ repo: cookbook
 permalink: /guides/
 ---
 
-本主题由[欧雷](https://linxoid.com/ourai/?utm_source=ourai.github.io/lime){:target="_blank"}{:rel="external "}于 2015 年开始设计与开发，并在个人网站「[欧雷流](https://ourai.ws/?utm_source=ourai.github.io/lime){:target="_blank"}{:rel="external "}」及个人各种开源软件的文档站上使用多年；在设计时以提高阅读体验和保持简洁风格为最高原则，体现个性在其次。
+本主题由[欧雷](https://linxoid.com/ourai/?utm_source={{ site.ksio.meta.url }}){:target="_blank"}{:rel="external "}于 2015 年开始设计与开发，并在个人网站「[欧雷流](https://ourai.ws/?utm_source={{ site.ksio.meta.url }}){:target="_blank"}{:rel="external "}」及个人各种开源软件的文档站上使用多年；在设计时以提高阅读体验和保持简洁风格为最高原则，体现个性在其次。
 
 因而，适用于博客、个人网站、API 文档站等以内容为主的网站。
 
@@ -61,7 +61,7 @@ permalink: /guides/
 虽说本主题源码开源并免费使用，但还是希望能够在使用时保留主题和作者的名字与来源；如果可以，请在网站底部（即 `footer` 中）加上如下 HTML 代码：
 
 {% 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> 提供
+本站主题 <a href="{{ site.ksio.meta.url }}/" target="_blank" rel="external ">Lime</a> 由 <a href="https://linxoid.com/ourai/" target="_blank" rel="external ">欧雷</a> 提供
 {% endhighlight %}
 
 关于主题的使用方式详见《[快速上手]({{ site.baseurl }}/guides/getting-started/)》。
diff --git a/src/jekyll/_pages/index.html b/src/jekyll/_pages/index.html
@@ -32,4 +32,4 @@ <h3>多种支持</h3>
  </section>
  </article>
 </main>
-{% include ksio/footer.html %}
+{% include footer.html %}