Verson: 0.0.1

Foreword

This blog post mainly introduces the blog theme Chic designed by Zijian Liu.

Chic

Features

  1. An elegant, powerful, easy-to-read Hexo theme.
  2. Appropriate blank blocks, elegant but not simple.
  3. Light/Dark theme, just one click.
  4. Abundant highlight mode.
  5. Elaborately selected fonts, best reading experience. “Microsoft Jhenghei” especially recommended.
  6. Auto fit Mobile and Screen responsively.
  7. Support MathJax, support formula written in LaTeX.

Installation

1
2
cd your-blog/themes
git clone https://github.com/gmy-acoustics/hexo-theme-Chic.git Chic

Configuration

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
# Header
navname: Chivalric Menyang Gong

# navigatior items
nav:
  Posts: /archives
  Categories: /category
  Tags: /tag
  About: /about

# favicon
favicon: /favicon.ico

# Profile
nickname: Chivalric Menyang Gong

### this variable is MarkDown form.
description: 【Ph.D Candidate in Acoustics, Designer, Writer, Photographer】<br>世界上只有一种英雄主义,就是看清生活的真相之后依然热爱生活。<br>There is only one heroism in the world - to see the world as it is and to love it.
avatar: /image/avatar.jpeg

# main menu navigation
## links key words should not be changed.
## Complete url after key words.
## Unused key can be commented out.
links:
  Blog: /archives
  #  Category:
  #  Tags:
  #  Link:
  #  Resume:
  #  Publish:
  #  Trophy:
  #  Gallary:
  #  RSS:
  #  AliPay:
  ZhiHu: https://www.zhihu.com/people/menyanggong
  # LinkedIn:
  # FaceBook:
  Twitter: https://twitter.com/GongMenyang
  # Skype:
  # CodeSandBox:
  # CodePen:
  # Sketch:
  # Gitlab:
  # Dribbble:
  Instagram: https://www.instagram.com/gmy_acoustics/
  # Reddit:
  # YouTube:
  # QQ:
  # Weibo:
  # WeChat:
  Github: https://github.com/gmy-acoustics

# how links show: you have 2 choice--text or icon.
links_text_enable: false
links_icon_enable: true

# Post page
## Post_meta
post_meta_enable: true

post_author_enable: true
post_date_enable: true
post_category_enable: true
## Post copyright
post_copyright_enable: true

post_copyright_author_enable: true
post_copyright_permalink_enable: true
post_copyright_license_enable: true
post_copyright_license_text: Copyright (c) 2023 <a href="https://choosealicense.com/licenses/gpl-2.0/">GNU General Public License v2.0</a>
post_copyright_slogan_enable: true
post_copyright_slogan_text: Focus on Self-improvement
## toc
post_toc_enable: true

# Page
page_title_enable: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMMM D, YYYY
time_format: H:mm:ss

# stylesheets loaded in the <head>
stylesheets:
  - /css/style.css

# scripts loaded in the end of the body
scripts:
  - /js/script.js
  - /js/tocbot.min.js
    # tscanlin/tocbot: Build a table of contents from headings in an HTML document.
    # https://github.com/tscanlin/tocbot


# plugin functions
## Mathjax: Math Formula Support
## https://www.mathjax.org
mathjax:
  enable: true
  import: demand # global or demand
  ## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
  ## demand: Recommend option,if your post need fomula, you can declare 'mathjax: true' in Front-matter

Add Tag and Category Page

There is no tag or category page in the site as it initializes. If you need it, please follow the steps below.

  1. Execute commands
    1
    2
    3
    hexo new page tag
    hexo new page category
    hexo new page about
  2. Enter the dictionary
    1
    cd source/tag
  3. Add “layout” key
    1
    2
    3
    4
    5
    // source\tag\index.md
    ---
    title: Tag
    layout: Tag
    ---
  4. Do so with the category page with Category as title and Category as layout.

MathJax - Render LaTeX formula

Related config file Chic/_config.yml:

1
2
3
4
5
6
7
8
# plugin functions
## Mathjax: Math Formula Support
## https://www.mathjax.org
mathjax:
  enable: true
  import: global # global or demand
  ## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
  ## demand: if your post need fomula, you can declare 'mathjax: true' in Front-matter

mathjax uses the keywords below:

  • enable: value true enables mathjax (default value true); value false disables it.
  • import: this key sets mathjax load method, options can be global or demand.
  1. global: global import, all pages will load script. It’s convenient, but it may cause some MarkDown grammars to be parsed wrong. For example, consecutive $$ will be rendered as a formula; Besides, global import will waste performance in pages without any formula.
  2. demand: [Recommended] Import mathjax when you need it. After you set this value, if you need to use formula, just declare it in the post Front-matter. Here is an example:
    1
    2
    3
    4
    5
    6
    ---
    title: MathJax Test
    date: 2023-01-01 08:00:00
    tags:
    mathjax: true # add this statement, MathJax will be enabled in this post.
    ---
    LaTeX grammars will not be illustrated in this doc. In Chic theme, single $ rounded statement is regarded as inline formula like $f(x)=ax+b$; double $ rounded statement is regarded as block formula like $$f(x)=ax+b$$.

Image-title

You have 2 methods to import images in your posts:

  1. Image import with GFM (without image-title) 
    1
    ![pic](picUrl)
  2. hexo built-in image tag (with image-title) 
    1
    {% img [class names] /path/to/image [width] [height] '"alt text" "title text"' %}
    So if you want to import as fast as possible, you can use GFM, and this way will also get the best adaptability.
    If you want to display image-title, you should use hexo built-in image tag.
  • "alt text" is used when the image doesn’t load or something went wrong in that image (404).
  • "title text" will be displayed below the image.

Customize

  1. Highlight Style: Enter hexo-theme-Chic\themes\Chic\source\css\style.styl change stylesheet with key word _highlight in link in _highlight dictionary.
  2. Customize stylesheets in this stylus file:hexo-theme-Chic\themes\Chic\source\css\custom.styl.
  3. Customize javascripts in the dictionary:hexo-theme-Chic\themes\Chic\source\js. Then add declaration in _config.yml using the keyword ‘script’.

F&Q

  1. I deployed my site on a second-level url (such as username.github.io/blog), and my css, avatar and other sources are missing (404 error)
    Answer: You need to change some URLs in root config keyword. For instance:

    1
    2
    3
    4
    5
    6
    7
    8
    # (blog/_config.yml)

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://siricee.github.io/hexo-theme-Chic/  # this is your deploy url.
    root: /hexo-theme-Chic/  # this is your root folder url.
    permalink: :year/:month/:day/:title/
    permalink_defaults:

  2. How to set the dark theme as default for whole site automatically?
    Answer: You need to change some code in themes\Chic\source\js\script.js, function doucument.ready as shown below.

    1
    2
    3
    4
    5
    6
    document.ready(
     function () {
         // ...Omit part of the code
         const isDark = currentTheme === 'dark';
         // change this line to
         // const isDark = currentTheme !== 'dark';

Thanks and Reference