Hexo blog building - Next theme configuration

Article Directory

Hexo blog building - Next theme configuration

Configuration file distinction

site configuration file

The site configuration file is in the hexo root directory

You can see that there is another_config.next.yml

This is because the theme is configured, so the configuration file of the theme should be introduced in the root directory of hexo configto make the configuration file of the theme take effect

_config.ymlThe content of this file is the same as that in the theme configuration file below (it is copied from the rename under the theme )

theme configuration file

There is a separate _config.ymlconfiguration file under the theme, which is the theme

But when we modify the theme configuration file, we modify it from the root directory of hexo _config.next.yml. This is to avoid the default initial _config.ymlconfiguration file that comes with the new version of the theme when the theme is updated in the future. Conflict and overwrite the custom The loss of the original configuration file.

When you modify files directly within the theme folder _config.ymland update the theme in the future, the new version of the theme may contain a new _config.ymlfile. During the update process, the new version of _config.ymlthe file may overwrite your modified _config.ymlfile, resulting in the loss of your previous customizations.

In order to avoid this situation, it is recommended that you _config.ymlcopy the file of the Next theme to the root directory of the Hexo blog and rename it to _config.next.yml. Then make your custom settings in this new file. This way, even if you update the theme, your customizations will still be saved in the root directory _config.next.ymlfile and will not be overwritten by the new version of the configuration file.

Profile Description Abbreviation

Modifications to site configuration files append site to the secondary heading

Modifications to theme configuration files append next to the secondary heading

Introduce next theme-site

nextTheme page mode setting-next

Muse: This is a clean and pure theme that has a design similar to a single-column layout. This layout makes the content of the blog the core of the page. Muse mode is suitable for users who like a minimalist style and focus on content presentation.

Mist: Compared with Muse, the Mist mode is richer, and it adopts a double-column layout. On the right side of the page, you can see a sidebar, which is used to display other information of the blog (such as categories, tags, archives, etc.). Mist mode is for those who need more features and want to present more information in the blog.

Pisces: Pisces mode uses a two-column layout, but unlike Mist, it has sidebars on both sides of the page. This layout is more visually symmetrical and is suitable for those who prefer a symmetrical style and want to display more information in their blog.

Gemini: Gemini mode also uses a two-column layout, but it has a more compact sidebar design, which makes the page more visually focused. Gemini mode is for those who prefer a minimalist style but need some extra functionality.

Set the home page not to display the full text-site

excerpt accurately.
auto_excerpt:
enable: true
length: 150

In the original configuration file there is no

Need to add additional

Set blog post persistent connection-site

Comment out the original persistent link format, and then set the new format to post/:abbrlink.html.

You need to make sure your blog post link format is unique. In this case, the new link format will replace the old link format.

download plugin

A plugin for Hexo hexo-abbrlink.

This plugin is used to generate unique abbreviated links (abbrlinks) based on article content. This will ensure that the article links are unique, thus avoiding the problem of link conflicts.

To install the hexo-abbrlink plugin, run the following command in the root directory of the Hexo blog:

npm install hexo-abbrlink --save

After the installation is complete, you need to configure the relevant settings of the plugin in the Hexo configuration file (_config.yml):

abbrlink:
  alg: crc32
  rep: hex

Here algdenotes the algorithm of choice (such as crc32), repand denotes the representation of the abbreviated link (such as hexadecimal, hex).

URL Setting

url: This setting is the base URL of your website. You need to set the domain name of your blog site here so that the link generated by Hexo can correctly point to your site. If you use GitHub Pages, your URL should be set to https://username.github.io/project.

Using your GitHub repository as an example, your URL should be set to:
url: https://eevinci.github.io
When you use username.github.ioa repository called , you can take advantage of the GitHub Pages service to host your static website or blog. In this case, you need to set to (for example, ) in the Hexo configuration file ( _config.yml ) .urlhttps://username.github.iohttps://eevinci.github.io

However, if you are not using this specially named repository, then your repository is just a platform for hosting code. To deploy your blog to the internet, you need to use other deployment services like Netlify , Vercel , etc. urlIn this case, you should set to your custom domain name in the Hexo configuration file , or use the temporary domain name assigned to you by the deployment service (for example, https://your-project-name.netlify.app). This will ensure that the links generated by Hexo point correctly to your blog.

So, according to your actual deployment, you need to _config.ymlset it correctly in the file url. If you use GitHub Pages, please set to https://username.github.io; if you use other deployment services, please set to the corresponding domain name.
pretty_urls: This is a property used to configure the URL format . It contains two sub-properties:

trailing_index: If set false, the trailing 'index.html' will be removed from the link. For example, https://yourdomain.com/about/index.htmlbecomes https://yourdomain.com/about/.

trailing_html: If set false, the trailing '.html' will be stripped from the link. For example, https://yourdomain.com/about.htmlbecomes https://yourdomain.com/about.

These attributes make blog links look cleaner and easier to read.

These properties can be set to your liking.