Add some readme

7 files changed, 312 insertions, 11 deletions

diff --git a/_config.yml b/_config.yml
index 78c6e3a..0ad21fb 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,23 +1,93 @@
+# Fill in your logo address (darkmode and lightmode) here
+# Dont forget to enable it.
+# ------------------------------------------------------------
+# 在这里填入你的 Logo 地址 - 包括黑暗/白天模式
+# 不要忘记把 enable 改成 true 哦～
 logo:
   enable: false
   lightmode: null
   darkmode: null
+
+# Favicon file link
+# ------------------------------------------------------------
+# Favicon 文件地址
 favicon: false
+
+# Datetime format for most of positions
+# ------------------------------------------------------------
+# 站点内大部分日期的显示格式
 timeformat: "MMM, D YYYY"
+
+# Enable Podcast support or not
+# 是否启用 Podcast 支持
 podcast: true
+
+# Enable Lazyload support or not
+# ------------------------------------------------------------
+# 是否启用图片懒加载
 lazyload: true
+
+# Your Copyright String will be shown in footer
+# ------------------------------------------------------------
+# 你的版权信息会显示在页脚
 copyright: 'All rights reserved.'
+
+# Enable code auto Highlight or not
+# Then select one lightmode and darkmode style here:
+# https://github.com/highlightjs/highlight.js/tree/main/src/styles
+# Please enable 'highlight' in your project _config.yml with 'hljs' field set to true!
+# ------------------------------------------------------------
+# 是否启用代码渲染
+# 之后给代码渲染选择一个夜间/白天模式主题：
+# https://github.com/highlightjs/highlight.js/tree/main/src/styles
+# 最后，在项目的 _config.yml 中打开 highlight 功能并把 hljs 设置为 true！
 highlight:
   enable: true
   lightmode: 'atom-one-light'
   darkmode: 'atom-one-dark'
+
+# Navbar will be shown below your logo with some favicons
+# You can select your icons with font-awesome 5
+# Config format:
+#   ['Link Address', 'Icon Class', 'Text After Icon']
+# ------------------------------------------------------------
+# Navbar 会展示在页面头部的 Logo 下方
+# 你可以去 Font Awesome 5 上面选一些好看的图标
+# 配置格式：
+#   ['链接地址', '图标类', '图标之后的文字']
 navbar:
   - ['mailto:[email protected]', 'fa fa-paper-plane', '']
   - ['https://github.com/guiqiqi/chromate', 'fa fa-github', '']
   - ['/feed.rss', 'fa fa-rss', '']
+
+# Menubar and its texts
+# ------------------------------------------------------------
+# 菜单栏的地址和文字
 menubar:
   - ['/about/', 'About']
   - ['/archives/', 'Archives']
+
+# RSS auto generation configuration
+#   enable: true or false
+#   path: feeding path
+#   config:
+#     email: your podcast contact email
+#     category: {
+#       'Apple Podcast Category name': ['Subcategories', ...],
+#       ...
+#     }
+#     explicit: using true if your podcast content is explicit
+# ------------------------------------------------------------
+# RSS 自动生成器配置
+#   enable: 启用为 true
+#   path: RSS 订阅地址
+#   config:
+#     email: 你的 Podcast 联系邮箱
+#     category: {
+#       'Apple Podcast 分类名': ['子分类列表', ...],
+#       ...
+#     }
+#     explicit: 如果你的播客有羞羞的内容，那么改成 true
 rss:
   enable: true
   path: '/feed.rss'
diff --git a/figures/card.png b/figures/card.png
new file mode 100644
index 0000000..44074b9
--- /dev/null
+++ b/figures/card.png
diff --git a/figures/header.png b/figures/header.png
new file mode 100644
index 0000000..28b32cc
--- /dev/null
+++ b/figures/header.png
diff --git a/languages/default.yml b/languages/default.yml
index e280019..b32bd66 100644
--- a/languages/default.yml
+++ b/languages/default.yml
@@ -1,4 +1,4 @@
 next: Next Page
 prev: Previous Page
 listen: Listen Now
