Part ii: NexT Topic configuration and optimization guide

Writing in the front

(1) What is Hexo: Official portal

(2) Hexo official website: hexo.io

(3) Hexo theme selection:

Liverpoolfc.tv: Themes | Hexo
GitHub: Themes · Hexojs
Zhihu: What are some interesting Hexo themes?

I used the theme NexT V5.1.4. The software and tool versions are as follows:

Nodejs: v8.10.0 NPM: 5.6.0 # NPM -v NexT theme version: 5.1.4 # Open the site configuration file _config.yml and search for versionCopy the code

Note: The new NexT theme source code has been moved to this repository

The hexo version information is as follows:

Hexo - CLI :1.1.0 OS :Windows_NT 6.1.7601 win32 x64 http_Parser :2.7.0 node:8.10.0 V8 :6.2.414.50 UV: 1.19.1z1ib :1.2.11 Ares: 1.10.1 - DEU modules: 57 nghttp2:1.25.0 openss1:1.0.2 n icu: unicode 60.1:10.0 CLDR: 32.0 tz: 2017 cCopy the code

1. Basic topic configuration

As for the choice of blog theme, I have been considering for a long time and could not decide which theme is suitable. After trying many good themes, I finally decided to choose the NexT theme which has the most star on GitHub. With so many people using it, the general public should still approve it. NexT topic version update log and download: NexT – Theme for Hexo | NexT Theme – making

On this topic related configuration, optimization and customization online is easy to find a lot of information, but the basic configuration, or recommended to read the official article directly:

Topic configuration – NexT Uses documentation
Theme Configuration Reference · IISSNAN/Hexo-Theme-Next Wiki (Next Theme GitHub Wiki page about theme setting tutorial)

This article covers most of the basic configuration changes for the NexT theme and optimizes custom blogs.

More comprehensive revision guide online for reference:

2016-04-07 Hexo site, NexT theme modified full record
2018-05-01 About building a personal blog for Hexo6.0 (Advanced)
2017-05-24 Hexo’s Next Theme personalized Configuration tutorial
…

(0) Theme setting/dynamic background/display current browsing progress

(1) Theme setting

Theme setting: Open the theme profile and search for the Scheme keyword. You’ll see four lines of Scheme configuration. I chose Scheme: Pisces, and here’s my setup:

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
Copy the code

Muse: Default Scheme, this is the original version of NexT, black and white main tone, lots of white space
Mist: A compact version of Muse with a neat, orderly, single-column look
Feb. 20 – Feb. 20 – Feb. 20 – Feb. 20 – Feb. 20 – Feb. 20 – Feb. 20 – Feb. 20 – Feb. 20 – Feb. 20
Gemini: Left site information and directory, block + fragment structure layout

(2) Dynamic background

There are currently four dynamic backgrounds for the NexT theme:

Canvas-nest
three_waves
canvas_lines
canvas_sphere
Copy the code

Set method is very simple, directly set the dynamic background required to be true.

(3) Display the current browsing progress

Change themes/next/_config.yml from false to true:

# Scroll percent label in b2t button
scrollpercent: true
Copy the code

(1) Setting of “category” and “label” for the article

For the other topics I used earlier, just add a category and label in the following format at the beginning of a new post in the Source folder:

Categories: What are the chances of successCopy the code

But the setup steps under the NexT theme are as follows:

First,hexo new page categoriesCreate the categorier folder and a categorier folder will be generated automaticallyindex.mdFile, modify (that is, add a line) to:

---
title: categories
date: 2018-01-23 17:14:51
type: "categories"
---
Copy the code

The same goes for “tags”, hexo new Page tags, generate tags folder, which will automatically generate an index.md file, change it to:

---
title: tags
date: 2018-01-23 17:14:51
type: "tags"
---
Copy the code

Then write blog posts that indicate which “categories” they belong to and which “tags” they have. The official document says the format is as follows:

categories:
- Diary
tags:
- PS3
- Games
Copy the code

But I personally tested, the following is also ok:

Categories: Technical tags: Programming, PerceptionCopy the code

In addition, for the NexT theme, for the “About” menu, you need to create a folder manually, just like the new category and label menu above. Hexo New Page About will generate the About folder, and the index.md file will be automatically generated. You can then write a personal introduction in the.md file. (The name of the file index.md cannot be changed, otherwise the “About” menu will fail)

This part of the setting is called “front-matter” in the official documentation. “front-matter” is the area at the top of the file separated by — and used to specify variables for individual files, for example:

---
title: Hello World
date: 2013/7/13 20:46:25
---
Copy the code

Here are the predefined parameters that you can use and leverage in the template.

parameter	describe	The default value
layout	layout
title	The title
date	Set up the date	Document creation date
updated	Updated date	File Update date
comments	Enable comments for articles	true
tags	Tags (not applicable to paging)
categories	Classification (not applicable to paging)
permalink	Overlay article url

(2) Add local add search menu

NPM install hexo-generator-searchdb –save
Open the site configuration file and find Extensions to add below (in fact, add the following anywhere)

search:
      path: search.xml
      field: post
      format: html
      limit: 10000
Copy the code

Open the theme configuration file and find Local Search. Set enable to true to enable Local search. Then you can see the search menu on the page:

# Local search
local_search:
  enable: true
Copy the code

(3) Add word count and reading time (next theme has been integrated)

Hexo provides the Hexo-WordCount plug-in, which is integrated in the new version of Next. Simply install the plug-in and turn on the functionality.

Step 1: Install the word_count plugin and open the terminal in the blog root directory: NPM install hexo-wordcount –save

Step 2: Open post_wordcount in the theme configuration file Blog\themes\next\config.yml:

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true # Word count per article
  min2read: true # Reading time per text
  totalcount: false # Website word count
  separated_meta: true
Copy the code

If you just open up wordcount and min2Read, you’ll find that there are no words like XXX, xx minutes, etc.

Solution: find the \themes\next\layout_macro\post.swig file and add the words “word” and “minute” in the following position.

<span title="{{ __('post.wordcount') }}"> {{wordcount(post.content)}} </span>... <span title="{{ __('post.min2read') }}">
     {{ min2read(post.content) }} 分钟
</span>
Copy the code

Then you can see the display: reading time ≈ 2 minutes, but if you don’t need to display ≈, modify this:

{% if theme.post_wordcount.item_text %}
        <span class="post-meta-item-text"> {{__ ('post.min2read') }} &asymp; </span> {% endif %}Copy the code

Take the one here. Delete.

< I class=”fa fa-smile-o” style=”font-size:28px; color:#FF8247;” >
can be used.

Reference: Hexo adds word count, length of reading, links

(4) Set up friendship links

Add to a topic profile, as shown in the following example:

# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/
Copy the code

