Local Search Plugin#
Installation#
npm install hexo-generator-searchdb --save
Configuration#
Add the following content to the _config.yml file in the root directory:
search:
path: search.xml
field: post
content: true
template: ./search.xml
Then, in _config.maupassant.yml, find the self_search attribute and set it to true.
Finally, execute the following commands. After installing the plugin, you need to perform the following operations to see the effect:
hexo clean # Clear cache
hexo g # Regenerate files
hexo s # Run
Code Highlighting#
Currently, Hexo version 6.0+ has integrated code highlighting, which can be enabled directly. Please check your Hexo version in package.json. It can be used, but the displayed style conflicts with the theme I am currently using, so I chose to install it manually.
Official Highlight Plugin Configuration Documentation, it is recommended to read the English documentation, as the Chinese documentation is a bit outdated and may lead to ineffective configurations.
If you are also installing manually, you can continue with the following steps.
hexo-prism-plugin Plugin Address, this repository has bugs that have not been fixed. I forked the repository, fixed the bugs, and released a new package—hexo-prism-plugin-advanced, which I may continue to maintain in the future.
Installation#
npm install hexo-prism-plugin --save # Not recommended for installation
npm i hexo-prism-plugin-advanced --save # Recommended for installation
Configuration#
In the _config.yml file in the root directory, replace the following content:
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace: ''
wrap: true
hljs: true
prismjs:
enable: true
preprocess: true
line_number: true
tab_replace: ''
with:
highlight:
enable: false
In the _config.yml file in the root directory, add the following content:
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'ghcolors' # There are many built-in theme styles, you can check the official website
line_number: true # default false
custom_css: 'path/to/your/custom.css' # optional, can be deleted if not needed
Issues Encountered#
Issues encountered during use may not occur with different themes:
- Code blocks cannot be present in the article summary displayed on the homepage, meaning do not include code blocks in the first paragraph of the article, as it will cause style disruption.
- The copy button for code blocks disappears.
- The '{}' in code blocks will be escaped as '{' and '}', I have fixed this bug in my package, so if you install hexo-prism-plugin-advanced, you will not have this issue.
Fixing Issue 1#
I believe this is a bug in the plugin, and displaying code blocks in the summary is not very aesthetic, so it should be avoided.
Fixing Issue 2#
Step 1:
Modify the following code in themes/maupassant/source/js/copycode.js:
$(".highlight .code pre").before(copyHtml); // Line 12
Replace it with:
$("pre code").before(copyHtml);
$("pre").wrap('<div class="code-block-wrapper"></div'); // And add this line
This line of code means to insert a copy button on the code block. Because we are using the plugin, the styles have changed, causing the button insertion to fail, so there is no copy button.
Step 2:
Modify themes/maupassant/source/css/copycode.scss to the following code:
.btn-copy {
position: sticky;
height: 12px;
left: 96%;
width: 32px;
margin-left: 96%;
cursor: pointer;
border-radius: 6px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
color: #808080;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
}
.btn-copy:hover{
color: #000;
}
pre:hover .btn-copy{
opacity: 1;
}
Fixing Issue 3#
In node_modules/hexo-prism-plugin/src/index.js, add the following code, and remember to clear the cache and rerun:
This also means that you will need to modify this place every time you reinstall the package. If you find it troublesome, you can install the package I released.
const map = {
''': '\'',
'&': '&',
'>': '>',
'<': '<',
'"': '"',
'{':'{', // Add this line
'}':'}' // Add this line
};
Word Count Statistics#
Installation#
npm i --save hexo-wordcount
Configuration#
In the _config.yml file in the root directory, add the following content:
post_wordcount:
date: true # Publication date
update: true # Update date
wordCount: true # Article word count statistics
totalCount: true # Total word count of the site
min2read: true # Article reading time
readCount: true # Article reading count
Then, in _config.maupassant.yml, find the wordcount attribute and set it to true.
Advanced configuration:
In the themes/maupassant/layout/_partial/wordcount.pug file, you can modify the reading speed, etc.
span.post-time
span.post-meta-item-text= ' | '
span.post-meta-item-icon
i.fa.fa-keyboard-o
span.post-count= ' '+wordcount(page.content)
span.post-meta-item-text= " "+__('word_cnt')
span.post-time= ' | '
span.post-meta-item-icon
i.fa.fa-clock-o
span.post-count= ' '+min2read(page.content, {cn: 200, en: 160}) # Modify the reading speed for Chinese and English
span.post-meta-item-text= ' '+__('read_time')
Convert Chinese Links to Pinyin#
Installation#
hexo-permalink-pinyin Official Address
npm i hexo-permalink-pinyin --save
Configuration#
In the _config.yml file in the root directory, add the following content:
permalink_pinyin:
enable: true
Add Emoji Support#
Installation#
# hexo-filter-github-emojis Official Address
npm install hexo-filter-github-emojis --save
Configuration#
In the _config.yml file in the root directory, add the following content:
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
Install Sitemap#
To improve SEO, add Baidu's site indexing.
hexo-generator-sitemap Official Address
npm install hexo-generator-sitemap --save
Configuration#
In the _config.yml file in the root directory, add the following content:
sitemap:
path:
- sitemap.xml
- sitemap.txt
rel: false
tags: true
categories: true
If you want a specific article not to be crawled, you can set sitemap: false in the front matter.
Install Douban Card#
hexo-douban-card Official Address
When you write a blog post introducing a movie or a book, you can directly fetch information from Douban to display on your blog, as shown in the screenshot below.
npm install hexo-douban-card --save
Usage#
Simply insert it at the appropriate position in the article.
{% douban movie 24745500 %}
{% douban book 30376420 %}
{% douban music 35099703 %}
Parameter Explanation#
-
The first item
doubanrepresents the plugin name. -
The second item is optional:
movie,book,music. -
The third item should be filled with the corresponding id, which is the string of numbers after subject in the URL of the content you found on Douban.
Add Bilibili Video Card#
Currently, many plugins do not have an official website, making direct embedding look more aesthetic.
We just need to click the share button on Bilibili and copy the embed link into our article. If you find the style not very aesthetic, you can add the following style to the link:
style="width: 100%; height: 500px; max-width: 100%; align:center; padding:20px 0;"
The final link should look like this:
<iframe src="//player.bilibili.com/player.html?aid=839629572&bvid=BV1Y54y1m743&cid=237240818&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 100%; height: 500px; max-width: 100%; align:center; padding:20px 0;"> </iframe>
Install RSS Functionality#
npm install hexo-feed --save-dev
After installation, use the commands:
hexo cl
hexo g
You will see that three files rss.xml, atom.xml, and feed.json are generated in the public folder in the root directory.
Configure the RSS path in the _config.maupassant.yml file.
info:
#######
outlinkitem:
######
- name: rss
outlink: /rss.xml
message: RSS