Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/d-sketon/hexo-theme-reimu

一款博丽灵梦风格的Hexo主题 | A Hakurei Reimu style Hexo theme. ❤Touhou❤
https://github.com/d-sketon/hexo-theme-reimu

blog giscus gitalk hexo hexo-theme reimu touhou twikoo valine waline

Last synced: 27 days ago
JSON representation

一款博丽灵梦风格的Hexo主题 | A Hakurei Reimu style Hexo theme. ❤Touhou❤

Awesome Lists containing this project

README 

        




  
hexo-theme-reimu


  NPM License

  NPM Version

  GitHub Repo stars

  wakatime

  


  ❤ Hakurei Reimu ❤

  



[Demo](https://d-sketon.github.io)



[简体中文](https://github.com/D-Sketon/hexo-theme-reimu/blob/main/README.md) | English






---



A Hakurei Reimu style Hexo theme.  

A combination of [landscape](https://github.com/hexojs/hexo-theme-landscape)、[Tangyuxian](https://github.com/tangyuxian/hexo-theme-tangyuxian) and [Shoka](https://github.com/amehime/hexo-theme-shoka) themes.



See [astro-theme-reimu](https://github.com/D-Sketon/astro-theme-reimu) for the [Astro](https://astro.build) theme.



**ISSUE and PR Welcome!**



## Features



- All the regular features of the blog

- Compatible with Hexo v6+

- Responsive Layout

- Code Highlighting, Code Pasting

- Supports KaTeX for displaying math formulas

- Mermaid for flowcharts

- Algolia / hexo-generator-search search support

- valine / waline / twikoo / gitalk / giscus comment system

- valine / waline article reading statistics

- Busuanzi Visitor Statistics

- RSS support

- Both iconfont and fontawesome are supported.

- Night mode

- Lazy image loading

- Load Animation

- TOC

- Back to top

- Mouse firework animation

- pjax

- ServiceWorker

- live2d

- reimu Mouse Pointer

- Internal tag plugin for providing internal/external/friendly link cards

- Support the bottom of the article copyright statement

- Support for configuring custom CDN sources



## Structure



```txt

.

├── _screenshot screenshot

├── _example    example source folder structure

├── _config.yml theme configuration

├── languages

├── layout

├── scripts

└── source

```



## Installation



> The pure beginner can use [reimu-template](https://github.com/D-Sketon/reimu-template) directly. It comes with hexo, hexo-theme-reimu and other packages pre-installed, so just clone the repository - install dependencies - change the configuration and you've got a basic blog!



Using npm



```bash

npm install hexo-theme-reimu --save

```



or clone this repository to the `/themes` folder and rename it to `reimu`



```bash

git clone https://github.com/D-Sketon/hexo-theme-reimu.git

```



and change the theme in `_config.yml`



```yaml

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: reimu

```



## Uses



Basic structure



### Basic structure



For correct display, please refer to `_example` and create separate `_data`, `about` and `friend` folders in `source`



#### \_data



- The `avatar` folder stores the author's avatar, named `avatar.webp` by default, and can be configured in the inner `_config.yml` as follows



```yaml

avatar: "avatar.webp"

```



- The `covers` folder stores the article covers

- The `covers.yml` file stores the article cover urls



#### about



`index.md` as the **about** page



#### friend



`index.md` as the **friends** page, fill in `_data.yml` with friend information to display the corresponding friend card on the page



Cover, banner and favicon



### Cover, banner and favicon



#### Cover



The logic for displaying the cover is as follows



- If the article's Front matter contains the url for cover, the article's header image and home page thumbnails display that url



```yaml

---

title: Hello World

cover: https://example.com

---

```



- If the article's Front matter contains cover as `false`, the article doesn't show the header image (it's still a random image on the front page)



```yaml

---

title: Hello World

cover: false

---

```



- If the article's Front matter contains cover as `rgb(xxx,xxx,xxx)`, the article's header image is the corresponding gradient solid color (still a random image on the front page)



```yaml

---

title: Hello World

cover: rgb(255,117,117)

---

```



- Otherwise, look for the `covers` folder and `covers.yml` and pick a random image from it

- If none of these files exist, display the banner



#### banner



The banner is stored in `themes/reimu/source/images/banner.webp` and can be modified in the inner `_config.yml`



```yaml

banner: "/images/banner.webp"

```



#### favicon



The favicon is stored in `themes/reimu/source/images/favicon.ico`，and can be modified in the inner `_config.yml`



```yaml

favicon: "/images/favicon.ico"

```



#### topped



Add `sticky: true` to the article's Front-matter



```yaml

---

title: Hello World

sticky: true

---

```



Code highlighting



### Code highlighting



To ensure that the code blocks are displayed correctly, please ensure that the outer `_config.yml` is configured as follows

(<7.0.0)



```yaml

highlight:

  enable: true

  wrap: true

  hljs: false

prismjs:

  enable: false

```



(>=7.0.0)



```yaml

syntax_highlighter: highlight.js

highlight:

  wrap: true

  hljs: false

```



The code block also provides a code paste function. Click the copy button in the upper right corner of the code block to copy the code. In the inner `_config.yml`, you can configure the copy function.   

`success` is the prompt when the copy is successful, and `fail` is the prompt when the copy fails. In addition, you can configure the copyright statement. When the number of characters copied is greater than `count`, the content copied will be followed by the `content` copyright.



```yaml

clipboard:

  success: 复制成功(*^▽^*)

  fail: 复制失败 (ﾟ⊿ﾟ)ﾂ

  copyright:

    enable: false

    count: 50 # The number of characters when the copyright is displayed

    content: 本文版权：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

```



Site comments



### Site comments



> In-site comments can be controlled independently of each post using `comments` in Front matter.  

> Comments are not shown when `comments` is `false`, and are shown or not shown when `true` or not filled in, depending on the `_config_yml` configuration.



If based on [Valine](https://valine.js.org/)  

Please refer to its official documentation to complete the configuration of `LeanCloud` and change `valine.enable` to `true` in the inner `_config_yml` and fill in your own `appId` and `appKey`



```yaml

valine:

  enable: true

  appId: "your appId"

  appKey: "your appKey"

```



If based on [Waline](https://waline.js.org/)  

Please refer to its [official documentation](https://waline.js.org/guide/get-started/) to complete the `LeanCloud` configuration and change `waline.enable` to `true` in the inner `_config_yml`, and fill in your own `serverURL`



```yaml

waline:

  enable: true

  serverURL: "your server url"

  lang: zh-CN

  locale: {} # https://waline.js.org/guide/features/i18n.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E8%A8%80

  emoji:

    - https://unpkg.com/@waline/[email protected]/weibo

    - https://unpkg.com/@waline/[email protected]/alus

    - https://unpkg.com/@waline/[email protected]/bilibili

    - https://unpkg.com/@waline/[email protected]/qq

    - https://unpkg.com/@waline/[email protected]/tieba

    - https://unpkg.com/@waline/[email protected]/tw-emoji

  meta:

    - nick

    - mail

    - link

  requiredMeta:

    - nick

    - mail

  wordLimit: 0

  pageSize: 10

  pageview: true

```



If based on [twikoo](https://twikoo.js.org)  

Please refer to its [official documentation](https://twikoo.js.org/quick-start.html) to complete the Tencent Cloud or Vercel deployment, and change `twikoo.enable` to `true` in the inner `_config_yml`, and fill in your own `envId`.



```yml

twikoo:

  enable: true

  envId: # Tencent cloud environment fill envId; Vercel environment fill address (https://xxx.vercel.app)

  region:

```



If based on [giscus](https://giscus.app/zh-CN), please refer to the documentation to complete the configuration of the repository and change `giscus.enable` to `true` in the inner `_config_yml`, and fill in the corresponding data.



```yml

giscus:

  enable: true

  repo: "your repo"

  repoId: "your repoId"

  category: "your category"

  categoryId: "your categoryId"

  mapping: mapping

  strict: 0

  reactionsEnabled: 1

  emitMetadata: 0

  inputPosition: bottom

  commentTheme: preferred_color_scheme

  lang: zh-CN

```



If based on [gitalk](https://gitalk.github.io/)  

Please refer to its [official documentation](https://github.com/gitalk/gitalk?tab=readme-ov-file#usage) to complete the repository configuration, and change `gitalk.enable` to `true` in the inner `_config_yml` and fill in the corresponding data.



```yml

gitalk:

  enable: true

  clientID: "your application client ID"

  clientSecret: "your application client secret"

  repo: "your repo"

  owner: "repo owner"

  admin: "repo owner and collaborators"

  md5: false # Whether to use md5 to encrypt the path

```



Site search



### Site search



If your site search is based on [Algolia](https://www.algolia.com/), please install [hexo-algoliasearch](https://github.com/LouisBarranqueiro/hexo-algoliasearch)



```bash

npm install hexo-algoliasearch --save

```



and refer to its [README](https://github.com/LouisBarranqueiro/hexo-algoliasearch#readme) to complete the configuration of the `Algolia` account, and add the following configuration to the outer `_config.yml`



```yml

algolia:

  appId: "your applicationID"

  apiKey: "your apiKey"

  adminApiKey: "your adminApiKey"

  indexName: "your indexName"

  chunkSize: 5000

  fields:

    - content:strip:truncate,0,500

    - excerpt:strip

    - gallery

    - permalink

    - photos

    - slug

    - tags

    - title

```



Change `algolia_search.enable` to `true` in the inner `_config_yml`



```yaml

algolia_search:

  enable: true

```



Note: The search link is a permanent link, so please ensure that the `url` in the outer `_config.yml` is filled in correctly



If your site search is based on [hexo-generator-search](https://github.com/wzpan/hexo-generator-search), please install [hexo-generator-search](https://github.com/wzpan/hexo-generator-search)



And refer to its [README](https://github.com/wzpan/hexo-generator-search#readme) to add the following configuration to the outer `_config.yml`



```yml

search:

  path: search.json # The filename must be search.json

  field: post

  content: true

```



In the inner `_config_yml` change `generator_search.enable` to `true



```yaml

generator_search:

  enable: true

```



Mathematical formulas



### Mathematical formulas



Math formulas are based on [Katex](https://github.com/KaTeX/KaTeX), please install [hexo-renderer-markdown-it-plus](https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus)



```bash

npm uninstall hexo-renderer-marked --save

npm install hexo-renderer-markdown-it-plus --save

```



Change `math.enable` to `true` in the inner `_config_yml`



```yaml

math:

  enable: true

```



Mermaid



### Mermaid



Please install [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)



```bash

npm install hexo-filter-mermaid-diagrams --save

```



Change `mermaid.enable` to `true` in the inner `_config_yml`



```yaml

mermaid:

  enable: true

```



and add ``mermaid: true`` to the front-matter of articles that need to use mermaid.



```yaml

---

title: Hello World

mermaid: true

---

```



RSS



### RSS



Please install [hexo-generator-feed](https://github.com/hexojs/hexo-generator-feed)



```bash

npm install hexo-generator-feed --save

```



and refer to its [README](https://github.com/hexojs/hexo-generator-feed#readme) to complete the configuration of the `feed` in the outer `_config.yml`  

Fill in the inner `_config.yml` with the generated `xml`



```yaml

rss: atom.xml

```



Icon



### Icon



Icon defaults to the iconfont provided with this project (v0.1.3+)



```yml

icon_font: 4552607_y484ez0be3f

```



If you want to continue using fontawesome icons, set `icon_font` to `false`, which will use the corresponding fontawesome in `vendor`.



```yml

fontawesome:

  high_priority:

    - webcache|@fortawesome/[email protected]/css/regular.min.css

    - webcache|@fortawesome/[email protected]/css/solid.min.css

  low_priority:

    - webcache|@fortawesome/[email protected]/css/brands.min.css

    - webcache|@fortawesome/[email protected]/css/v5-font-face.min.css

    - webcache|@fortawesome/[email protected]/css/v4-font-face.min.css

```



Advanced features



### Advanced features



#### firework



Enabled by default



```yaml

firework:

  enable: true

```



See [mouse-firework](https://github.com/D-Sketon/mouse-firework) for more information



#### pjax



Disabled by default



```yaml

pjax:

  enable: false

```



> pjax was introduced in v0.0.10 for those who need to add music players and other users who need SPA. However, it is still experimental and may cause bugs such as **scripts not executing**, **scripts repeating**, **pages rendering mess**, etc. Please consider it carefully!



#### ServiceWorker



Disabled by default



```yaml

service_worker:

  enable: false

```



#### live2d



Disabled by default



```yaml

live2d:

  enable: false

```



#### reimu cursor



Enabled by default



```yml

reimu_cursor: true

```



#### Responsive Banner Image (v0.2.0+)



Disabled by default, enable it on and providing the corresponding size of the image and media query can improve the LCP on mobile to some extent

```yml

banner_srcset:

enable: false

srcset:

  - src: "/images/banner-600w.webp"

    media: "(max-width: 479px)"

  - src: "/images/banner-800w.webp"

    media: "(max-width: 799px)"

  - src: "/images/banner.webp"

    media: "(min-width: 800px)"

```



#### Article copyright notice (v0.2.0+)



Disabled by default

``` yml

article_copyright: 

enable: false # Is the copyright card displayed?

content: # true | false Does the copyright card show the author?

  author: # true | false Do copyright cards show author?

  link: # true | false Do you want to show links?

  title: # true | false Do you show the title of the copyrighted card?

  date: # true | false The date the copyrighted card was created?

  updated: # true | false Copyright card show updated date?

  license: # true | false Copyright Card Showcase Agreement?

```



#### quicklink (v0.2.3+)



Enabled by default



```yaml

quicklink:

  enable: true

  timeout: 3000 # Timeout for quicklink

  priority: true # Whether to prioritize loading the page

  ignores: [] # Ignore the specified link, only support string

```



#### outdate warning (v0.2.4+)



Disabled by default



```yaml

outdate:

  enable: false

  daysAgo: 180 # The number of days after which the article is considered outdated

  message: 本文最后更新于 {time}，请注意文中内容可能已经发生变化。

```



Vendor



### Vendor



v0.1.0 is a major refactoring of `vendor`, the `vendor` path is now composed of `:cdn|:package@:version/:file`, and `:cdn` can be configured in `vendor` itself. It currently comes with the following CDN sources:



```yaml

cdn_jsdelivr_gh: https://cdn.jsdelivr.net/gh/ # github acceleration only

cdn_jsdelivr_npm: https://cdn.jsdelivr.net/npm/ # npm acceleration only

fastly_jsdelivr_gh: https://fastly.jsdelivr.net/gh/ # github acceleration only

fastly_jsdelivr_npm: https://fastly.jsdelivr.net/npm/ # npm acceleration only

unpkg: https://unpkg.com/ # npm acceleration only

webcache: https://npm.webcache.cn/ # npm acceleration only

```



Users can switch between CDN sources according to network conditions.



## Contributors



[![](https://contributors-img.web.app/image?repo=D-Sketon/hexo-theme-reimu)](https://github.com/D-Sketon/hexo-theme-reimu/graphs/contributors)



## License



[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FD-Sketon%2Fhexo-theme-reimu.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FD-Sketon%2Fhexo-theme-reimu?ref=badge_large)