For sidebar links, menus, and other ICONS, go to the icon library and copy your favorite icon into your code, or go to: Font Awesome, a great set of icon Font libraries and CSS frameworks.

(5) Set the sidebar avatar

Edit _config.yml of the theme, add the field avatar, and set the value to the link address of the avatar.

Where, the link address of the avatar can be:

Complete Internet urls such as:https://avatars1.githubusercontent.com/u/32269?v=3&s=460
Addresses within the site, for example:
- /uploads/avatar.jpgYou need to place your avatar image in theThe source/uploads/site(You may need to create a new oneuploadsDirectory)
- /images/avatar.jpgYou need to place your avatar image in theThe source/images/themeDirectory.

(6) Set up wechat public account for subscription

Note: This feature was introduced in version 5.0.1. To use this feature make sure you are using a later version of NexT.

At the end of each article, display the QR code of wechat official number, scan it, and easily subscribe to the blog. Save qr code of official account in blog source/uploads/ directory. Then edit the theme configuration file as shown in the following example:

# Wechat Subscriber
wechat_subscriber:
  enabled: falseQcode: /uploads/wechat. JPG descriptionCopy the code

(7) Enable and disable text jitter

1. Start tipping

More and more platforms (wechat public platform, Sina Weibo, Jianshu, Baidu Reward, etc.) support the reward function. As the era of paid reading is getting closer and closer, we hereby add the reward function to support wechat reward and Alipay reward. To enable the function, you only need to fill in the qr code picture address of wechat and Alipay in the subject profile. Example of configuring the tipping function:

Reward_comment: Adhere to original technical sharing, your support will encourage me to continue to create! wechatpay: /path/to/wechat-reward-image alipay: /path/to/alipay-reward-imageCopy the code

My operation: save the qr code in the source/uploads/ directory under the NexT theme, and then configure as follows:

# Reward appreciatesWechatpay: /uploads/wechatpay. JPG Alipay: /uploads/ AlipayCopy the code

2. Disable text jitter

1) Method 1:

Specific it is commented out text jitter function, file path: / themes/next/source/CSS / _common/components/post/post – reward. Styl

#wechat:hover p{animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear; } #alipay:hover p{animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear; }Copy the code

Method 2:

You can add overlapping styles in themes\next\source\ CSS \_custom\custom.styl (recommended) :

#wechat:hover p, # Alipay :hover p {animation: none; }Copy the code

(8) Add RSS subscription function

Really Simple Syndication (RSS) is a kind of content packaging and delivery protocol widely used on the Internet. Is a format for describing synchronized web site content, in XML format. When the content of the website is updated, you can subscribe to the RSS feed to get the updated information in the RSS reader. Most content hosting sites offer RSS feeds to get the latest content.

Here’s how to add an RSS feed to your Hexo blog.

① Run the following command in the root directory of hexo:

npm install hexo-generator-feed --save
Copy the code

/theme/next/_config.yml

feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit:
    content_limit_delim: ' '
Copy the code

Meanings of parameters:

type: TYPE of RSS (atom/rss2) Path: file path. The default is atom.xml/rss2.xmllimit: Displays the number of articles, using 0 orfalseRepresents displays all hub: Content: contains or does not contain content in the RSS file, with three valuestrue/falseThe default value is notfalseContent_limit: Specifies the length of the content as the digest, only above content is set tofalseAnd no custom description appears content_limit_delim: the delimiter of the interception description above, and the interception content is marked by the specified delimiter as the end of the interception. The content before the last separator appears before the specified content length is reached, preventing truncation in the middle.Copy the code

Alternatively, there is an RSS configuration in the _config.yml file of the next theme, which can be set to true.

Once configured, run hexo G to find the atom.xml file in your blog’s Pubilc folder, Then run the Hexo service and you will see the RSS subscription icon on your personal site. Clicking on this icon will bring up the RSS subscription address, which can be added to your RSS reader for viewing the latest blog posts.

Reference: Adding RSS feeds to the Hexo blog

(9) Article word count, reading time on and off, and icon or text

Open the NexT theme configuration file _config.yml and modify:

Wordcount: true min2read: true totalCount: False separated_meta: false # separated_meta: falseCopy the code

Reference: Hexo Next theme opens word count and reading time

In addition, if you want to change “published in”, “classified in” and “reading time” to English, you can open the \themes\next\languages\ zh-hans. yml file and change the value of “visitors” to English as follows:

It was posted at modified posts and posted at sticky posts# published in
  visitors: Visitors # Number of views
  in: In # classification inRead_more: read the full text untitled: unnamed toc_empty: this article does not contain the directory wordcount: wordcount min2read: Reading Duration TotalCount: Site Words Total countCopy the code

Problems encountered

I was pitted by the official document in the configuration process, and I guess the reason is that the official document was not updated in time. Here, I note the pit I encountered:

1) Menu ICONS are displayed abnormally

Problem: The ICONS next to “Home page”, “Category”, “label” and other menus are all displayed as question marks, but normal ICONS are not displayed. My official example configuration is as follows:

menu:
  home: / 
  categories: /categories/  
  tags: /tags/  
  archives: /archives/  
  about: /about/    
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  # good: / 404 / | | the heartbeat

# Enable/Disable menu icons.    
menu_icons:
  enable: true
  home: home
  about: user
  categories: th
  tags: tags
Copy the code

There are a lot of articles on the web about this configuration, but later I found out why, the real configuration is as follows:

menu:
  home: / || home
  archives: /archives || archive
  categories: /categories || th
  tags: /tags || tags
  about: /about || user
  
menu_icons:
  enable: true
Copy the code

The configuration samples with “menu Settings” commented out in the original NexT theme are the correct configurations. OS: The official documentation is really a fraud.

2) Abnormal display of friendship link icon

Problem: The “friendship link” icon is not displayed properly.

Official documents, including many online articles, read as follows:

Social: making: https://github.com/yourname email: mailto:test@gamil.com
social_icons:
  enable: true
  icons_only: false
  transition: falseGitHub address: envelopeCopy the code

However, the correct configuration is as follows, similar to the menu configuration:

Social: making: https://github.com/yourname | | making email: mailto:test@gamil.com || envelope
social_icons:
  enable: true
  icons_only: false
  transition: false
Copy the code

Second, advanced optimization configuration

Add third party service, official website documentation: Third Party Service Integration – NexT Usage documentation.

Review system
Data statistics and analysis
Content sharing service
Search service
Other services

(1) DaoVoice online contact

Reference: Hexo’s Next Theme personalization tutorial: Creating a cool web site (total word count, DaoVoice online contact, etc.)

