In the previous article, we have already simplified the process of writing and deploying our blog, but there are still many areas where we can optimize in terms of details. Next, we will gradually improve the content of our blog.
Setting Avatar#
Hexo allows us to store images and files in many places, but putting each article in a separate folder or having a separate image folder for each article will make our project more and more bloated. Therefore, I store the image resources in my own Object Storage Service (OSS), not an image hosting service, as many self-hosted image hosting services do not support audio, video, and other formats.
After deploying in the previous article, we will find that we already have a default avatar. The location for setting the avatar is in the root directory's _config.maupassant.yml:
info:
avatar: /img/avatar.png # Modify to this path
discription: The meaning of life is to explore # Personal signature below the avatar
At the same time, we can find the default avatar avatar.png in themes/maupassant/source/img/. We just need to replace this image.
You need to run hexo g again to see the avatar displayed correctly.
However, for other image resources, it is best practice to create an image folder images in the source directory and place our image avatar.png in it. The directory structure is as follows:
Note: public is the folder generated by the hexo generate command, public/images corresponds to the packaged files after source/images, and public/img/avatar.png is the storage location of the default avatar.
Modifying External Links#
Similarly, in the root directory's _config.maupassant.yml:
info:
avatar: /img/avatar.png
discription: The most important thing is only one
outlinkitem:
- name: envelope
outlink: [email protected]
message: Email
- name: github
outlink: https://github.com/cirry
message: Github
- name: rss
outlink: /atom.xml
message: RSS
Modifying Friend Links#
links: # Friend links
- title: Cai Xiaoniu
url: https://cirry.cn/
src: https://cirry.cn/favicon.ico
desc: Cai Xiaoniu's blog
Setting Timeline#
First, create a timeline page, similar to the method of creating the Message and About Me pages.
hexo new page timeline
Then, in _config.maupassant.yml, add the timeline page to the menu attribute.
menu:
- page: home
directory: .
icon: fa-home
- page: archive
directory: archives/
icon: fa-archive
- page: about
directory: about/
icon: fa-user
- page: history # Add the history page
directory: timeline/ # Configure the path of the created page above
icon: fa-book # Configure the icon
- page: guestbook
directory: guestbook/
icon: fa-comments
Then, in the header information of source/timeline/index.md, add a new line:
---
title: Timeline
date: 2022-08-28 13:02:01
layout: timeline # Add this line of metadata
---
Finally, add the content of the timeline in _config.maupassant.yml:
timeline:
- num: 1
word: 2022-08-20 Building this blog
- num: 2
word: 2022-08-21 Deploying the first blog
You need to run hexo server again to see the effect.
Enabling Baidu Analytics#
The first step is to obtain the Baidu Analytics ID. Open the Baidu Analytics official website and log in to your account.
In the account settings --> Add website, correctly fill in the information of the website to be tracked. Note: If the website is using HTTPS, please enter the complete address, otherwise the tracking may fail.
In the code management section, copy the ID generated by Baidu Analytics, which is the content in the red box:
In _config.maupassant.yml, find baidu_analytics and paste the ID after it.
baidu_analytics: "b**********************4" ## Your Baidu Analytics tracking id, e.g. 8006843039519956000
Displaying Copyright Information at the End of the Article#
In _config.maupassant.yml, find post_copyright and enable the function and configure it.
post_copyright:
enable: true
author: Cai Xiaoniu ## Your author name, e.g. tufu9441
copyright_text:
This work is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">"Attribution-NonCommercial-ShareAlike 4.0 International"</a> license.
## Your copyright text, e.g. The author owns the copyright, please indicate the source reproduced.
After configuring, the style will be as follows:
Enabling Busuanzi Functionality#
Busuanzi Official Website, Busuanzi Detailed Configuration Documentation
In _config.maupassant.yml, find busuanzi and enable the function, set as follows:
busuanzi: true ## If you want to use Busuanzi page views please set the value to true.
The next article will discuss plugin installation and configuration.