-read: Continue Read
\ No newline at end of file
+read: Continue Reading
\ No newline at end of file
diff --git a/readme-zh.md b/readme-zh.md
new file mode 100644
index 0000000..9cb6831
--- /dev/null
+++ b/readme-zh.md
@@ -0,0 +1,125 @@
+[English Version](https://github.com/guiqiqi/Chromate/readme.md)
+
+# Chromate 主题
+
+![](https://github.com/guiqiqi/chromate/blob/main/figures/header.png?raw=true)
+
+Chromate 是一款专为 **Podcaster** 打造的 Hexo 主题。
+
+它具有以下特性:
+
+- **简单轻量**: 没有过多的配置项与第三方库引用，让你的站点能够轻松的配置并在主流设备上加载。
+- **响应式**: 响应式布局使得 Chromate 在移动端也可以正确美观的显示。
+- **对播客的完整支持**: 不需要繁杂的配置项与插件安装，就可以轻松的发布一集播客（下面有详细说明）。
+- **黑暗模式支持**: 不管白天黑夜，你的站点都能够随着操作系统的主题色变化。
+
+---
+
+## 使用
+
+![播客效果展示](https://github.com/guiqiqi/chromate/blob/main/figures/card.png?raw=true)
+
+在开始使用之前，请查看示例配置文件 `_config.yaml` 中的注释，并按说明填写。
+
+### 对博客主们：
+
+没什么特殊的，像往常一样生成文章并码字即可：
+
+```bash
+hexo new post you-post-name-here
+```
+
+如果你想给文章添加头图，在文章配置区添加：
+
+```yaml
+thumbnail: 'Thumbnail-Image-Link'
+```
+
+只是有一点，在文章配置区 **不要** 使用 `podcast` 字段！
+
+### 对播客主们：
+
+按照说明在文章配置区添加如下字段即可：
+
+```yaml
+podcast:
+  subtitle: A test Podcast EP  # 你本期 EP 的子标题
+  authors: ['Doge-Gui', 'Cool Guy']  # 本期作者
+  cover: https://cdn.pixabay.com/photo/2018/03/28/19/21/easter-3270234_1280.jpg  # 网页端播放器上的图片
+  duration: 64  # 时间长度
+  media:
+    url: https://audionautix.com/Music/BackToTheWood.mp3  # 音频文件
+    size: 1020453  # 音频文件大小（按照 Byte 计算）
+    type: audio/mpeg  # 音频文件类型
+  chapters:  # 本期节目章节 - 如果你想自动生成时间线 [可选的]
+    - ['First Chapter', 13]  
+    - ['Second Chapter', 30]
+    - ['Third Chapter', 45]
+    - ['Forth Chapter', 60]
+  references:  # 本期节目引用信息 - 如果你想自动生成引用信息模块 [可选的]
+    - ['Post Thumbnail', 'https://pixabay.com/zh/illustrations/sunrise-ocean-ship-sun-sunset-5863751/']
+    - ['Podcast Cover', 'https://pixabay.com/zh/illustrations/easter-easter-bunny-rabbit-ears-3270234/']
+    - ['Back To The Woods', 'https://audionautix.com/free-music/country']
+```
+
+同样的，**不要** 修改这些字段的名称。
+
+填写完成之后，就可以获得以下功能：
+
+1. **主页的不同引导按钮**
+
+    对于普通的博客文章，在主页会显示 *继续阅读* 按钮，而播客则会显示 *现在收听*。
+
+2. **自动生成网页端播放器**
+
+    对于播客，当你填写完上述必须的配置字段之后，会在网页端自动生成一个播放器（感谢 Shikwasa 项目！）
+
+3. **文章内自动渲染元信息区块**
+
+    如果你填写了上述的配置信息（包括可选字段），那么你就可以在你的播客文章中添加这些自动渲染的区块：
+
+    - 时间线
+
+        ```
+        {% timeline %}
+        ```
+
+    - 引用
+
+        ```
+        {% references %}
+        ```
+
+    - 本期作者信息
+
+        ```
+        {% authors %}
+        ```
+
+4. **自动生成 RSS 订阅文件**
+
+    RSS 对于一个播客来说是非常重要的，但是手动编写是一件很反人类的事情，于是在 Chromate 主题中内置了生成 RSS 订阅的模块，你只需要在配置文件中打开该功能，并按说明填写配置字段即可。
+
+    **重要：如果你想使用该功能，请在你的 Hexo 项目目录运行这条命令以安装一个依赖：**
+
+    ```bash
+    npm install podcast --save
+    ```
+
+---
+
+## 鸣谢
+
+主题使用到了如下的第三方库：
+
+- [Bulma CSS Framework](https://bulma.io)
+- [Highlight.js](https://highlightjs.org)
+- [Bulma Prefers Dark](https://github.com/jloh/bulma-prefers-dark)
+- [Shikwasa Audio Player](https://shikwasa.js.org)
+- [Podcast generator for Node.js](https://github.com/maxnowack/node-podcast)
+
+在主题的编写过程中，参考了这些主题的代码，特别感谢他们：
+
+- [Seje](https://github.com/eatradish/Seje)
+- [Hexo Theme Cards](https://github.com/ChrAlpha/hexo-theme-cards)
+
diff --git a/readme.md b/readme.md
index fe4eaf3..f1f72c6 100644
--- a/readme.md
+++ b/readme.md
@@ -1,16 +1,124 @@
+[中文版本](https://github.com/guiqiqi/Chromate/readme-zh.md)
+
 # Theme Chromate
 
-The Chromate theme is a new Hexo theme that has good support for Podcasts.
+![](https://github.com/guiqiqi/chromate/blob/main/figures/header.png?raw=true)
+
+The Chromate theme is a new Hexo theme with **support for Podcasts**.
 
 It has the following feature:
-- Lightweight: There are no redundant setting items, no references to a large number of third-party libraries, which ensures that it can be loaded and displayed as soon as possible.
-- Responsive: The theme is built on the Bulma CSS framework, which ensures that it can be displayed normally and beautifully on most devices.
-- Support for Podcasts: Without too much configuration, you can easily publish a Podcast.
-- Dark mode support: Dark mode browsing on most browsers/operating systems.
+- **Simple and Lightweight**: There are no redundant setting items, no references to a large number of third-party libraries, which ensures that it can be loaded and displayed as soon as possible.
+- **Responsive**: The theme is built on the *Bulma* CSS framework, which ensures that it can be displayed normally and beautifully on most devices.
+- **Full Support for Podcasts**: Without too much configuration, you can easily publish a Podcast (details below 👇).
+- **Dark mode support**: Dark mode browsing on most of browsers/operating systems.
+
+---
+
+## Usage
+
+![Podcast Preview](https://github.com/guiqiqi/chromate/blob/main/figures/card.png?raw=true)
+
+Take a look at the comments in the sample configuration file `_config.yaml` and fill in them for using Chromate.
+
+### For general Bloggers
+
+Nothing special, just write the article as usual:
+
+```bash
+hexo new post you-post-name-here
+```
 
-If you want to open support for auto generating rss with podcasts, please install a plugin manually:
+For adding a thumbnail to your post, add this to your post file header:
+
+```yaml
+thumbnail: 'Thumbnail-Image-Link'
 ```
-npm install podcast --save
+
+Additionally, just **DO NOT** use `podcast` in post configuration fields!
+
+### For Podcasters
+
+Add these fields in your post configuration area to define a Podcast type post:
+
+```yaml
+podcast:
+  subtitle: A test Podcast EP  # Subtitle of your EP
+  authors: ['Doge-Gui', 'Cool Guy']  # Authors
+  cover: https://cdn.pixabay.com/photo/2018/03/28/19/21/easter-3270234_1280.jpg  # Cover image will shown in web-audio-player
+  duration: 64  # Continuous time
+  media:
+    url: https://audionautix.com/Music/BackToTheWood.mp3  # Media link
+    size: 1020453  # Media size in byte
+    type: audio/mpeg  # Media type
+  chapters:  # Chapters info for auto generating timeline. [Optional]
+    - ['First Chapter', 13]  
+    - ['Second Chapter', 30]
+    - ['Third Chapter', 45]
+    - ['Forth Chapter', 60]
+  references:  # References info for auto generating references. [Optional]
+    - ['Post Thumbnail', 'https://pixabay.com/zh/illustrations/sunrise-ocean-ship-sun-sunset-5863751/']
+    - ['Podcast Cover', 'https://pixabay.com/zh/illustrations/easter-easter-bunny-rabbit-ears-3270234/']
+    - ['Back To The Woods', 'https://audionautix.com/free-music/country']
 ```
 
-It is still under development.
+Please **DO NOT** modify these fields name.
+
+Then you can get:
+
+1. **Different homepage guide buttons**
+
+    For common types of post, you can see the *Continue Reading* guide button on the homepage; for a Podcast, *Listen Now* will be displayed.
+
+2. **Automatically generated audio player**
+
+    For Podcast post, you only need to fill in the Meta meta information according to the format, and a player will be automatically generated in the article (*Special thanks to Shikwasa!*).
+
+3. **Rendering of meta-information inner article**
+
+    After you fill in the Meta information, you can use the following tags to call the automatically rendered author information, citation information, and timeline:
+
+    - Timeline
+
+        ```
+        {% timeline %}
+        ```
+
+    - References
+
+        ```
+        {% references %}
+        ```
+
+    - Authors
+
+        ```
+        {% authors %}
+        ```
+
+4. **Automatically generated RSS subscription**
+
+    We know that RSS is important for podcasts, but configuring them manually is a boring thing, so in Chromate, you only need to fill in the configuration file, and the RSS subscription will be automatically generated.
+
+    **Important: If you want to open support for auto generating rss with podcasts, please install a plugin manually under your Hexo project folder:**
+
+    ```bash
+    npm install podcast --save
+    ```
+
+---
+
+## Thanks
+
+The theme uses the following third-party resources:
+
+- [Bulma CSS Framework](https://bulma.io)
+- [Highlight.js](https://highlightjs.org)
+- [Bulma Prefers Dark](https://github.com/jloh/bulma-prefers-dark)
+- [Shikwasa Audio Player](https://shikwasa.js.org)
+- [Podcast generator for Node.js](https://github.com/maxnowack/node-podcast)
+
+During the production of the theme, the source code of the following themes was referenced:
+
+- [Seje](https://github.com/eatradish/Seje)
+- [Hexo Theme Cards](https://github.com/ChrAlpha/hexo-theme-cards)
+
diff --git a/scripts/feed.js b/scripts/feed.js
index c64dcb7..f8b917c 100644
--- a/scripts/feed.js
+++ b/scripts/feed.js
@@ -27,8 +27,6 @@ hexo.extend.generator.register("feed", (locals) => {
         categories.push(category);
     });
 
-    console.log(categories);
-
     // Render for site config
     const feed = new podcast({
         title: config.title,