Hexo theme optimization

Guide reading

This paper is mainly based on Hexo's theme NexT optimization, path:. / themes/next, and other topics are similar.

optimization

Multiple tags

Use [label1, label2 Label n]

Home page article Preview

Find. / themes/next/_config.yml

c
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150

Adjust the length to adjust the article preview length.

Modify blog font: find. / themes / next / source / CSS / ﹐ variables / custom.styl

$font-family-headings          = Georgia, sans                             //Title, change to your desired font family
$font-family-base              = "Microsoft YaHei", Verdana, sans-serif    //Change to your desired font family
$font-size-base                = 18px                                      //Size of body font
$posts-expand-title-font-weight = $font-weight-bolder                     //Extended title

Equivalent to overriding. / themes / next / source / CSS / ﹐ variables / base. Styl definition!

Add about to homepage

Open the file. / themes/next/_config.yml

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/
  about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404.html

Command line operations

hexo new page "about"

Open. / source/about/index.md

---
title: 
date: 2017-07-16 15:05:49
---

> do    By: Sun Yu | SY
> other    Name: big water cat
> Created:2017-7-16

Add category to homepage

Open the file. / themes/next/_config.yml

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/
  about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404.html

Command line operations

hexo new page "categories"
open`./source/categories/index.md`

  ```c
  ---
  title: 
  date: 2017-07-16 12:45:09
  type: "categories"
  ---

Add labels to the front page

Open the file. / themes/next/_config.yml

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/
  about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404.html

Command line operations

hexo new page "tags"

Open. / source/tags/index.md

  ---
  title: 
  date: 2017-07-16 12:43:53
  type: "tags"
  ---

Add the function of statistics visits

reference resources: Personalization of Hexo's NexT theme: add article reading volume

Add Google and Baidu statistical functions

Enter the directory. / themes/next/_config.yml

# Google Analytics
google_analytics: UA-102634678-1

Visit Google Analytic , apply for an account. Get ID

Blog link persistence

npm install hexo-abbrlink --save

Then modify ﹖ config.yml

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://muasy.com
root: /
permalink: :abbrlink/
permalink_defaults:

Change head image to original

Locate the file:. \ themes \ next \ source \ CSS \ common \ components \ sidebar \ sidebar-author.styl

.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 128px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;
  border-radius: 50%;
}

Mouse over head image rotation

Locate the file:. \ themes \ next \ source \ CSS \ common \ components \ sidebar \ sidebar-author.styl

.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 96px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
}

.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}

Change code color

Find. \ hex \ themes \ next \ source \ css_common \ components \ highlight \ highlight.styl

code {
  padding: 2px 6px;
  word-wrap: break-word;
  color: $highlight-blue;
  background: #f9f2f4;
  border-rdius: $code-border-radius;
  font-size $code-font-size+1;
}

Modify the color property

Set language: zh Hans or garbled

Save the source file in UTF-8 format.

Add QR code

Locate the file. \ hexo \ themes \ next \config.yml

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/QRCode.jpg
  description: Scan and access the site with mobile phone

Open Baidu auto push

Locate the file:. \ hexo \ themes \ next \config.yml

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

Set the foreground color and background color of the selected content

Locate the file:. \ hex \ themes \ next \ source \ CSS \ custom \ custom.styl

// Custom styles.

::selection
    background #4682B4
    color #fff
::-moz-selection
    background #33a183
    color #fff
::-webkit-selection
    background #33a183
    color #fff

Reference resources

Hexo Next theme setting and optimization

Tags: xml Google npm QRCode

Posted on Fri, 01 May 2020 04:21:39 -0700 by blaster_master