Register your DaoVoice account first. After registering, you should get an app_id. Then open /themes/next/layout/_partials/head.swig and write the following code:

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r; i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o),m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; a.charset="utf-8"; m.parentNode.insertBefore(a,m)})(window,document,"script", ('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js"."daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}
Copy the code

Then open the theme configuration file and write the following code at the end:

# Online contact 
daovoice: trueDaovoice_app_id: fill in your obtained app_id hereCopy the code

Note 1: After successful installation, you can set the chat window style in the Chat Settings section of the DaoVoice console.

Note 2: My DaoVoice account is registered to use the GitHub account.

(2) Comments Disqus and articles show number of comments – changed to LeanCloud’s Valine comments feature

Disqus official website: disqus.com/ (I use Google account to register and log in)

The NexT theme integrates Disqus comments, which can be found by opening the NexT configuration file _config.yml and searching for “Disqus”.

I started with Disqus comments, Hexo integrated Disqus comments. After registering and configuring the Disqus web site (see the link for details), open the NexT theme config file config.yml.

< 5.1.1, set enable to true under Disqus and provide your shortName, count to specify whether to display the number of comments:

disqus:
  enable: true
  shortname:
  count: true
Copy the code

When both enable and count are set to true, all of your posts will display the number of comments and the Disqus comment plugin will automatically load at the bottom of the page.

< 5.1.1, set the value of disqus_shortname:

disqus_shortname: shortname
Copy the code

Then you can go into the background and set your comments.

— Disqus comments are deprecated. Refer to zhihu article:Hexo (NexT topic) Comment system which is better? – zhihuWith Valine, you can use it without logging in.

By the way, I would like to mention the introduction of several comment systems: Duoshuo and NetEase Cloud have fallen, and secondly, I need to put on record. Disqus, Hypercomments and LiveRe are all foreign, and the loading speed is slow.

Valine setup steps:

You need to register for an account: Leancloud website. Click here to register

After registering, you need to create an app. You can choose any name, and then go to app > Settings > appkey to get your appid and appkey.
Once you have your appID and appKey, open the theme configuration file _config.yml to search for valine and fill in the appID and AppKey.

My configuration:

valine:
 enable: trueAppid: your appID appKey: your appkey notify:false # mail notifier , https://github.com/xCss/Valine/wiki
 verify: false # Verification code
 placeholder: Just go go # comment box placeholder
 avatar: mm # gravatar style   
 guest_info: nick,mail,link # custom comment header
 pageSize: 10 # pagination size
Copy the code

In addition: if there is a security problem, please refer to the online article to add a secure domain name. Go to Leancloud -> Settings -> Security Center -> Web Security Domain and add your domain name.

(1) Valine email reminder

The email reminder function provided by Valine is based on Leancloud’s password reset email reminder. The steps are as follows:

Go to Leancloud -> Select the app where your comment is stored -> Settings -> Mail Template, use the following image to set the email subject for resetting your password > and save:

Change the email subject: new comments have been received in your comments

Changes: Copy the following code into content and change your homepage link to your homepage link.

<p>Hi, {{username}}</p>
<p>You have received a new response to your {{appName}} comment, please check it out:</p>
<p><a href="Your homepage link" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">Check immediately</a></p>
Copy the code

Click the “Save” button
Modify the NexT topic profile to search for valine (quick location) and change notify to true.

After setting:

Making a comment requires validation like the one below
If commenter A leaves an email address when commenting on the article, then other people, such as B, will receive the corresponding email notification when clicking on reply A, indicating:

Note: Clicking View will take you to the main blog of the comment, not to the corresponding comment post.

Matters needing attention:

- Because the "email alert" function uses "Leancloud password reset email alert", only two attributes' nickname 'and' email 'can be passed, so the email alert link' cannot direct to the specified article page '. Please be noted. - Enabling 'email alert' will enable the 'verification code' option by default. - This feature is still in the testing phase, so use it with caution. - Mail alert is currently in the test phase and will only be sent when a child makes a comment to a parent whose mail address existsCopy the code

Reference: NexT Theme set Valine comment system email alert

(2) The number of comments displayed on the article:

** Note that after changing to Valine, the number of comments on the article is not displayed, ** tried to change something to see if it can fix the problem, and found it fixed. Disable disqus comments, that is, set disqus under the topic configuration file to false, and the number of comments can be displayed normally.

(3) Number of articles read (note: using LeanCloud)

① Open the official website of LeanCloud and enter the registration page to register. After activating the mailbox, click the profile picture to enter the console page, create a new application (type: JavaScript SDK), and click The Application to enter;

② Create Class Counter;

③ Modify the configuration file. Edit the _config.yml file in the root directory of the website and add the following:

leancloud_visitors:
  enable: trueApp_id: your app_id app_key: your app_keyCopy the code

Where app_id and app_key are in Settings -> App Key for the app you are creating.

Note: To ensure that the statistics function of the application is only applied to your blog system, you can add your blog domain name in the Web security domain of the Application -> Settings -> Security Center to ensure the security of data invocation.

Reference:

Add article read statistics to the NexT theme
Hexo’s NexT Theme Optimization (4) – Add the number of article visits and site visits
Hexo’s NexT theme personalization: Add article views

(4) Dynamic background, click the heart effect, remove the tag with # at the bottom of the article, change the tag style under the article

Modify the template /themes/next/layout/_macro/post.swig, search rel=”tag”>#, change # to:

<i class="fa fa-tag"></i>
Copy the code

Reference: 2018 latest edition of Hexo blog Next Topic 6.0 configuration optimization

Tag style change, open \themes\next\source\ CSS \_custom\custom.styl and add:

Posts-expand. Post-tags a{box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); transition:.2s ease-out; padding: 3px 5px; margin: 5px; background: #eee; border-bottom: none; border-radius: 10px; &:hover { color: $blue; //text-decoration: underline; }}Copy the code

(5) Change the font of the body and code/change the width of the content area

(1) Change the text and code font style and size

NexT offers a font customization feature starting with version 5.0.1. The following changes will override the “font customization” feature of source/ CSS /_variables/base.styl. Edit the source/ CSS /_variables/custom.styl file under the theme and add two new variables:

// The size of the body font$font-size-base = 16px // Code font size$code-font-size = 14px
Copy the code

$font-family-base = Lato,”PingFang SC”,”Microsoft YaHei”,sans-serif; $font-family-base = Lato,”PingFang SC”,”Microsoft YaHei”,sans-serif.

Note 2: In addition to modifying the source/ CSS /_variables/custom.styl file under the theme, you can also modify the source/ CSS /_variables/base.styl file in the same directory to achieve the same goal. Styl overrides custom. Style changes.

// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 15px
Copy the code

In addition, the code size can also directly change the style file ` ` source/CSS / _common / _vendor/highlight/hilight styl ` :

$code-block
  background: highlight-background
  margin: 20px 0
  padding: 15px
  overflow: auto
  font-size 15px //$code-font-size; // 改 变 这 句 型 color: highlighting foreground line-height:$line-height-code-block
Copy the code

Reference: how to change the code font size? · Issue #306 · IISSNAN/Hexo-Theme-Next

(2) Modify the code area theme

The theme of the new Next was very tight and needed to be changed this way. Yml file for the topic and _config.yml file for the site.

Start by searching for hightlight in the site’s configuration file:

highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
Copy the code

Text autodetection is not enabled by default, so change it to true to make it work. You should know what it means in English. To explain, line_number indicates whether to display code line numbers, auto_detect indicates whether to automatically detect code in unidentified languages, and tab_replace indicates whether to replace tabs with Spaces. Attached is a Chinese explanation of the common configuration items in Hexo’s site and theme profile.

Note: I have set auto_detect to true, but hexo s generates blog times with TypeError: Cannot set property ‘lastIndex’ of undefined, Cannot set property ‘lastIndex’ of undefined Hexo blog (12) using Google – code – prettify code highlighting | masikkk, according to the article, the site configuration file _config. Highlight options of yml auto_detect set to false, the perfect solution. That’s true.

Highlight_theme: normal = highlight_theme: normal

normal
night
night eighties
night blue
night bright
Copy the code

What you choose depends on your personal taste.

(3) Change the width of content area

NexT sets the width of the content as follows:

700px when the screen width is less than 1600px
900px, when the screen width >= 1600px
On mobile devices, the width is adaptive

If you need to change the width of the content, you also need to edit the style file. Edit the source/ CSS /_variables/custom.styl file of the theme and add new variables:

// Make it the width you want$content-desktop = 700px // The width after the window exceeds 1600px$content-desktop-large = 900px
Copy the code

Note that you can use the following method when you’re moving Pisces style, which I did with the following setup:

// You can use the following method when you are using Pisces style, atsource/ CSS / _variables/custom styl added$main-desktop = 1200px
$content-desktop = 950px
Copy the code

Please refer to the official documentation:

Frequently asked Questions – NexT use documentation

(6) Add custom menus

Take the new “Albums” menu as an example: In the blog directory, under the Source folder, create a new folder named Photo. Then, under the photo folder, create a new file named index.md and fill in this file:

-- Title: Photo album Date: 2018-04-16 22:14:07type: "photo"
---
Copy the code

Then open the theme configuration file _config.yml and add in menu:

menu:
  home: / || home
  archives: /archives || archive
  categories: /categories || th
  tags: /tags || tags
  # Added "Album" menuPhoto album/photo: | | cameraCopy the code

Explain: the “photo album” here is a blog shows the menu name, followed by photo to front and index. The md file type values consistent, | | at the back of the menu icon, the icon name comes fromFontAwesome iconIf no icon is configured, the question mark icon is used by default.

Add NetEase Cloud Music, NetEase Cloud posts, cool dynamic backgrounds, and custom styles to create your own custom blog

(7) Add music and video

1. Add single music

Enter the official website of NetEase Cloud Music, search for the song, click the song, click “Generate external chain player” to generate external chain, and use it directly. The iframe plug-in can set the width and height parameters in the code. Auto indicates whether to set automatic playback, auto 0 indicates manual playback, and auto 1 indicates automatic playback. Flash cannot set its own parameters.

Autoplay examples:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=350 height=86 src="//music.163.com/outchain/player?type=2&id=185678&auto=0&height=66"></iframe>
Copy the code

2. Add playlists

If you want to join the playlist, you need to find the playlist or create your own playlist, click the playlist after hot, find and click “generate external chain player”, the rest of the operation is the same as above. However, if the playlist changes, the songs in the outer chain will also change. Example:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=530 height=450 src="//music.163.com/outchain/player?type=0&id=2637966813&auto=0&height=430"></iframe>
Copy the code

3) Add videos

Open video sites, such as Youku, YouTube, etc. Take Youku as an example, after opening a video, click “Share” and then copy the IFrame code and paste it into the Markdown article. Example:

<iframe height=498 width=510 src='http://player.youku.com/embed/XMTU0ODEwMzM3Ng==' frameborder=0 'allowfullscreen'></iframe>
Copy the code

(8) Set the title style (light blue)

Go to the theme directory hexo themes next source CSS _common Components post modify the post.sty file and add the following code to the end of the configuration. This file is the stylesheet for the blog post.

/* Add the following CSS code to modify the blog title style */.page-post-detail. post-title {font-size: 26px; text-align: center; word-break:break-word;
  font-weight: $posts-expand-title-font-weight
  background-color: #b9d3ee;
  border-radius:.3em;
  line-height:1em;
  padding-bottom:.12em;
  padding-top:.12em;
  box-shadow:2px 2px 7px #9fb6cd;
  +mobile() { font-size: 22px; }} /* Add the CSS code above to modify the blog title style */ @import"post-expand";
@import "post-collapse";
@import "post-type";
@import "post-title";
Copy the code

Note: if you want to modify the home page title style, you can use the bar.page-post-detailGet rid of.

Reference: Hexo framework is customized based on the Next theme (various optimizations, very comprehensive)

(9) Set up the cover picture of the article

If you insert only a local image as the cover of the article, that is, the cover image of the article will be displayed on the front page of the blog, but will not be displayed after entering the details page of the article.

Perform the following operations:

1) Modify the \themes\next\layout\_macro\post.swing file. Copy the following code:

{% if post.summary_img  %}
  <div class="out-img-topic">
    <img src={{ post.summary_img }} class="img-topic">
  </div>
{% endif %}
Copy the code

Add to the location shown below:

2) Add a field attribute to the new article: SUMMARy_img. The value of summary_img is the path to the image, as in:

Content: [CSS] Comments: false summary_img: /images/css-hack-1.png ---Copy the code

You can also leave the summary_img image path alone and not show the cover art.

PS: Here is a note, test, the image folder can only be created in the newsourceDirectory.

Reference article:

Hexo image insert
Hexo-next builds personal blog (V) — Inserts cover

(10) Web page loading progress bar

Open the /themes/next/layout/_partials/head.swig file and add the following code to the end of the file:

<! -- Webloader --> <script SRC ="https://neveryu.github.io/js/src/pace.min.js"></script>
Copy the code

Then, open the /themes/source/ CSS /_custom/custom.styl file and add the following code at the end:

There is already an editing file, you should be editing the filein the templates directory */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #1e92fb;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92;Opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } .pace .pace-activity { display: block; position: fixed; z-index: 2000; top: 15px; right: 15px; width: 14px; height: 14px; border: solid 2px transparent; border-top-color:#e90f92;
  border-left-color: #e90f92;border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite; } @-webkit-keyframes pace-spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes pace-spinner { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes pace-spinner { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes pace-spinner { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes pace-spinner { 0% { transform: rotate(0deg); transform: rotate(0deg); } 100% { transform: rotate(360deg); transform: rotate(360deg); }} /* Page loader bar END*/Copy the code

Reference: Hexo – NexT to build personal Blog (5) | Never_yu ‘s Blog

In addition, you can also see a method, see hexo-Next to configure awesome Web effects – simple book

Edit the theme profile to search for pace, change the value to true, and choose a style you like.

# Progress bar in the top during page loading.
pace: ture
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal
Copy the code

(11) Bottom: Show (or hide) the bottom “strong drive” and version

Open themes/next/_config.yml file and set powered to true to display “strong drive”; Set enable to true to display version information.

Specify date when the site was setup. # If not defined, current year will be used. 2018 # Icon between year and copyright info. # icon: user icon: sun-o # If not defined, will be used `author` from Hexo main config. copyright: # ------------------------------------------------------------- # Hexo link (Powered by Hexo).- powered: true
+ powered: false
  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
- enable: true
+ enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true
Copy the code

Reference: Hexo+NexT create a cool blog – Nuggets (various custom optimizations, very comprehensive)

If you need to modify it, refer to section (12) below.

(12) Bottom: set the site establishment time and author name

(1) Set the establishment time of the site

since: 2013
Copy the code

In which, the website page will be displayed automatically according to the current year after -. Reference: Setting site build time · IISSNan /hexo-theme-next Wiki

(2) Modify the author name after the site time

Find the footer.swig file under Themes \next\layout\_partials\ and open it to find the following statement:

The first box is the name of the author after the site time at the bottom. If you want to add something, be sure to write it outside the double braces. For example: XXX {{config.author}}, of course, you can delete variables if you want to change completely, depending on personal preference.

(3) Add others along the way — modify the bottom “strong drive” and version information

The second box is the Hexo link “driven by Hexo” at the bottom, which should be deleted first to prevent the jump. If you want to jump, of course, you can also write your own address. As for Chinese, it will be handled later. After removing the tag in the next version I’m using, the result is as follows:

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '') }}{#
#}</div>
{% endif %}
Copy the code

The third box, is at the bottom of the change “theme – Next. XX”, this is directly behind – < / div > before delete, and delete after behind on a line – can add what you want to display, don’t show sensitive information yo, please self-respect. Delete in the next version I’m using – the following corresponding code results in the following:

{% if theme.footer.theme.enable %}
  <div class="theme-info"> {#
  #}{{ __('footer.theme') }} &mdash; </div>
{% endif %}
Copy the code

Notice what I have here. You can add the content you want to add, for example:

<a herf="https://pages.github.com/">Hosted By GitHub Page</a>
Copy the code

Next, process the rest of the Chinese information. Find the language file zh-hans. yml under themes\next\languages\ and open it, as shown in the picture below:

See, this is the pass value pass, you want to display what in this wantonly change it. In fact, in the second box, you can change the value, do not accept the way the value, completely rewrite. I don’t recommend doing that, because if you want to pass these values to a subsequent page, you can pass them to the footer. If you write the value to the footer file, you may not need to pass the value to a subsequent page, but the value is empty or the same as the original, which can be embarrassing. So let’s do it that way.

Reference: Hexo Next logo bar changes and notes at the bottom of the powered-by bar (with official documentation, benefit chain at the end) – Nuggets

(13) Bottom: Add the running time of the website

In themes/layout/_parrials/footer.swing add:

<! <span id="sitetime"> <br></span> <script language="javascript"> function sitetime () window.setTimeout("siteTime()", 1000); var seconds = 1000 var minutes = seconds * 60 var hours = minutes * 60 var days = hours * 24 var years = days * 365 var today = new Date() var todayYear = today.getFullYear() var todayMonth = today.getMonth() var todayDate = today.getDate()  var todayHour = today.getHours() var todayMinute = today.getMinutes() var todaySecond = today.getSeconds() var t1 = Date. The UTC (2017,4,18,11,00,00) var t2 = Date. The UTC (todayYear todayMonth, todayDate, todayHour, todayMinute, todaySecond) var diff = t2-t1 var diffYears = Math.floor(diff/years) var diffDays = Math.floor((diff/days)-diffYears*365) var diffHours =  Math.floor((diff-(diffYears*365+diffDays)*days)/hours) var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes) var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds) Document.getelementbyid ("sitetime"). InnerHTML =" This site is running "+diffYears+" year "+diffDays+" days "+diffHours+" hours "+diffMinutes+" minutes "+diffSeconds+"} siteTime() </script>Copy the code

Reference: Settings related to Hexo and Next themes (continuously updated) – Simple book

(14) Bottom: add the number of visitors and visits (the use of non-garlic word statistics), the total number of words

(1) Add the number of people and visits

No garlic child is known as minimalist web counter, in fact, only need two steps to complete statistics, respectively for the introduction of no garlic child JS and display statistics, statistics for the number of visits and visitors.

① Introduce non-garlic child JS

Open the \themes\next\layout_partials\footer.swig file and add the following code at the top:

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
Copy the code

② Show statistics

Traffic statistics:

Algorithm A: PV method, a single user clicks n articles continuously, recording n visits.

<span id="busuanzi_container_site_pv">Total Site visits<span id="busuanzi_value_site_pv"></span>time</span>
Copy the code

Number of visitors:

Algorithm B: UV method, a single user clicks n articles continuously, only one visitor number is recorded.

<span id="busuanzi_container_site_uv">Number of Visitors to this site<span id="busuanzi_value_site_uv"></span>m</span>
Copy the code

Then add the statistics code to display in the appropriate place (same file above), which I did in the following location:

<! -->
<div>
	<i class="fa fa-user-md"></i>
	<span id="busuanzi_container_site_uv">Number of visitors:<span id="busuanzi_value_site_uv"></span>
	</span>&nbsp; |&nbsp;<i class="fa fa-eye"></i>
	<span id="busuanzi_container_site_pv">Total visitors:<span id="busuanzi_value_site_pv"></span>
	</span>&nbsp; |&nbsp;<! Add total word count to blog -->
	<i class="fa fa-pencil"></i>
	<span class="post-count">{{totalcount(site)}</span>
</div>
	
{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
Copy the code

Note: the number of visitors and page views were added in this way before, but it was later found that the blog did not show them. It was speculated that the service provider might be closed or something else.

Reference:

Hexo+Github blog added a small feature to add statistics
Hexo builds his own blog

(2) Add the total number of words in the blog

To add the word count for a single article, refer to the section “(3) Add word count and Reading Duration (Next theme has been integrated)”.

Add the total number of words at the bottom, similar method. NPM install hexo-wordcount –save, open /themes/next/layout/_partials/footer.swig add the corresponding code in the appropriate place, mine and don’t count the words together.

Added elsewhere, see: Hexo-Next Config Awesome Web effects – Simple book

!!!!!!!!! Finally, according to the modified results in Sections (11), (12), (13) and (14) :

(15) Set up encrypted access to articles

Open themes/next/layout/_partials/head.swig and insert the code before ‘ ‘:

<script>
    (function(){
        if('{{ page.password }}') {if (prompt('Please enter your password')! = ='{{ page.password }}'){
                alert('Password error'); history.back(); }}}) ();</script>
Copy the code

Password: XXX

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---
Copy the code

Reference: the most comprehensive Hexo blog set up + subject + plug-in configuration optimization, common operations + error analysis | met Simon (very comprehensive ~)

(16) Add “end of article” mark at the end of the article/add copyright information at the end of the article

Reference: Hexo+NexT create a cool blog – Nuggets

(17) Cancel the automatic numbering and cancellation of the title of the article catalog

(1) Cancel the automatic numbering of the title of the article catalog

Modify the NexT theme configuration file _config.yml to search for number and change the value to false.

(2) Cancel the directory

To cancel the directory altogether, modify the NexT theme configuration file _config.yml, search for toc:, and change the enable value under TOC to false.

toc:
  enable: false

  number: false
Copy the code

Reference: Hexo’s NexT topic, how do I unnumber the title automatically from the article table of Contents?

Fork me on Github in the upper right or left corner

Click here or here to pick your favorite style and copy the code. For example, the one I used in the upper right corner, copy the following code:

Then paste the code you just copied into themes/next/layout/_layout.swig (under

) and change href to your GitHub address.

Reference: Hexo’s Next Topic personalization configuration tutorial – SegmentFault Think No

(19) Bottom revision: add customized copyright information, number of visitors/times, website running time, modify the heart at the bottom

Note: the modifications made in “(12) Setting the site establishment time” and “(13) adding the site running time” have been replaced; And hide the bottom “strong drive” and version content (see section 11 of this article for how to hide).

(1) Add custom copyright information at the bottom

Note: as above, the left side is the previous one and the right side is the modified one.

Open the footer. Swig file in the themes next layout _partials folder. Now the modified code is abstracted as follows for easy copying:

<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#
#}<font color=black face=STLiti>Copyright &nbsp;</font><font color=black>&copy;</font>{% if theme.footer.since and theme.footer.since ! = current %}<font color=black face=STLiti>{{ theme.footer.since }} - </font>{% endif %}{#
#}<font color=black face=STLiti><span itemprop="copyrightYear">{{ current }}</span></font>
  <span class="with-love">
    <i class="fa fa-{{ theme.footer.icon }}"></i>
  </span>
  <span class="author" itemprop="copyrightHolder" style="font-family:STLiti; color:black;">{{ theme.footer.copyright || config.author }} . All Rights Reserved.</span>

  {% if theme.post_wordcount.totalcount %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    {% if theme.post_wordcount.item_text %}
      <span class="post-meta-item-text">{{ __('post.totalcount') }}&#58;</span>
    {% endif %}
    <span title="{{ __('post.totalcount') }}">{totalcount(site, '0,0.0a')}}{# #}</span>
  {% endif %}
</div>
Copy the code

This is the effect:

The font used here is “Chinese clerical script”. You can also change it to another font by changing face=STLiti. It is important to note that when you use a “Chinese clerical script” font, it will not be displayed on a computer or mobile phone that does not have the font installed. On my own, this font style is not displayed when I visit it on my mobile phone.

** But if you want someone to display this font style on a computer or mobile phone that does not have it installed, is there any way? ** The answer is yes. Just place the font TTF file in the NexT theme source, such as themes NexT source images, then open the themes NexT source CSS _custom custom.styl file and add:

Background-color: RGB (255,255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); src: url("/images/STLITI.TTF"); }Copy the code

Can.

Here, the computer installed Office, will automatically install some fonts, including “Chinese clerical script”. How to install fonts: Download and install custom fonts for use in Office – Office support

Method 1: Double-click the downloaded TTF file and click Install.

Method 2: Copy the downloaded TTF file and paste it intoC:\Windows\FontsFonts are automatically installed.

Uninstall Fonts: go to C:\Windows\Fonts and select the font to uninstall.

(2) Add the number of visitors, person-times, the total number of words in the whole site, and the running time of the website at the bottom

Open the footer.swig file under themes\next\layout\_partials\ folder and add the following contents:

<! -- Here is the station construction time --><script>
    var now = new Date(a);function createtime() { 
    var grt= new Date("04/17/2017 20:01:01");
    now.setTime(now.getTime()+250); 
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
    if(String(hnum).length ==1 ){hnum = "0"+ hnum; } minutes = (now - grt ) /1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0"+ mnum; } seconds = (now - grt ) /1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0"+ snum; }document.getElementById("timeDate").innerHTML =dnum+"  Day. ""; 
    document.getElementById("times").innerHTML = hnum + "  When" + mnum + "  Points" + snum + "  SEC. ""; 
} 
setInterval("createtime()".250);
</script>
Copy the code

Open the busuanzi-counter.swig in the themes\next\layout\_third-party\analytics\ folder, delete all the contents and paste the following code:

{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {% if theme.busuanzi_count.total_visitors %}
    <font color=DarkSlateGray face=STLiti><span class="site-uv" title="Number of visitors">
      <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>m</span><span class="post-meta-divider">|</span></font>
    <font color=DarkSlateGray face=STLiti>
    <span title="Total word count"><i class="fa fa-edit"></i>&ensp;<span class="post-count">{{ totalcount(site) }}</span>Word,</span>
    <span id="timeDate" title="Website uptime">Loading days...</span><span id="times" title="Website uptime">Load-time seconds...</span><span class="post-meta-divider">|</span>
    </font>
  {% endif %}

  {% if theme.busuanzi_count.total_views %}
    <font color=DarkSlateGray face=STLiti><span class="site-pv" title="Total Visitors">
      <i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>time</span></font>
  {% endif %}
</div>
{% endif %}
Copy the code

Note: As above, “Chinese clerical script” is used here.

Finally, open the next theme configuration file _config.yml to find busuanzi_count and change it to the following:

Busuanzi_count: enable: true total_visitors: true total_visitors_icon: user # total_views: true total_views_icon: eye post_views: false post_views_icon: eyeCopy the code

Remember to set enable to true.

(3) Record information

Open the /themes/next/layout/_layout.swig file and add the following code:

Note: As shown above, the previous code is on the left and the added code is on the right.

Now put the added code into the following, aspect copy:

<div class="footer-inner">
    {% include '_partials/footer.swig' %}
    {% include '_third-party/analytics/analytics-with-widget.swig' %}
    <! -- Custom record and other ↓-->

    <div style="font-family:STLiti; display:inline-block; height:20px; line-height:20px;">
        <a target="_blank" href="" ><img src="/images/gov.png" style="float:left;"/>Jiangxi public security number XXXXXXXXXXXX</a>
        <span class="post-meta-divider" style="color: #555;">|</span><span><a href="http://www.miitbeian.gov.cn" target="_blank">Jiangxi ICP prepared XXXXX number</a></sapn>
    </div> 

    {% block footer %}{% endblock %}
</div>
Copy the code

Among them, the picture of the beginning of the record information is stored\themes\next\source\images\Under the folder.

Effect:

!!!!!!!!! The final bottom of the blog looks like this:

If there is no record and you do not want to display the record information at the bottom, you can consider displaying other information, such as adding the following code in the same position:

<! -- Copyright and other custom ↓-->

<div style="font-family:Courier New; display:inline-block; height:20px; line-height:20px;">
    Powered by <a target="_blank" href="https://hexo.io/zh-cn/index.html">Hexo</a>,Theme by 
    <a target="_blank" href="https://theme-next.iissnan.com/">NexT</a>. 
    Hosted by <a target="_blank" href="https://pages.github.com/">GitHub Page</a>
</div>
Copy the code

!!!!!!!!! Finally the bottom of the blog looks like this:

(4) Modify the heart at the bottom

Open the \themes\next\layout\_partials\footer.swig file and modify:

<span class="with-love">
    <i class="fa fa-{{ theme.footer.icon }}"></i>
</span>
Copy the code

Is amended as:

<span class="with-love" id="animate" style="font-size: 13px">
	<i class="fa fa-heart"></i>
</span>
Copy the code

Then open the \themes\next\source\ CSS \_common\ Components \footer\footer.styl file again and add or modify it as follows:

If hexo-config('footer.icon.animated') {#animate {animation: iconAnimate 1.88s ease-in infinite; } } .with-love { display: inline-block; margin: 0 5px; color: #9a6eac; }Copy the code

(20) Add social links and protocols on the left

Open the next theme configuration file _config.yml, find Social_icons and set icons_only and Transition to true:

social_icons:
  enable: true
  icons_only: true # false
  transition: true  # false
Copy the code

Then the Hexo S preview can see:

Open the sidebar. Swig file under themes\next\layout\_macro\ and add code in the following two places:

Note: as above, the left side is the previous one and the right side is the modified one.

First, the two changes are abstracted as follows:

<span class="links-of-author-item">
    <! --Add the following line to hover text-->
    {% set sidebarURL = link.split('||')[0] | trim %} 
    <a href="{{ link.split('||')[0] | trim }}" target="_blank" title="{{ name + ' &rarr; ' + sidebarURL }}">
Copy the code

{% endif %}

<! --Add the following section, creative Commons protocol-->
{% if theme.sidebar.copyright %}
<div class="cc-license motion-element" itemprop="license"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="external nofollow noopener noreferrer" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a></div>
{% endif %}

{# Blogroll #}
Copy the code

The SVG file is stored under themes next source images.

Effect:

(21) Modification of page style, such as link color, back to top button style, bottom page number, etc

Open the custom. Styl file under \themes\next\source\ CSS \_custom\ and add the following contents.

// Change the color of the link. Post-body a {color:$orange;
  text-decoration: none;
  border-bottom: 1;
  &:hover {
    color: $blue; //text-decoration: underline; Back-to-top :hover {color: RGB (136, 255, 13); Background: rgba(0, 0, 0, 0.75); //black} // Article ' 'code block top style. Padding: 0.5 em. background:#eee;
    border-bottom: 1px solid #e9e9e9;} .highlight figcaption a { color: rgb(80, 115, 184); } // change the style of code in the article code {color:#c7254e; background:#f9f2f4; border:1px solid #d6d6d6; }// [Read More] :hover {color: RGB (136, 255, 13)! important; Background: rgba(0, 0, 0, 0.75); Pagination. Page -number.current {border-radius: 100%; Background-color: rgba(100, 100, 100, 0.75); Pagination. Prev,.pagination. Next,.pagination. Page -number {margin-bottom: 10px; border: none; color: rgb(1, 1, 1); } // page-number:active{color: RGB (136, 255, 13); border-radius: 100%; //background: rgba(255, 0, 100, 0.75); // fuchsia background-color: rgba(0, 0, 0, 0.75); //black }Copy the code

Many Settings about the page can be set here.

In addition to the above, I set many other styles, such as the bottom page number, the page loading bar, the back to the top button, the left sidebar, and so on. See custom. Styl for Vincentqyw, custom. Styl for Lruihao.

In addition, I have seen other people’s blog on the Internet has a page effect – between the articles, as well as between the articles and the following pages between the bar, this effect style has been trying to get, think that better look. I later contacted the blogger and asked about it, and he said he used the latest version of the NexT theme, which is the default. Then I went to the NexT — Theme for Hexo blog and found that it was the same effect (the latest source: hexo-theme-next), which seems to be the new NexT default. Front end I can only a little, won’t change ah, can only so, later have time to explore it ~

Now that you know, just set scheme to Gemini in the topic configuration file.

(22) Change the blog background image

Open the custom. Styl file in the themes next source CSS _custom folder and add the following code:

// body {background-image: url(/images/ background-.jpg); background-attachment: fixed; Fixed,scroll,inherit background-repeat: no-repeat; // If the background image is not large enough to cover the screen, repeat it, change to no-repeat, background-size: cover; // contain // background-position: bottom; +mobile(){//background-position: 0%-20%; https://i.loli.net/2018/12/29/5c270a0523154.jpg //https://i.loli.net/2018/12/29/5c270fc2bfcad.png background-image: url(https://ziyuan.lruihao.cn/images/bg_cell.png); background-size: cover; }}Copy the code

The background image is the URL after background-image, which is stored in the folder \themes\next\source\images\.

(23) Set the blog icon favicon

The first step: Start with an image with a common format name (.jpg,.png, etc.) as an alternative favicon. Choose a Favicon making site to complete your favicon making, such as Favicon from Pics, Bitworm, Favicon Making – online tool, preferably set to 32×32. In addition to making your own, of course, you can also find some websites, such as EasyIcon.

The second step: will the favicon. Ico file on the web site under the root directory of the source folder, such as the/themes/next/source/images directory, and modify the configuration file:

Favicon: small: /images/ favicon-16x16-Next-.png # next icon default next apple_touch_icon: /images/ favicon-16x16-Next-.png # next icon default next apple_touch_icon: /images/apple-touch-icon-next. PNG # Apple Touch icon Safari_pinned_tab: /images/logo.svg # Safari fixed tagCopy the code

As you can see, there are four effects, usually we just need to change medium to our own icon path. Then refresh the site to see the results. Effect:

Hexo6.0 build personal blog (Advanced)

(24) Display Comments or Comments under the title of the article

Open the: themes\next\layout\_macro\post.swig file, search , and add the following items under the span TAB:

<span class="post-meta-item-text">Comment on:</span>
Copy the code

Or :(see if you want Chinese or English words displayed)

<span class="post-meta-item-text">Comments:</span>
Copy the code

Since I’m using valine comments, I could have just added the code below valine.

{% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<span class="post-comments-count">
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
    </span>
    <span class="post-meta-item-text">Comments:</span>
    <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
        <span class="post-comments-count valine-comment-count" data-xid="{{ url_for(post.path) }}" itemprop="commentCount"></span>
    </a>
</span>
{% endif %}
Copy the code

However, it is still recommended to add the tags under the search, in case other comment system does not show in the future.

(25) Set the publication, classification, number of visits, word count and reading time under the title of the article in English

Open \themes\ Next \languages\ zh-hans. yml and change the corresponding place under post to the following:

Post: created: created # created: modified: modified # updated: sticky: capped: posted on # published in visitors: Untitled: unnamed toc_empty: this article does not contain a directory wordcount: Words # Count min2read: Reading Time # TotalCount: Site Words totalcountCopy the code

Note: # is a comment.

(26) Set article encryption

Reference: the next topic to add password access | YouForever, using plug-in hexo – blog – encrypt address: github.com/MikeCoder/h…

(99) Third party service integration more comprehensive DEMO appreciation

Being open

“About” page in particular there is a NetEase music play, good, in addition, the blog at the bottom of the optimization is good, I plan to use for reference.
Vincent Qin
wustxiao’s blog
Zack’s Blog
Enter the blog of top students

Third, blog speed /SEO optimization

(1) SEO

Reference: Hexo blog SEO optimization

(2) Speed optimization

Note: Regarding access speed optimization, I have not practiced…

Reference:

Hexo Blog – Next performance optimization way | Waber ‘s Blog
Speed optimization of Hexo blog – Jane Book
Hexo Next theme Depth optimization (VI), using the Hexo-Neat plugin to compress pages, greatly improving page performance and response speed

Fourth, theme production

Make Hexo themes from scratch
Write a Hexo theme of your own

Appendix – Configuration file Description

The various common configurations for Hexo are set in the _config.yml file under the root line of the blog. The following describes some common configuration items:

Subtitle: Ruikye's personal blog # blog subtitle: Ruikye's personal blog # Blog subtitle: Description: mobile development technology sharing blog # The signature of the blog will now appear at the bottom of the blog. 2014 nO rain night Email: [email protected] # optional language: zh-cn # # Writing ... Line_number: false # Whether to display line numbers tab_replace: true # Whether to replace tabs with Spaces... # Pagination ## Set per_page to 0 to disable Pagination: 1 Pagination_dir: Page # Pagination directory... # Extensions ## Plugins: https://github.com/hexojs/hexo/wiki/Plugins ## Themes: https://github.com/hexojs/hexo/wiki/Themes theme: The theme is installed in the themes/ directory, and the value here is the name of the theme folder exclude_generator: plugins: - hexo - generator - feed #, enable the plugin installation, here is to start the RSS feed plug-in # Deployment # # Docs: http://hexo.io/docs/deployment.html deploy: Type: type of lot # blog hosting server repository: https://github.com/rakkang/rakkang.github.io.git # brach managed server address: Master # the branch of code used by blogsCopy the code

In addition to the general configuration of Hexo, each theme has its own configuration file. The configuration file of the theme is located in themes/[XXX]/_config.yml, for example, themes/ bS-light /_config.yml.

Menu: Homepage: / # Format is :[display TAB]:[index directory] Archive: / Archives # Widgets on the right of the article: # search/tag/category/recent_posts/tagcloud -- -- -- -- > this is bs - light available widgets - search # # search box - recent_posts recently published articles - category # Archive directory - Tagcloud # Collection of tags for articles # if used in *.md of articles<! -- more -->The following content is not displayed on the first page, but a link to read the full text that can be changed # ex: More, View the original text etc. # key weibo/twitter/google/github/stackoverflow/rss # value url # e.g github: https://github.com/DaiXiang github: https://github.com/rakkang rss: /atom.xml ... Cnzz_analytics: true # cnzz_analytics: true # google_analytics: # RSS: # comment_provider: # Facebook comment # Facebook commentCopy the code

Part ii: NexT Topic configuration and optimization guide

Writing in the front

1. Basic topic configuration

(0) Theme setting/dynamic background/display current browsing progress

(1) Setting of “category” and “label” for the article

(2) Add local add search menu

(3) Add word count and reading time (next theme has been integrated)

(4) Set up friendship links

(5) Set the sidebar avatar

(6) Set up wechat public account for subscription

(7) Enable and disable text jitter

(8) Add RSS subscription function

(9) Article word count, reading time on and off, and icon or text

Problems encountered

1) Menu ICONS are displayed abnormally

2) Abnormal display of friendship link icon

Second, advanced optimization configuration

(1) DaoVoice online contact

(2) Comments Disqus and articles show number of comments – changed to LeanCloud’s Valine comments feature

(3) Number of articles read (note: using LeanCloud)

(4) Dynamic background, click the heart effect, remove the tag with # at the bottom of the article, change the tag style under the article

(5) Change the font of the body and code/change the width of the content area

(6) Add custom menus

(7) Add music and video

(8) Set the title style (light blue)

(9) Set up the cover picture of the article

(10) Web page loading progress bar

(11) Bottom: Show (or hide) the bottom “strong drive” and version

(12) Bottom: set the site establishment time and author name

(13) Bottom: Add the running time of the website

(14) Bottom: add the number of visitors and visits (the use of non-garlic word statistics), the total number of words

(15) Set up encrypted access to articles

(16) Add “end of article” mark at the end of the article/add copyright information at the end of the article

(17) Cancel the automatic numbering and cancellation of the title of the article catalog

Fork me on Github in the upper right or left corner

(19) Bottom revision: add customized copyright information, number of visitors/times, website running time, modify the heart at the bottom

(20) Add social links and protocols on the left

(21) Modification of page style, such as link color, back to top button style, bottom page number, etc

(22) Change the blog background image

(23) Set the blog icon favicon

(24) Display Comments or Comments under the title of the article

(25) Set the publication, classification, number of visits, word count and reading time under the title of the article in English

(26) Set article encryption

(99) Third party service integration more comprehensive DEMO appreciation

Third, blog speed /SEO optimization

(1) SEO

(2) Speed optimization

Fourth, theme production

Appendix – Configuration file Description

Related Posts

A brief introduction to 2022 Front-end technology Trends

Front end grab rice bowl series in-depth Nginx

NPM install, which you may not know but come into contact with every day