【Hexo】 Customize the Hexo profile

instructions

In the previous article, we introduced the implementation of automated blog deployment using Hexo + Github Pages + Travis CI. We have already acquired a blog of our own, but it is still fairly primitive, and the Settings are all default data, so we need to change them to the content we want.

So in this article, we will focus on how Hexo’s configuration file is set up. Through this article, you will know what the various properties of the Hexo profile mean and give me the configuration I used so you can do whatever you want.

Site information

Let’s look at the first part, site information configuration. First, explain the meaning of each field:

Here is my configuration for reference:

# Site
title: Frank's Cat
subtitle: 'Always young and always tearful'
description: 'Remember the past, embrace the future, dream in your heart, light in your eyes'
keywords: Life, programming, reading, music, movies
author: The wind
language: zh-CN
timezone: ' '
Copy the code

Web site information

The configuration of url information is mainly to set the website’s address and article link format.

Such as:

#, for example, a page of permanent link is http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# page will become a permanent link http://example.com/foo/bar/ at this time
Copy the code

You usually only need to change the URL and root, or if the blog is deployed using Github Pages, set the URL to the corresponding blog address. The important thing to note here is the value of root, which you would need to set to/project name/if you were deploying as we did in the previous article.

Here is my configuration:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mfrank2016.github.io/
root: /breeze-blog/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
Copy the code

The directory information

Directory information is used to specify the corresponding locations of various directories and does not need to be modified.

Such as:

skip_render: "mypage/**/*"
# will directly output 'source/mypage/index.html' and 'source/mypage/code.js' unchanged to the 'public' directory
You can also use this method to skip the rendering of the specified article file
skip_render: "_posts/test-post.md"
# This will ignore the rendering of 'test-post.md'
Copy the code

My configuration is as follows:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
Copy the code

The paper configuration

This section configures the various properties associated with the article.

The auto_spacing recommendation is on so that it looks better. Titlecase means to capitalize key words. If you’re confused, read the following:

Titles should be written in title case. This means only using capital letters for the principal words. Articles, conjunctions, and prepositions do not get capital letters unless they start the title. For example: The Last of the Mohicans

You are advised to enable the post_asset_folder function. In this way, when new articles are generated, a folder with the same name will be generated in the same directory. In this way, resources related to the article, such as images, can be stored in the folder for reference and management.

Here is my configuration:

new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: true
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: post # Apply to the whole site
  exclude: ' '
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
# highlight:
# enable: true
# line_number: true
# auto_detect: false
# tab_replace: ''
# wrap: true
# hljs: false
highlight:
  enable: false

# Code highlight
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:
Copy the code

Here I use another code highlighting plug-in, which is fine if the default HLJS highlighting is usually used. If you also want to use this plugin, you can check it out here. You need to install it first:

npm i -S hexo-prism-plugin
Copy the code

Category and label information

If the article uses An English name category, it is unnecessary to set this parameter. If the article uses a Chinese name category, it is better to configure some corresponding English names, otherwise the URL encoding Chinese will appear in the corresponding category link, for example:

http://localhost:4000/breeze-blog/categories/programming/life/%E6%B5%8B%E8%AF%95/
Copy the code

My configuration is as follows:

# Category & Tag
default_category: uncategorized
category_map:
  Programming: programming
  Life: life
  Reading: reading
  Random thoughts: thoughts
  Financial management: finance
tag_map:
  Agile development: agile-development
  Environment building: environment-building
Copy the code

Date/time format

Hexo uses moment.js to parse and display the time.

My configuration is as follows:

# 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: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: true
Copy the code

The paging information

My configuration is as follows:

# Pagination
## Set per_page to 0 to disable pagination
per_page: 12
pagination_dir: page
Copy the code

Extended information

Set theme here to open the corresponding theme. How to set theme will be explained in a later article.

Theme_config overwrites the parameters of the theme_config file, so there is no need to maintain two config files. However, I prefer to use different config files for different theme files.

Deploy is a deployment related configuration, such as git deployment. There are many other deployment positions, such as Heroku and Netlify, which require the installation of the corresponding plug-in first.

My configuration is as follows:

# Extensions
theme: hexo-theme-matery

# Deployment
deploy:
  type: 'git'
  repo: [email protected]:MFrank2016/breeze-blog
  branch: gh-pages
Copy the code

Include or exclude directories and files

In the Hexo configuration file, you can make Hexo process or ignore certain directories and folders by setting include/exclude. You can use glob expressions to match directories and files.

The include and exclude options can only be applied to the source/ folder, but the ignore option can be applied to all folders.

For example:

# Include/Exclude Files/Folders
include:
  - ".nojekyll"
  # include 'source/CSS / _typing. CSS'
  - "css/_typing.css"
  Include any files in 'source/_css/', but not subdirectories and files in them.
  - "_css/*"
  # contains any files in 'source/_css/' and any files in subdirectories
  - "_css/**/*"

exclude:
  # not include 'source/js/test.js'
  - "js/test.js"
  # does not include files in 'source/js/', but includes all directories and files under subdirectories
  - "js/*"
  # does not include files in 'source/js/' and any files in subdirectories
  - "js/**/*"
  # does not include all files whose names start with 'test' in the 'source/js/' directory, but includes other files and single files in subdirectories
  - "js/test*"
  # does not include any files starting with 'test' in 'source/js/' and its subdirectories
  - "js/**/test*"
  Do not exclude files from 'source/_posts/'. You should use 'skip_render' or add an underscore '_' before the filename of the file you want to ignore.
  - "_posts/hello-world.md" is useless.

ignore:
  # Ignore any folder named 'foo'.
  - "**/foo"
  # Ignore 'foo' folder in 'themes/' only.
  - "**/themes/*/foo"
  # Same as above, but applies to every subfolders of 'themes/'.
  - "**/themes/**/foo"
Copy the code

Each item in the list must be enclosed in single or double quotation marks.

Include and exclude do not apply to files under the Themes/directory. If you want to ignore some files or folders in the Themes/directory, use ignore or add an underscore _ before the file name.