01_Hexo-Hexo + Pure Build Blog - Customization

Building a Personal Blog with Hexo#

I. Introduction#

1.1 Hexo#

Hexo is a fast, simple, and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and can generate static web pages with beautiful themes in seconds. Hexo Official Website

1.2 Pure Theme#

cofess/hexo-theme-pure

Hexo theme pure. It's a pure theme for Hexo.

CSS1090291

https://blog.cofess.com/

II. References#

Hexo Official Website https://hexo.io/zh-cn/docs/index.html

Pure Project Address https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md

Setup & Customization#

III. Commands#

hexo clean ; hexo g ; hexo d ; hexo s

IV. Comments & Indexing#

Valine Comments https://www.leancloud.cn/

Valine Comments https://www.leancloud.app/ Foreign site, domestic accounts are restricted, the domain may not have been successfully obtained for free, possibly the reason → https://forum.leancloud.cn/t/2022-8/25408

Google Indexing https://search.google.com/search-console

Baidu Indexing https://ziyuan.baidu.com

MD5 Online Encryption https://md5jiami.bmcx.com/ Comments section through ciphertext, identify the blogger's identity

[Article Path]: 
	\source\_posts
[Site Configuration File]: 
	\_config.yml
[Theme Configuration File]: 
	\themes\pure\_config.yml	"About, Personal Introduction, Announcements"
[Friend Links File]: 
	\source\_data\links.yml
[Language]: 
	\themes\pure\languages
[Bottom Left Running Time]: 
	\themes\pure\layout\_common\footer.ejs	"Time, Copyright"
[Comment Role Configuration]: 
	\themes\pure\layout\_script\_comment\valine.ejs
[CSS Styles]:
	\themes\pure\source\css\style.css
[Search Bar Limit]: 
	\themes\pure\source\js\insight.js	"Line 160"

VI. Content Example#

---
title: Test
date: 2022-08-28 00:09:00
updated: 2022-08-28 00:09:01
thumbnail: https://image.cpen.top/image/test.png
tags:
    - Test
category:
    - Test
toc: true
top: true
---
Description<!-- more -->

Article with Multiple Categories#

Multiple Categories

If our requirement is to categorize an article into two or more different categories, the official method is:
categories:
  - [Sports]
  - [Baseball]
Reference Article: Hexo Article with Multiple Categories https://www.jianshu.com/p/4438c417611e

VII. Customization#

F12 locate the class selector for the search box as ins-section-header
grep, locate the configuration file as \themes\pure\source\js\insight.js
Ctrl + F, search 5, locate line 160, modify the limit

7.2 Left Avatar Link, Change Target to _self#

a tag, change target: '_blank' → '_self'

7.3 Article Directory, Level 1 Title Does Not Jump#

Sometimes it is found that the level 1 title does not jump

~~Configuration file \node_modules\hexo\lib\plugins\helper\toc.js~~

~~Update the \node_modules\hexo\lib\plugins\helper\toc.js file, and it works normally again. It can be inconsistent...~~

~~Reference https://hwame.top/ 如何取消文章目录的自动编号~~

Modify ".\node_modules\hexo-renderer-markdown-it\index.js" level to 1

Reference Article:

https://blog.csdn.net/Fosu_Chenai/article/details/111192850 Comments

7.4 Thickening Scroll Bar + Adding Small Arrow#

Modify CSS styles, path .\hexo-source\themes\pure\source\css\style.css

Ctlrl + F locate scrollbar;
Increase height to thicken the right scrollbar of the code box;
The right dropdown bar becomes thicker;

7.4.1 Thickening Code Box

/*
 * scrollbar
 */

::-webkit-scrollbar {
  width: 15px;
  height: 14px;					# Increase
  background: transparent;
}

7.4.2 Thickening Right Dropdown Bar + Adding Small Arrow

/*
 * Scrollbar Arrow							
 */
