Skip to content

Latest commit

 

History

History
342 lines (265 loc) · 10.1 KB

README-en.md

File metadata and controls

342 lines (265 loc) · 10.1 KB
Raw

Hexo-Theme-Quieter

Quieter

中文 | English

Introduction

🍓A concise and fully functional Hexo theme developed on the basis of the Quiet theme.

Features

  • Concise graphic UI design
  • Bread crumbs navigation bar
  • Waterfall Stream Album
  • Sidebar
  • Scroll directory (order/collapse)
  • AES article fragment encryption
  • Day night theme switching
  • Mathematical formulas (Mathjax/Katex)
  • Comment System (Giscus/Gitalk)
  • Code Block Tool
  • Word count statistics
  • Top of article
  • Customize cover style
  • Multiple tag syntax support
  • Busuanzi statistics
  • Baidu Statistics
  • fancybox
  • Page printing layout
  • ...

Multiple plugin adaptation optimization:

Quick Start

You can directly download the empty template file from Hexo-Theme-Quieter/hexo-theme-quieter-tutorial: Quieter's sample template., or choose to install it manually:

Download the Theme

Using git installation (recommended): In the root directory of your Hexo project, run:

$ git clone https://github.com/GZ-Metal-Cell/hexo-theme-quieter.git themes/Quieter

Or using npm installation (note that using npm will not generate a theme folder in themes, but it will be created in node_modules):

npm install hexo-theme-quieter

Configuration

Modify the _config.yml file in the root directory of your Hexo project:

  • Change the theme to Quieter:
theme: Quieter
  • Enable code highlighting:
highlight:
    enable: true
    line_number: false
    auto_detect: false
    tab_replace: ""
    wrap: true
    hljs: true
prismjs:
    enable: false
    preprocess: true
    line_number: true
    tab_replace: ""
  • Set the number of posts displayed per page to 9 (optional):
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
    path: ""
    per_page: 9
    order_by: -date
# Pagination
## Set per_page to 0 to disable pagination
per_page: 9
pagination_dir: page

Install Dependencies

Install the required packages for the theme with the following commands:

npm i install hexo-renderer-less
npm i hexo-renderer-ejs

Switch the rendering engine to hexo-renderer-kramed:

npm uninstall hexo-renderer-marked
npm install hexo-renderer-kramed

Initialize Page Layout

The _config.yml file in the theme defines the types of posts displayed in the navigation bar:

# Navigation
menus_link:
    home: /  # Home page
    categories: /categories  # Categories
    tags: /tags  # Tags
    archives: /archives  # Archives/Search
    galleries: /galleries  # Galleries page
    links: /links  # Links
    about: /about  # About page

If you don't need to display a certain type of link, a simple way is to delete (or comment out) that line.

You should configure the corresponding posts in the source/ folder.

Categories Page

Create a folder and file categories/index.md under the source/ folder, and modify its content:

---
title: Categories
date: XXXX-XX-XX XX:XX:XX
type: categories
layout: categories
comments: true
aside: true
---

Tags Page

Create a folder and file tags/index.md under the source/ folder, and modify its content:

---
title: Tags
date: XXXX-XX-XX XX:XX:XX
layout: "tags"
comments: true
aside: true
---

Links Page

Create a folder and file links/index.md under the source/ folder, and modify its content (below is an example of a links page):

---
title: Links
date: XXXX-XX-XX XX:XX:XX
type: "links"
layout: "links"
comments: true
aside: true
toc: true
---

{% flink %}
- class_name: 'Category 1'
  class_desc: 'Description of Category 1'
  link_list:
    - name: 'Title'
      link: 'URL'
      avatar: 'Icon'
      descr: 'Description'
    - name: 'Title'
      link: 'URL'
      avatar: 'Icon'
      descr: 'Description'
    - name: 'Title'
      link: 'URL'
      avatar: 'Icon'
      descr: 'Description'
- class_name: 'Category 2'
  class_desc: 'Description of Category 2'
  link_list:
    - name: 'Title'
      link: 'URL'
      avatar: 'Icon'
      descr: 'Description'
    - name: 'Title'
      link: 'URL'
      avatar: 'Icon'
      descr: 'Description'
    - name: 'Title'
      link: 'URL'
      avatar: 'Icon'
      descr: 'Description'
{% endflink %}

Gallery Page

For specific configuration, see the help document: Quieter Gallery Page | Hexo-Theme-Quieter

About Page

Create a folder and file about/index.md under the source/ folder, and modify its content (below is an example of an about page):

---
title: About
date: XXXX-XX-XX XX:XX:XX
type: "about"
layout: "about"
comments: true
aside: true
---

# About

This is an example of an about page!

404

Create a file 404.md under the source/ folder, and modify its content (below is an example of a 404 page):

---
title: 404
date: XXXX-XX-XX XX:XX:XX
type: "404"
layout: "404"
comments: false
rightside: false
picture: "https://gz-metal-cell.github.io/images/404/picture.png"
---

Comment Feature

The theme supports two comment systems: Giscus and Gitalk (only one can be applied).

Giscus (Recommended)

Obtain the corresponding parameters from Giscus, then configure them in the Quieter/_config.yml file in the theme folder:

# Giscus
giscus:
    enable: true  # Only takes effect if true
    repo: 
    repo_id: 
    category: Announcements
    category_id: 
    mapping: title
    strict: 1
    reactions-enabled: 1
    emit_metadata: 0
    input_position: bottom
    # loading: lazy

Gitalk

Obtain the corresponding parameters from gitalk/gitalk: Gitalk is a modern comment component based on Github Issue and Preact., then configure them in the Quieter/_config.yml file in the theme folder:

# gitalk
gitalk:
    enable: false
    clientID: # (Replace with) GitHub Application Client ID.
    clientSecret: # (Replace with) GitHub Application Client Secret.
    repo: # (Replace with) GitHub repository.
    owner: # (Replace with) GitHub repository owner, which can be an individual or an organization.
    admin: # (Replace with) GitHub repository owners and collaborators (users with write access to this repository).

More Features

You can get more help and configuration documentation from Homepage | Hexo-Theme-Quieter.

LICENSE

MIT