diff options
| -rw-r--r-- | _config.yml | 70 | ||||
| -rw-r--r-- | figures/card.png | bin | 0 -> 992144 bytes | |||
| -rw-r--r-- | figures/header.png | bin | 0 -> 137403 bytes | |||
| -rw-r--r-- | languages/default.yml | 2 | ||||
| -rw-r--r-- | readme-zh.md | 125 | ||||
| -rw-r--r-- | readme.md | 124 | ||||
| -rw-r--r-- | scripts/feed.js | 2 |
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:privet@utc3.live', '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 Binary files differnew file mode 100644 index 0000000..44074b9 --- /dev/null +++ b/figures/card.png diff --git a/figures/header.png b/figures/header.png Binary files differnew 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 主题 + + + +Chromate 是一款专为 **Podcaster** 打造的 Hexo 主题。 + +它具有以下特性: + +- **简单轻量**: 没有过多的配置项与第三方库引用，让你的站点能够轻松的配置并在主流设备上加载。 +- **响应式**: 响应式布局使得 Chromate 在移动端也可以正确美观的显示。 +- **对播客的完整支持**: 不需要繁杂的配置项与插件安装，就可以轻松的发布一集播客（下面有详细说明）。 +- **黑暗模式支持**: 不管白天黑夜，你的站点都能够随着操作系统的主题色变化。 + +--- + +## 使用 + + + +在开始使用之前，请查看示例配置文件 `_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) + @@ -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. + + +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 + + + +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, |