::-webkit-scrollbar-button {
    width: 0px;
    height: 4px;
    display: block; 
    background-color: #c3c3c3;
}
::-webkit-scrollbar {
  width: 16px;
  border: 5px solid white;

}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0px 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

Reference Articles

7.5 Adding Hitokoto to Valine Comment Box#

Reference Article

https://blog.justlovesmile.top/posts/27831.html

Accidentally saw this article, and then I added this feature myself.

Path: .\themes\pure\layout\_script\_comment\valine.ejs;

Add before the last </script> tag; c=j request to get a sentence from NetEase Cloud, let's start the net depression;

    fetch('https://v1.hitokoto.cn/?c=j')
    .then(response => response.json())
    .then(data => {
      document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)

Modification Method:
Find the corresponding position to add valine in the blog, for example, the Ayer theme is located at hexo\themes\ayer\layout_partial\post\valine.ejs
Add a piece of code inside:
<script type="text/javascript">
   fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)
</script>
API Interface Description:
(1) https://v1.hitokoto.cn/ (Randomly selected from 7 categories)
(2) https://v1.hitokoto.cn/?c=b (Request to get a sentence from the comic category)
Parameters Description
a Animation
b Comics
c Game
d Literature
e Original
f From the Internet
g Others
h Film and Television
i Poetry
j NetEase Cloud
k Philosophy
l Playful
Others Processed as animation type
Multiple categories can be selected, e.g.: ?c=a&c=c
(3) https://v1.hitokoto.cn/?c=f&encode=text (Request to get a sentence from the internet and output in plain text format)

Returned Format Description
Returned Parameter Name Description
id Hitokoto Identifier
hitokoto Hitokoto Text. Encoding method unicode. Use utf-8.
type Type
from Source of Hitokoto
from_who Author of Hitokoto
creator Adder
creator_uid Adder User Identifier
reviewer Reviewer Identifier
uuid Hitokoto Unique Identifier; can link to https://hitokoto.cn?uuid=[uuid] to view complete information of this hitokoto
commit_from Submission Method
created_at Add Time
length Sentence Length
For example: the returned data, get the sentence text through data.hitokoto

Author: Justlovesmile
Link: https://blog.justlovesmile.top/posts/27831.html
Source: Justlovesmile's BLOG
Copyright belongs to the author. For commercial reproduction, please contact the author for authorization, for non-commercial reproduction, please indicate the source.

PS: This blogger's blog is really beautiful~~

7.6 Left Archive, Category Default to Collapsed#

The default is expanded

Modify the following files to change to collapsed state. As shown
- style="height: 0px" should not need to be written, the collapsed state is default to 0 ~~

.\themes\pure\layout\categories.ejs

.\themes\pure\layout\_partial\archive.ejs

VIII. Unresolved Small Needs#

(Resolved, #7.3) Level 1 directory, right navigation bar sometimes fails to jump;
Valine comment system, the comments below are not displaying @ information after being @, while others are successful;

Mine

Other bloggers
When quoting, using # will be mistakenly regarded as a level 1 title by the navigation directory;
(Resolved) Static files generated in the /public directory are all compressed, ~~I saw that others were not compressed, unclear reason.~~ Because this configuration https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md Blog Optimization compressed the files
(Resolved) No anchor points on the left side of the article's level 1, level 2... titles

Ideal effect picture

It seems to be an environment configuration issue. When I push static files using a virtual machine, it shows; when I push using a real Windows machine, there are no anchor points, reinstalling git also does not show (may not be git's problem)...

Because the static files were compressed, all commented out hexo-neat configuration.
Reference
https://github.com/cofess/hexo-theme-pure#hexo-neat
https://github.com/rozbo/hexo-neat#options

Not a big deal, ~~I usually write the article title as the level 1 title~~; the comments section is just a decoration; ~~the static files being compressed may make others think I did it on purpose, hey~~~~

In conclusion: Customization should be moderate, too time-consuming without improvement, better to watch a few more front-end videos and write a few more articles...