MEOW
ArchivesCategoriesTagsAbout
Search
ArchivesCategoriesTagsAbout
MEOW
Preview of Meow: a cute and bright theme for Hexo blog. It optimizes the adaptability of original novel and fanfiction.

「Meow」Theme Guide

HexoTheme Meow
English教程Tutorial
Copyright: BY-NC-ND 4.0
About 2979 words
Hits:

This guide introduces detailed methods of installation and configuration for Hexo theme Meow, including downloading the theme, installing dependencies, modifying core configurations, and introducing the usage of some special configurations, hope it will be helpful to you.

Click the TOC button on the floating toolbar in the bottom right corner to turn on/off title navigation, making it convenient to access the content you need to check directly.


Installation

Get The Theme

Execute the following command in the root directory of the blog.

1
git clone -b master https://github.com/chanwj/hexo-theme-meow.git themes/meow

Apply The Theme

Modify the _config. yml file in the root directory. Set theme variable to meow.

1
theme: meow

Install Dependency

Meow uses Pug for rendering. Please install the Pug renderer in advance.

1
npm install hexo-renderer-pug --save


Theme Configuration

Please change theme configurations in _config.yml file under the theme directory.

The theme configuration file contains comments in both Chinese and English, which make it simple and easy to use. For some special configurations, please refer to the following sections.

(Tip: Everytime before you update the theme, it is recommended to back up the theme configuration file in advance to avoid losing customized content.)


Special Pages

Meow has created layout templates for those three pages: Categories, Tags and About. To display these pages, please execute the following commands.

1
2
3
hexo new page categories
hexo new page tags
hexo new page about

Next, find these pages’s folder in the source folder under the root directory. Open the index.md inside and add layout parameter to the Front-matter at the top. Change the parameter value correctly.

1
layout: # categories | tags | about

TOC

Meow supports generating tables of contents for articles. You can enable this function with the following configuration.

1
2
toc:
  enable: true

When toc function is enabled, Meow will generate toc for all articles by default. If you don’t want to generate toc for some articles, you can turn off this function separately in the Front-matter at the top of the article file.

1
toc: false

Contact

The contact module in “About” page is configured by contact_info. The list below shows the default options which can display the website icon automatically. If you don’t want to display some of these items, just leave the value blank.

  • Email
  • Github
  • Twitter
  • Facebook
  • Instagram
  • Tiktok
  • Bilibili
  • Weibo
  • Mastodon
  • Wechat

Supplementary explanation:

  • If you want to add other contact item, please format in name: url. Note that custom contact item will be display with paw icon uniformity.
  • Email: Unlike the other options, the parameter value should be email address.
  • Wechat: Unlike the other options, the parameter value should be account name.

Background

Meow supports to custimize site background, the configurations are listed below. Feel free to use image, color or gradient style as background.

