一个好看的Hexo主题，BFHUI

CN Post

https://blog.bfh.ink/?p=78

Announcement

This theme is based on the enhanced version of the Argon theme, there is no plagiarism, the copyright belongs to both parties!

Declaration (bug)

Currently does not support Markdown’s code insertion method!

Markdown

	```cpp
	#include<iostream>
	using namespace std;
	int main(){
	cout<<"Hello";
	return 0;
	}
	```

   

This theme uses Html

	<pre><code>#include<iostream>
	using namespace std;
	int main(){
	cout<<"Hello";
	return 0;
	}
	</code></pre>

   

• Html supports automatic language recognition
• Html supports code highlighting
• Html support code in code
• Html supports header 1, 2, 3, 4, 5, and 6 fonts

Characteristic

1. Lightweight and beautiful-using the Argon Design System front-end frame, the details are exquisite, light and beautiful
2. Highly customizable-customizable theme color, layout (double column/single column/three column), top column, side column, banner, background image, different backgrounds in day and night mode, background immersion, floating operation buttons, etc., Provides a wealth of customization options
3. Night mode-supports three modes: day, night, and pure black, and can automatically switch according to the time or follow the system night mode
4. Many functions-Tag and classification statistics, author links, additional links, article word count and estimated reading time, article outdated information display
5. Pjax-Support Pjax non-refresh loading, improve browsing experience
6. Friendly Links – Support the use of WordPress’s built-in link manager for friend chain management, and support a variety of friend chain styles
7. “Talking” function-publish ideas at any time, and display them on the special “Talking” page, and also support the interspersion of talks with homepage articles
8. Comment function extension-Ajax comments, comments support Markdown, verification code, edit again, display UA, private message mode, email notification when replying, view editing records, unlimited loading, etc.
9. Many functions-article directory, reading progress, Mathjax or Katex formula analysis, picture zoom preview, Pangu.js text formatting, smooth scrolling, etc.
10. Abundant shortcodes-Support for inserting TODO, tags, warnings, tips, folding blocks, Github information cards, timeline, hidden text, video and other modules in the article through shortcodes
11. Multi-language-support Chinese, English, Russian and other languages
12. Others-adaptive, well-optimized article reading interface CSS, switchable serif / sans serif fonts, customizable CSS and JS, support for using CDN to accelerate static file access, SEO friendly, banner typing animation, message board page Wait

Quick to use

How to use?

Precautions

Nodejs must be installed before

Installed hexo

---

Github: https://github.com/black-fruit/theme-Hexo-BFHUI

You can download the installation package. Currently supports github download or direct download

Direct download is very, very difficult for not being able to access github or accessing github.

Node download address: https://v3download.bfhui.top/bfhui.v.0.1.2.zip

Apply to hexo

Unzip this zip archive

Then move the unzipped folder to “your hexo blog/themes” folder

After

Re it name “bfhui”.

Then open your blog root directory‘s “_config.yml“

Required plugins for this blog theme.

Type in cmd or bash:

npm install hexo-generator-search --save

   

And then enjoy（And theme Setting）

Photo

Theme Setting

Please open the theme’s _config.yml

Comments

For the time being, only support for gitalk is supported (the Disqus comment system is currently being updated)

Code

Function	Type	Effect
enable	bool	True or False
githubID	string	Enter your Github login name
owner	string	Your Github name or organization name
repo	string	Issus Rope
adminuser	string	Admin Github name
clientID	string	Id obtained in OAuth
clientSecret	string	Secret obtained in OAuth
distractionFreemode	bool	Distraction free mode

How do I get the client id and client Secret?

Go to Setting

Go to Developer Setting

To here

Click new

For example,

Just got Client ID

Bellow is Client secrets

Click to create

After each fill in, it will be OK.

pangu.js

If you are reading an article, if english and Chinese are mixed and there is a number of 12334, you must be very annoying to look at it

Then use it

He will automatically separate Chinese and English

Like this

你好 hello world 啊 1313

The specifications are

Function	Type	Effect
enable_pangu	bool	True or False

lazyload

Why ?

Of course

Wherever it sees the picture

People left after half watching

But I don’t need it, it’s all loaded (the server traffic is crying in the toilet)

Specification

功能	类型	作用
enable_lazyload	bool	True or False
lazyload_threshold	int	How many pixels from the start to load
lazyload_effect	string	Picture display animation
lazyload_loading_style	int or none	Picture loading animation

Global

It has

Font settings

Specification

Function	Type	Effect
theme_color	string	Theme color
show_customize_theme_color_picker	bool	Allow users to customize the main color of the theme
darkmode_autoswitch	string	Automatically switch night mode
enable_amoled_dark	bool	false = gray and black true = dark
card_radius	double / float	Default card round corner size
card_shadow	string / none	Card shadow (shadow)
font	string	Font
enable_headroom	bool	Whether to automatically collapse the top bar when scrolling
none	none	none

ToolBar

Specification

Function	Type	Effect
toolbar_icon	string	Display image
toolbar_icon_link	string	ToolBar icon link
toolbar_title	string	Title

Advanced settings

Footer

Using string

Support hyperlink ico

Math

Custom

Code HighLight

The first item is True or False

The first two is the highlight theme

Big picture preview

Generally default

Smooth scrolling

Action button

Both are bool values directly set by yourself

Banner

Sidebar

•  Support icon (requires Html i class element)

E.g:

<i class="fa fa-home"></i>Home<!--"fa fa-home"is home's icon-->

   

Post

BackGround

Other

Recommended articles and the functions at the end of the article need to modify the configuration file by yourself

After configuration, deploy

	hexo clean
	hexo g
	hexo s
	ssh -vT git@github.com
	hexo d