Hexo/hexo-theme-Chic problem summary

Hexo/hexo-theme-Chic problem summary

1. Set Chinese

1. First Chic/languagecheck whether there is zh-CN.yml in

2. Open the site configuration file: site root directory /_config.yml

   

   As shown above, change the language to zh-CN

2. Solve the problem of Chinese garbled characters

1. _config.ymlWill be saved in UTF-8 encoding
2. If the Chinese in the blog is also garbled, save the .md file in UTF-8 encoding
3. Then restart it:
   execute:hexo clean && hexo g && hexo s

3. The pictures inserted into the blog cannot be displayed

1. Install the plugin first

   npm install https://github.com/CodeFalling/hexo-asset-image --save
   

2. Modify _config.yml, change post_asset_folder: to true

   post_asset_folder: true
   

3. Then restart it:
   execute:

   hexo clean && hexo g && hexo s
   

4. Change the image path to ![picture format is optional]

   example:

   before change

   

   after change

5. Finally execute:

   hexo clean && hexo g && hexo s
   

4. Add a Link icon to the home page

1. Download the compressed package in the Ali icon library and decompress it. The steps are as follows:

   1. Click on the shopping cart

      

   2. Click Add To Project

      

   3. Select Symbol, then Download Code

      

   4. Rename the downloaded file to iconfont2 (or other names, use iconfont2 below), and then place it inChic/source/fonts

   5. Then source/css/style.stylintroduce the main css in (iconfont css already contains other external resources)
      just like the line that already exists, as follows

      // icon
      @import "../fonts/iconfont/iconfont.css"    //原来的
      @import "../fonts/iconfont2/iconfont.css"   //现在的
      

   6. Check Chic/source/fonts/iconfont2/iconfont.cssthe class name of the icon (or change it to the class name you want), for example:

      .icon-bilibili:before {
              
              
        content: "\e504";
      }
      

      The class name is bilibili

   7. Finally added to _config.yml, as follows:

      # config.yml文件
      links:
        Blog: /archives
        bilibili: url #新增的图标
      

   8. implement:

      hexo clean && hexo g && hexo s
      

   After I have performed the above steps, there is space for the icon, and I can click the link, but the icon is not displayed. This is how I solved it

   • Copied iconfont2the .woff and .woff2 files Chic\source\cssfrom the

Four, blog post

1. Blog post configuration items

configuration item	significance
title	Web Article Title
date	article creation
comments	Whether the article comment function is enabled
tags	article tag
categories	Article classification
keywords	article keywords

Use of the above configuration items:

--------------------------------------
title: ESP32-CAM入门教程
date: 2022-08-08 11:45:53
tags:
- 单片机             //一级分类
- esp32             //二级分类
categories:
- 单片机             //一级分类
- esp32             //二级分类
keywords:
- 单片机             //一级分类
- esp32             //二级分类
---------------------------------------

2. Upload a blog post

​ Before posting a blog post, you can set Typora like this文件->偏好设置->图像

1. enter first

   $ cd myBlog
   

   Again

   $ hexo new 'name'
   

   name is the name of the new article, and the path of the article is inmyBlog\source\posts

2. then execute

   $ hexo clean 
   $ hexo g 
   $ hexo s
   $ hexo d
   

   Note: Articles published or changed, musthexo clean

   • s: server
   • g: generate
   • d: deploy

5. Add Tag and Category pages

• Hexo initialization does not have any page tag, categoryyou need to add it yourself, execute the command:

  hexo new page tag
  hexo new page category
  

• Take Tags as an example:

  • Entersource\tag\index.md

  • ---
    title: Tag     //注意大小写
    layout: tag    //新增
    ---
    

• categoryThe page is the same, layoutthe field key value iscategory

  Note: capitalization and_config.yml

  nav:
    Posts: /archives
    Categories: /category
    Tags: /tag
    About: /about
  

  Consistent