1
2
3
4
5
background:
  type: 2
  color: 'MistyRose'
  image_url: img/Spiritfarer-1.png
  gradient: linear-gradient(to bottom right,#ffa751,#ffe259)
Configuration Name Description
type Background Type
  • 1: Image
  • 2: Color (default)
  • 3: Gradient style
color Background Color Default: bright yellow
  • css color name, e.g. 'MistyRose'
  • color code, e.g. '#FFE4E1'
P.S. Keep the value in ' '
image_url Background Image Path Example: img/Spiritfarer-1.png
P.S. Do not add / in front of the path
gradient Gradient Statement Use CSS syntax, e.g. linear-gradient(to bottom right,#ffa751,#ffe259)

Fonts

Meow supports to customize fonts, configured by font. Only importing fonts links (e.g. Google Fonts) is supported for now.

Please add fonts links in array and format in - url.

1
2
3
4
url_list:
  - 'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400..700&display=swap'
  - 'https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap'
  - 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300..700&display=swap'

After configuring fonts links, it is necessary to configure the fonts name you want to use. Those fonts that rank higher will be prioritized. Pay attention, please keep the content in double quotation marks and seperate each font with comma if you want to use various fonts. It is recommended to configure some default fonts except for those imported fonts.

1
font_family: "'Noto Sans SC', 'Noto Serif', 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', Sans-serif, Serif"

Darkmode

Meow could switch to darkmode through floating toolbar (click gear icon to expand toolbar and then click the darkmode icon).

This function depends on nickdeny/darkmode.js. On this basis, theme author has made some modifications for theme adaptation. Also, Meow has added some additional features for darkmode, e.g. change the theme of comment module when switching mode, dynamic switching style.

If you want to activate darkmode function, please enable the configuration in _config.yml under the theme directory.

1
2
3
4
5
6
7
# darkmode
darkmode:
  enable: true
  start_at: 24:00 # time to start dark theme
  end_at: 06:00 # time to end dark theme
  check_system_scheme: false # check if system indicates light or dark color themes
  save_on_toggle: true # save current mode in local storage

Search function depends on plugin hexo-generator-search. Therefore, if you need to use the search function, please install this dependency first.

1
npm install hexo-generator-search --save

Step 2: Add the following configuration to the _config. yml file in the root directory. (You can check the specific meaning of this configuration in hexo-generator-search‘s page.

1
2
3
4
5
6
# Search function
search:
  path: search.xml
  field: post
  content: true
  template: ./search.xml

Step 3: Find the hexo-generator-search folder of the node_modules folder in the root directory. Then enter the templates folder and copy search.xml(template file which can help build the search content XML) to the root directory of the blog.

Step 4: Enable the configuration of search function in _config.yml under the theme directory.

1
2
search:
  enable: true

Set it to false to disable the search function, including not displaying the search entry, not importing search related JavaScript, and not building search content XML.


Comment

Comment function depends on giscus. giscus is a comments system powered by GitHub Discussions, let maintainers and visitors leave comments and reactions on website via GitHub!

If you want to activate comment function, please enable the configuration of comment function in _config.yml under the theme directory.

1
2
3
comment:
  post_enable: true # add comment module at posts
  about_enable: true # add comment module at about page

There are many other configurations under comment item, you can get their specific meanings and values through giscus official website.

Pay attention, you need to do something before using giscus, including setting repository to public, installing giscus app, turning on Discussions feature of repository. Read more in the guide of giscus official website.

After activating post comment function, Meow will add comment module for all the posts by deafault. If you want to hide comment module for some posts, you can turn off this configuration separately at the Front-matter of these posts.

1
comments: false

Here are an example post hided comment module separately, click here to check.



Language Configuration

Meow provides two languages: Chinese and English. If you want to change site language, configure it in _config.yml under the root directory of the site.

1
language: en # Chinese: zh-CN | English: en

In addition, for different articles or pages, language setting can be changed separately in Front-matter.

1
lang: en

If you need to customize the display values of various items on the site, you can open language files in the languages folder under the theme directory, and then modify the parameters inside.

Language files also have comments, which introduce every configuration clearly.


“About” page

It should be noted that Meow has created a layout template for “About” page. For the convenience of internationalization(i18n), many display values in “About” page are integrated into language files for configuration.

Click here to check the English Version of “About” page: About



Fiction Scaffold

Meow optimizes the creation of literary works, allowing every author to use scaffold to publish original works easily, including serial novels, fanfictions, etc.

Check the article style using fiction scaffold here.


Apply Scaffold

Copy fiction.md(the fiction scaffold file) in theme directory into scaffolds folder under the root directory. Afterwards you can generate new literary work file using fiction scaffold with the following command.

1
hexo new fiction "article's title"

Scaffold Configuration

fiction.md has its own Front-matter parameters, each of them has comment to explain their usage.

Please note that layout: post and type: fiction are fixed configurations, do NOT change them.

You can change the display values of these parameters through the fiction module in language files.


Meta

The meta module of article can be displayed by this configuration: meta_show: true.

Detailed information should be configured in meta_info. The following options are supported by fiction scaffold for now.

  • type

The type of article, for example, Original Work, Fanfiton, etc.

  • fandom

If the type of article is ‘Fanction’, it’s generally necessary to indicate the fandom. Stay blank if you don’t want to show fandom information.

  • relationship

Relationships involved in the article, usually used to indicate romantic relationships. Important families and friendships can also be filled in. Leave it blank if you don’t want to show relationship information.

  • character

Major roles appear in the article. If you don’t want to show characters information, leave it blank.

  • rating

The rating of the article. You can only choose the following options:

Rating Description Style
General For general audiences, no warning None
Teen For teen and up audiences Bold
Mature For adults, contains minor/non detailed mature content Bold & Red
Explicit For adults, contains detailed descriptions of adult content, such as violence and pornography Bold & Red

If you don’t want to show rating information, leave it blank.

  • warning

Warning information, which audiences should be aware of before reading the article. It can prevent audiences from seeing something they don’t like. For example, the death of the main characters, bloody and violent descriptions, forced love, etc.

Warning will be displayed prominently in bold and red font. If you don’t need to display warning information or don’t want spoilers, you can leave this item blank.


Status

status is used to mark whether this article are completed and display tip at the end. There are two options to be choosen:

Status Description
Y Already completed (v1.0.0: complete)
N Still in progress / To be continued (v1.0.0: inProgress)

(P.S. Compatible with status options of v1.0.0. Therefore, those articles published previously do not need to be modified.)

If you don’t want to show status, leave it blank.


Summary

summary is used to write brief introduction for the article, supporting Markdown syntax. If summary is complicated, please keep the content in quotation marks. Leave it blank if you don’t want to show summary.

If the article has no excerpt, Meow will automatically detect whether the article has summary. If summary exists, summary content will be displayed on homepage and archives page as excerpt.


Notes

Notes display before/after the article, write the contents in notes_before and notes_after. You can write some additional introductions and explanations for the article, express your ideas or say something to your audiences.

Markdown syntax available. If notes is complicated, please keep the content in quotation marks. Leave it blank if you don’t want to show notes.



Other Features

Quote

Meow provides various quote styles, you can use them with specific tags. The detail methods are listed below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
> With `>` supported by Markdown, you can write quote in default style.

{% quote light %}
Light
{% endquote %}

{% quote pink %}
Pink
{% endquote %}

{% quote red %}
Red
{% endquote %}

{% quote blue %}
Blue
{% endquote %}

{% quote green %}
Green
{% endquote %}

{% quote %}
Default
{% endquote %}

With > supported by Markdown, you can write quote in default style.

Light
Pink
Red
Blue
Green
Default

Meow support to link external page, site post or file to be downloaded with beautiful and attractive card. You can use link card with specific tag.

1
2
3
4
5
6
7
{% linkcard %}
- type:
  title:
  url:
  icon:
  desc:
{% endlinkcard %}
Parameters Description
type The type of link.
  • page: external page
  • post: post of your site
  • file: file to be downloaded (only for resources of your site)
title The title of link.
url The target of link. For resources of your site, use relative path.
icon The path of link’s favicon, display paw by default.
desc The description of link, this content will scroll automatically when the mouse hovers over it.

Here is an example of link card, click to see the result.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% linkcard %}
- type: page
  title: Hexo
  url: https://hexo.io/zh-cn/
  icon: https://hexo.io/icon/favicon-96x96.png
  desc: Hexo官方网站
- type: page
  title: hexo-theme-meow
  url: https://github.com/chanwj/hexo-theme-meow
  icon: https://github.githubassets.com/favicons/favicon.svg
  desc: Meow的Github仓库
- type: page
  title: 哥斯拉VS离子龙
  url: https://www.bilibili.com/video/BV1va4y117nP/
  icon: https://img1.baidu.com/it/u=2302502662,2858494125&fm=253&fmt=auto&app=138&f=JPEG
  desc: 来自美剧「帝王计划：怪兽遗产」
- type: post
  title: Meow
  url: /
  icon:
  desc: Meow主题展示站
- type: file
  title: 示例文件 Example File
  url: /files/example.zip
  icon:
  desc: 仅做展示用，请勿下载。DO NOT DOWNLOAD.
{% endlinkcard %}

Selectable

Meow supports configuring whether users can select text content from the website directly. True: they can. False: they can not.

1
selectable: true

P.S. This feature is only a gentleman’s protocol, it can’t prevent others from accessing text content through crawlers.


Text Indent

If you want to indent the first line of paragraph in posts by 2em, please enable the configuration in _config.yml under the theme directory.

1
2
text_indent:
  enable: true

P.S. After activating text indent function, the module in fiction scaffold (Summary & Notes) will be indented too.

This is a global configuration. If you want to enable or disable text indent for some posts, you can turn off this configuration separately at the Front-matter of these posts.

1
indent: true # true | false

This site has disabled text indent function, but enabled it for this post. You can see the text indent style there.


Encryption

Encryption function depends on plugin hexo-blog-encrypt. Therefore, if you need to use the encryption function, please install this dependency first.

1
npm install hexo-blog-encrypt --save

With hexo-blog-encrypt, you can encrypt post separately or encrypt all the posts belong to some tags, you can also change the theme of encryption element. Read more in hexo-blog-encrypt docs to get the configuration methods.

Meow has optimized and adapted for encryption plugin. TOC of encrypted articles will be hidden synchronously and will be visble once it is decrypted.

Here are some examples: Encrypted Post，Encrypted Fiction. The password is meow.


404 Page

If you want to have 404 page in theme style, Meow already provided it. Please follow these steps to make it work.

Firstly, create 404 page.

1
hexo new page 404

Then open index.md under source/404, modify the Front-matter information at the top, set layout to 404 and add permalink item.

YAML
1
2
3
4
title: 404 Not Found # customize 404 page title
date: 2024-04-01 20:01:10 # datetime will be generated automatically
layout: 404 # set 404 to make page style active
permalink: /404 # indicate the permanent link path, it will make 404.html to be generated at the root of the site eventually

Tips: The tips of 404 page can be modified in language configuration file.


Music Player

Meow adds support for APlayer, see more in the example.

If you want to use this music player, please enable the configuration in the Front-matter of page. Tips: you can also import music player in ‘About’ page.

1
music: true

Then add these codes at wherever needs music player: 

1
2
3
4
5
6
7
8
9
10
11
12
<div id="aplayer"></div>
<script>
  const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
      name: 'name',
      artist: 'artist',
      url: 'url.mp3',
      cover: 'cover.jpg'
    }]
  });
</script>

Please refer to the instructions of APlayer Docs for custom configuration of APlayer options.

P.S. Since APlayer conflicts with TOC function of Hexo (you can search relative informations at the Issues module of APlayer’s Github page), which will make Chinese title can not be navigated, Meow has already done some optimization to fix this problem.



Style Preview

This site is created to display theme Meow. You can check the styles of different pages of this theme, and also check the actual effects of various functions here.

Besides, Meow has responsive design for small screen devices. You can try to use mobile phone to view the changes of style, such as the top menu (which will become a dropdown menu toggled by a button), toc of articles (which will become full page overlay on the left), and so on.

Check various styles of article here.

If you like this article, welcome to pay me a coffee, thanks💗

WechatWechat
AlipayAlipay
Search
Matching results:
No matching articles were found.