Hexo+NexT creates a cool blog

Writing in the front

This article is mainly about the NexT theme configuration and page style optimization, referring to many big names’ articles and configuration files.

The articles referenced in this article are directly linked to the original text or annotated with the source, but Google references too many of them, so please point out any omissions.

Early entire blog optimization configuration process collected a lot of good blog, you can post a friendship link you can go to see.

The content of this article will be gradually completed in the subsequent optimization:

~~New date: 2018-10-16~~
~~Last Update: 2018-10-17~~
Last Update: 2018-10-19

Thank you bosses

This article has absorbed the content of the following big guys, it is easy to build a blog, the follow-up supplementary functions, optimization is extremely tedious, the following several articles are more comprehensive, have great reference significance:

Create an in-depth optimization for Hexo+NexT+GitHubPages
Building a Personal Blog based on Hexo — Advanced (From Getting Started to Getting Buried)
Hexo Next theme setup and refinement

The basic definition

There are two main configuration files in Hexo, both named _config.yml. One, located at the root of the site, contains the configuration of Hexo itself; The other is in the topic directory, and this configuration is provided by the topic author to configure topic-related options.

For ease of description, the former is referred to as a site profile and the latter as a topic profile in the following notes.

~/hexo/_config.yml
Copy the code

~/hexo/themes/next/_config.yml
Copy the code

Blog set up

For details on how to build a blog, see this post.

Elementary Basic functions

Site profile

The most authoritative one is, of course, the official Hexo documentation

Here’s the configuration file I’m using:

## Site SettingsDescription: Nobody keywords: Author: Sun XY language: zh-Hans Timezone:# Theme Settings
theme: next

# Blog address
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://sun-xyu.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing essay Settings
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ' '
  per_page: 5
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map: 

Date format/time format
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# pagination Settings
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

#RSS feeds are set
plugin: hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20


# Publish deployment address Settings
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://gitee.com/Sun_xy/blog.git
  branch: master

# Blog search feature configuration
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# Article recommended feature, need to install plug-in
recommended_posts:
  server: https://api.truelaurel.com # back-end recommended server address
  timeoutInMillis: 10000 If the service duration exceeds this value, the offline recommendation mode will be used
  internalLinks: 3 # Number of internal articles
  externalLinks: 1 # Number of external articles
  fixedNumber: false
  autoDisplay: false # Automatically displays recommended articles at the bottom of articlesExcludePattern: [] titleHtml: <h1># Customize the title
Copy the code

Topic profile

The most authoritative one is, of course, the NexT usage documentation

Here’s the configuration file I’m using:

The configuration file reference [reuixiy] (https://reuixiy.github.io/) bosses configuration

# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Theme Core Configuration Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

# Theme update Settings related, refer to:
# https://github.com/iissnan/hexo-theme-next/issues/328
override: false

# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Site Information Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

# site icon, go to https://realfavicongenerator.net directly
Download the package, unzip it, copy and paste it
# suggest placing it in hexo-site/source/images/
This will avoid the trouble of updating the NexT theme
Remember to change the file name slightly to make it the same as below
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

# Set default keywords (Use a comma to separate)
# site keywords, conducive to SEO about, remember to use English comma separatedKeywords: Hexo, Blog, Life, Technology, code# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
# RSS, section site configuration file in the comments configuration
# you don't need to add anything here
rss: /atom.xml

The # footer
footer:
  # Year of establishment
  since: 2018

  The # year icon is font-family Awesome
  Entangled with # to https://fontawesome.com/v4.7.0/
  # change the name of the icon. The following Settings are the same
  icon: sun-o

   If not, the author name of the site configuration file is used by default
  copyright:
  # -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
  # Whether to display Hexo link
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true
  # -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
  # Any custom text can be defined here.
  # custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>

# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# SEO Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
canonical: true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: false

# If true, will add site-subtitle to index page, added in main hexo config.
# subtitle: Subtitle
index_with_subtitle: false


# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Menu Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# set menu | | menu icon set (icon above said, don't repeat)
Item newlines can change the display order
# If this item is preceded by.menu
# the solution: edit ~ / blog/themes/next/languages under the corresponding files
For example, add a "message" menu. The language of the site configuration file is zh-Hans
# edit zh-hans. yml and add a message to menu:
# note the space, and the symbol: English characters!
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  # schedule: /schedule/ || calendar
  # sitemap: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

Whether to enable the menu icon
menu_icons:
  enable: true


# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Scheme Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
Go to the link in README to see what it looks like
# https://github.com/iissnan/hexo-theme-next#live-preview
# Schemes
scheme: Muse
# scheme: Mist
# scheme: Pisces
# scheme: Gemini


# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Sidebar Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# sidebar social links Settings, similar to the menu above, remember to remove the # in front of it to work
social:
  GitHub: https://github.com/Sun-xyu || github
  E-Mail: mailto:[email protected] || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname? call|chat || skype

# Sidebar social link icon Settings
social_icons:
  enable: true
  icons_only: true
  transition: true

# Blog rolls
# Sidebar friend chain SettingsLinks_icon: list links_title: recent articles links_layout: block#links_layout: inlineLinks: Hexo + NexT to create a cool blog: https://sun-xyu.github.io/2018/10/16/hexo_next_blog/ Hexo build personal blog: https://sun-xyu.github.io/2018/10/14/hexo_create_blog/# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# Sidebar avatar Settings
# hexo-site/source/uploads/
This will avoid the trouble of updating the NexT theme
avatar: /images/xiaorenwu.jpg 

# sidebar post directory Settings
toc:
  enable: true

  # Add numbers automatically
  number: true

  If the title is too long, move it to the next line
  You may need to add code to custom.styl
  wrap: false

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  # the sidebar position setting, usable value: left | right (applies only to Pisces and Gemini design format!)
  # position: left
  position: right

  # Sidebar Display, available value (only for Muse | Mist):
  # Sidebar display mode, POST means only click into one article
  The sidebar will only pop up if the article has a table of contents
  # - post expand on posts automatically. Default.
  # - always expand for all pages automatically
  # - hide expand only when click on the sidebar toggle icon.
  # - remove Totally remove sidebar including sidebar toggle.
  display: post
  #display: always
  #display: hide
  #display: remove

  # Only for Pisces and Gemini layout design!
  offset: 12

  # Only for Pisces and Gemini design format
  b2t: false

  # Display reading percentage in back to top button
  scrollpercent: true

  # Enable sidebar on narrow view (only for Muse | Mist).
  # Mobile display sidebar, only for Muse and Mist designs!
  onmobile: true


# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Post Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

# Automatically scroll page to section which is under <! -- more --> mark.
# Click on [Read More] to scroll to <! -- more --> mark
scroll_to_more: false

# Automatically saving scroll position on each post/page in cookies.
# Use cookies to save browsing location information, meaning that after opening this page again
The # page automatically scrolls to where it was last time, unless the reader clears browser cookies
save_scroll: false

# Automatically excerpt description in homepage as preamble text.
# Use the description text in front-matter for each article as the summary of the article displayed on the page
excerpt_description: false

# Automatically Excerpt. Not recommend.
# Please use <! -- more --> in the post to control excerpt accurately.
# Add [Read More] automatically by word count
# Suggest adding <! -- more -->
# Customize the content to be displayed before the [Read More] button!
auto_excerpt:
  enable: false
  length: 150

# Post meta display settings
# Article metadata Settings displayed at the top of the article
post_meta:
  item_text: true
  created_at: true
  updated_at: false
  categories: true

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
# Display word count and estimated reading time
To install the plugin, go to the root of the site folder
NPM install hexo-wordcount --save
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

# Recommended posts
# Dependency: https://github.com/huiwang/hexo-recommended-posts

# Wechat Subscriber
Wechat QR code is displayed at the end of the article
wechat_subscriber:
  enabled: falseUploads: /uploads/ Wechat -qcode.jpg# Reward
The tip function is displayed at the end of the article
#reward_comment: Donate comment here
#wechatpay: /images/wechatpay.jpg
#alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

# reprint statement
post_copyright:
  enable: trueLicense: CC BY - NC - SA 3.0 license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Misc Theme Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

# Reduce padding / margin indents on devices with narrow width.
# Mobile removes white space on both sides of the page. I don't recommend it
mobile_layout_economy: false

# Android Chrome header panel color ($black-deep).
# Chrome top color Settings on Android
android_chrome_color: "# 222"

# Custom Logo.
#!!!!! Only available for Default Scheme currently.
# Options:
# enabled: [true/false] - Replace with specific image
# image: url-of-image - Images's url
custom_logo:
  enabled: false
  image:

# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
# Code highlight theme Settings
Click on the link above to check it out
highlight_theme: normal


# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
# light, light italic, normal, normal italic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# -introduce in 5.0.1
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844
# To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS |  Trebuchet MS
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# font Settings
font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default).
  host: https://fonts.cat.net

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: xx`. Use `px` as unit.

  # Global font settings used on <body> element.
  global:
    external: true
    family: Roboto Slab
    size:

  # Font settings for Headlines (h1, h2, h3, h4, h5, h6).
  # Fallback to `global` font settings.
  headings:
    external: true
    family:
    size:

  # Font settings for posts.
  # Fallback to `global` font settings.
  posts:
    external: true
    family:

  # Font settings for Logo.
  # Fallback to `global` font settings.
  logo:
    external: true
    family:
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Roboto Mono
    size:


# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Third Party Services Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

# MathJax Support
mathjax:
  enable: false
  per_page: falseCDN: / / cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML# Han Support docs: https://hanzi.pro/
han: false

# Swiftype Search API Key
#swiftype_key:

# Baidu Analytics ID
# Baidu site statistics
baidu_analytics: a452b4c4a1cd7c9a9f62d952a88dc832

# Duoshuo ShortName
#duoshuo_shortname:

# Disqus
disqus:
  enable: false
  shortname:
  count: true

# Hypercomments
#hypercomments_id:

# changyan
changyan:
  enable: false
  appid:
  appkey:

# Comment system
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: false
  appid:  # your leancloud application appid
  appkey:  # your leancloud application 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


# Support for youyan comments system.
# You can get your uid from http://www.uyan.cc
#youyan_uid: your uid

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
#livere_uid: your uid

# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
# You can get your Github ID from https://api.github.com/users/<Github username>
gitment:
  enable: false
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ... ' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: # MUST HAVE, Your Github ID
  github_repo: # MUST HAVE, The repo you use to store Gitment comments
  client_id: # MUST HAVE, Github client id for the Gitment
  client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
# baidushare:
# type: slide

# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
# jiathis:
# uid: Get this uid from http://www.jiathis.com/
# add_this_id:

# Share
# duoshuo_share: true

# NeedMoreShare2
# This plugin is a pure javascript sharing lib which is useful in China.
# See: https://github.com/revir/need-more-share2
# Also see: https://github.com/DzmVasileusky/needShareButton
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
# Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
# Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
# Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
# Post sharing
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: vertical
      position: topRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:

# Google Analytics
#google_analytics:

# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
#bing_site_verification:

# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
#yandex_site_verification:

# CNZZ count
#cnzz_siteid:

# Application Insights
# See https://azure.microsoft.com/en-us/services/application-insights/
# application_insights:

# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id: 0
  #admin_nickname: Author

# Post widgets & FB/VK comments settings.
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable:       false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true

# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
  enable:       false
  num_of_posts: 10    # min posts num is 1
  width:        100%  # default width is 550px
  scheme:       light # default scheme is light (light or dark)

# VKontakte API Support.
# To get your AppID visit https://vk.com/editapp?act=create
vkontakte_api:
  enable:       false
  app_id:       #<app_id>
  like:         true
  comments:     true
  num_of_posts: 10

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: false
  id:     #<app_id>
  color:  fc6423
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
# Display the number of views per article
# Then you can set up a TopX page based on the amount of reading.
# https://www.jianshu.com/p/702a7aec4d00
leancloud_visitors:
  enable: false
  app_id: #<app_id>
  app_key: #<app_key>

# Another tool to show number of visitors to each article.
# visit https://console.firebase.google.com/u/0/ to get apiKey and projectId
# visit https://firebase.google.com/docs/firestore/ to get more information about firestore
firestore:
  enable: false
  collection: articles #required, a string collection name to access firestore database
  apiKey: #required
  projectId: #required
  bluebird: false #enable this if you want to include bluebird 3.5.1(core version) Promise polyfill

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
Display total visitors and total page views in the footer (false: true
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 
  site_pv_footer: 
  # custom pv span for one page only
  You are advised to use leancloud_visitors
  # First, leanCloud is more stable. Second, leanCloud is easier to manage
  Finally, you can use leanCloud's API to create TopX pages
  page_pv: false
  page_pv_header: <i class="fa fa-eye"></i>
  page_pv_footer: 


# Tencent analytics ID
# tencent_analytics:

# Tencent MTA ID
# tencent_mta:


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

# Google Calendar
# Share your recent schedule to others via calendar page
#
# API Documentation:
# https://developers.google.com/google-apps/calendar/v3/reference/events/list
calendar:
  enable: false
  calendar_id: <required>
  api_key: <required>
  orderBy: startTime
  offsetMax: 24
  offsetMin: 4
  timeZone:
  showDeleted: false
  singleEvents: true
  maxResults: 250

# Algolia Search
algolia_search:
  enable: false
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}"
    hits_stats: "${hits} results found in ${time} ms"

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
To use the plugin, go to the root directory of the site folder
NPM install hexo-generator-searchdb --save
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1


# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
# Tags Settings
# -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

# External URL with BASE64 encrypt & decrypt.
# Usage: {% exturl text url "title" %}
# Alias: {% extlink text url "title" %}
# Usage:
# https://github.com/iissnan/hexo-theme-next/pull/1438
exturl: false

# Note tag (bs-callout).
# Note, Label, tabs
note:
  # Note tag style values:
  # - simple bs-callout old alert style. Default.
  # - modern bs-callout new (v2-v3) alert style.
  # - flat flat callout style with background, like on Mozilla or StackOverflow.
  # - disabled disable all CSS styles import of note tag.
  # style
  style: flat
  # Do not want icon
  icons: false
  # Rounded rectangle
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

# Label tag.
label: true

# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: false
    labels: true
  border_radius: 0


#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Use velocity to animate everything.
motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn |  slideRightBigOut
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut |  perspectiveRightIn | perspectiveRightOut
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

# Fancybox
fancybox: true

# Progress bar in the top during page loading.
# Loading bar at the top of the page
pace: true
# 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

# Dynamic effects
# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
  enable: falseSize: 300 alpha: 0.6zindex: -1# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
# Replace relevant content with CDN address to speed up website access, pay attention to the version should be as consistent as possible
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version 2.1.3
  jquery:

  # Internal version: 2.1.5
  # See: http://fancyapps.com/fancybox/
  fancybox:
  fancybox_css:

  # Internal version 1.0.6
  # See: https://github.com/ftlabs/fastclick
  fastclick:

  # Internal version: 1.9.7
  # See: https://github.com/tuupola/jquery_lazyload
  lazyload:

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity:

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity_ui:

  # Internal version: 0.7.9
  # See: https://faisalman.github.io/ua-parser-js/
  ua_parser:

  # Internal version: 4.6.2
  # See: http://fontawesome.io/
  fontawesome:

  # Internal version: 1
  # https://www.algolia.com
  algolia_instant_js:
  algolia_instant_css:

  # Internal version: 1.0.2
  # See: https://github.com/HubSpot/pace
  # Or use direct links below:
  # pace: / / cdn.bootcss.com/pace/1.0.2/pace.min.js
  # pace_css: / / cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
  pace:
  pace_css:

  # Internal version: 1.0.0
  # https://github.com/hustcc/canvas-nest.js
  canvas_nest:

  # three
  three:

  # three_waves
  # https://github.com/jjandxa/three_waves
  three_waves:

  # three_waves
  # https://github.com/jjandxa/canvas_lines
  canvas_lines:

  # three_waves
  # https://github.com/jjandxa/canvas_sphere
  canvas_sphere:

  # Internal version: 1.0.0
  # https://github.com/zproo/canvas-ribbon
  canvas_ribbon:

  # Internal version 3.3.0
  # https://github.com/ethantw/Han
  han:

  # needMoreShare2
  # https://github.com/revir/need-more-share2
  needMoreShare2:


# Assets
css: css
js: js
images: images

# Theme versionVersion: 5.1.4 ensuringCopy the code

Advanced web style pages

Need to know

Press F12. You are advised to use Google Chrome.

Custom style file: themes\next\source\ CSS \_custom\custom.styl

Save the modified file and refresh the page to view the effect.

Modify the page size of the article

Open themes/ Next /source/ CSS /_variables/base.styl and find the following fields and change them to appropriate widths:

- $content-desktop-large = 900px
+ $content-desktop-large = 1000px
Copy the code

Modify small code block colors

Modify the \themes\next\source\ CSS \ _variables\base.styl file and add custom colors:

$black-deep = #222 $red = #ff2a2a $blue-bright = #87daff $blue = #0684bd $blue-deep = #262a30 $orange = #fc6423 // Custom colors+ $my-code-foreground = #dd0055
+ $my-code-background = #eee
Copy the code

$code-foreground; $code-foreground;

// Code & Code Blocks
$code-font-family               = $font-family-monospace
$code-font-size                 = 13px
$code-font-size                 = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
$code-border-radius             = 4px
- $code-foreground = $black-light
- $code-background = $gainsboro
+ $code-background = $my-code-background
+ $code-foreground = $my-code-foreground
Copy the code

Modify themes\next\source\ CSS \_custom\custom.styl file to add custom styles

// Article ' 'code block custom style code {margin: 0px 3px; border: 1px solid# 999;
}
Copy the code

Modify the link text style

Modify themes\next\source\ CSS \_custom\custom.styl file to add custom styles

// Post -body p a{color:#0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;}}Copy the code

Modify the [Read More] button style

Modify themes\next\source\ CSS \_custom\custom.styl file to add custom styles

// [Read More] button style. Post-button. BTN {color:# 555! important;background-color: rgb(255, 255, 255); border-radius: 3px; font-size: 15px; Box-shadow: inset 0px 0px 10px 0px Rgba (0, 0, 0, 0.35); border: none ! important; transition-property:unset; padding: 0px 15px; } .post-button .btn:hover { color: rgb(255, 255, 255) ! important; border-radius: 3px; font-size: 15px; Box-shadow: inset 0px 0px 10px 0px Rgba (0, 0, 0, 0.35); background-image: linear-gradient(90deg,#a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
Copy the code

Change the color of the tagcloud

Modify the themes/next/layout/page. Swig file, add custom styles:

- {{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
+ {{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}
Copy the code

Modify the corresponding parameter values. For the parameter description, see the Hexo official documentation

Modify the # tag at the bottom of the article to the icon

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

Set the avatar to a circle and leave the rotation effect on

Themes \next\source\ CSS \_common\ Components \sidebar\sidebar-author. Styl

.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; // Set the circle+ border-radius: 50%;
+ transition: 2s all;} / / rotate+ .site-author-image:hover{
+ transform: rotate(360deg);
+}
Copy the code

Hide the bottom “strong drive” content

Modify the themes/next/_config.yml file and set powered and enable to false

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

Add a “end of article” tag at the end of the article

In themes/next/layout/_macro/post.swig, add the following code before weak-subscriber. swig:

+ 
      
       ---------------- The End ----------------
      
    {% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
    {% endif %}
Copy the code

Add copyright information at the end of the article

There are two ways to increase copyright

Modify the themeThe configuration fileSearch,post_copyright

post_copyright:
- enable: false
+ enable: trueLicense: CC BY - NC - SA 3.0 license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/Copy the code

If the default doesn’t look good, you can customize it and findthemes/next/layout/_macro/post.swigIn thefooterAdd the following code before adding (make sure to add styles before adding) :

<div>
	  <p id="div-border-left-red"> <a target="_blank" title="Creative Commons Attribute-ShareAlike 4.0 International (CC BY-SA 4.0)" href="http://creativecommons.org/licenses/by-sa/4.0/"> creative Commons attribution - share alike 4.0 < / a > international license agreement release < / b > < br / > < span > < b > address: < / b > < a href ="{{ url_for(page.path) }}" title="{{ page.title }}">{{page. Permalink}}</a><br/><b> </b> </span> </p> </div>Copy the code

Add background image

Swig /themes/next/layout/_layout.

+ < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js" > < / script >.
+ 
+ $("body").backstretch("https:// background.jpg ");
+ 
</body>
Copy the code

Add it to the end of the file.

The mobile side displays the back-to-top button and sidebar

Specific mobile phone shows available mobile phone access to my blog

My blog theme is Muse, and the theme design template is Muse or Mist, which can be configured directly in the theme profile:

Modify themes/next/_config.yml

# Enable sidebar on narrow view
onmobile: true
Copy the code

How to debug the mobile phone style page, please refer to the following figure

Once the page is debugged, copy the code to :themes\next\source\ CSS \_custom\custom.styl

Refer to my custom.styl style file for details

Attach my custom.styl style file

It is not recommended to copy and paste all the use, it is best to open F12, according to the key ID to find the corresponding style, copy to your own file

The style file reference [reuixiy] (https://reuixiy.github.io/) bosses configuration

// Custom styles.
/*******************首页样式*****************************/
// 顶栏宽度
.container .header-inner {
    width: 100%;
}

// .headband {
//     height: 1.5px;
//     background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
// }

// 页面顶部行高
.header {
    line-height: 1.5;
}

// // 页面背景色
// .container {
//     background-color: rgba(0, 0, 0, 0.75);
// }

// 页面留白更改
.header-inner {
    padding-top: 35px;
    padding-bottom: 0px;
}
.posts-expand {
    padding-top: 50px;
}
.posts-expand .post-meta {
    margin: 5px 0px 0px 0px;
}
.post-button {
    margin-top: 0px;
}
// 顶栏宽度
.container .header-inner {
    width: 100%;
}
// 渐变菜带，CSS代码copy自https://githubuniverse.com
// .site-meta {
//     background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
// }

//缩略图指定宽度值显示。
img.img-topic {
    width: 75%;
}


/*******************文章样式*****************************/
// 文章
.post {
    margin-bottom: 50px;
    padding: 45px 36px 36px 36px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 255, 255);
}

// 文章标题字体
.posts-expand .post-title {
    font-size: 26px;
    font-weight: 700;
}
// 文章标题动态效果
.posts-expand .post-title-link::before {
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 文章元数据（meta）留白更改
.posts-expand .post-meta {
    margin: 10px 0px 20px 0px;
}
// 文章的描述description
.posts-expand .post-meta .post-description {
    font-style: italic;
    font-size: 14px;
    margin-top: 30px;
    margin-bottom: 0px;
    color: #666;
}
// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 去除在页面文章之间的分割线
.posts-expand .post-eof {
    margin: 0px;
    background-color: rgba(255, 255, 255, 0);
}
// 去除页面底部页码上面的横线
.pagination {
    border: none;
    margin: 0px;
}

// 文章内标题样式（左边的竖线）
.post-body h2, h3, h4, h5, h6 {
    border-left: 4px solid rgb(161, 102, 171);
    margin-left: -36px;
    padding-left: 32px;
}
// 去掉图片边框
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}
// 文章``代码块的自定义样式
code {
    margin: 0px 3px;
    border: 1px solid #999;
}

// 文章```代码块顶部样式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}
// 文章```代码块diff样式
pre .addition {
    background: #e6ffed;
}
pre .deletion {
    background: #ffeef0;
}

//文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

// 自定义的文章摘要图片样式
img.img-topic {
    width: 100%;
}

/*************************侧栏样式****************************/
// 自定义的侧栏时间样式
#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}
// 右下角侧栏按钮样式
.sidebar-toggle {
    right: 10px;
    bottom: 43px;
    background-color: rgba(247, 149, 51, 0.75);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.page-post-detail .sidebar-toggle-line {
    background: rgb(7, 179, 155);
}
// 右下角返回顶部按钮样式
.back-to-top {
    line-height: 1.5;
    right: 10px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    background-color: rgba(247, 149, 51, 0.75);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}

// 侧栏
.sidebar {
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.75);
}
.sidebar-inner {
    margin-top: 30px;
}
// 侧栏顶部文字
.sidebar-nav li {
    font-size: 15px;
    font-weight: bold;
    color: rgb(7, 179, 155);
}
.sidebar-nav li:hover {
    color: rgb(161, 102, 171);
}
.sidebar-nav .sidebar-nav-active {
    color: rgb(7, 179, 155);
    border-bottom-color: rgb(161, 102, 171);
    border-bottom-width: 1.5px;
}
.sidebar-nav .sidebar-nav-active:hover {
    color: rgb(7, 179, 155);
}
// 侧栏站点作者名
.site-author-name {
    display: none;
}
// 侧栏站点描述
.site-description {
    letter-spacing: 5px;
    font-size: 15px;
    font-weight: bold;
    margin-top: 15px;
    margin-left: 13px;
    color: rgb(243, 112, 85);
}
// 侧栏站点文章、分类、标签
.site-state {
    line-height: 1.3;
    margin-left: 12px;
}
.site-state-item {
    padding: 0px 15px;
    border-left: 1.5px solid rgb(161, 102, 171);
}
// 侧栏RSS按钮样式
.feed-link {
    margin-top: 15px;
    margin-left: 7px;
}
.feed-link a {
    color: rgb(255, 255, 255);
    border: 1px solid rgb(158, 158, 158) !important;
    border-radius: 15px;
}
.feed-link a:hover {
    background-color: rgb(161, 102, 171);
}
.feed-link a i {
    color: rgb(255, 255, 255);
}
// 侧栏社交链接
.links-of-author {
    margin-top: 0px;
}
// 侧栏友链标题
.links-of-blogroll-title {
    margin-bottom: 10px;
    margin-top: 15px;
    color: rgba(7, 179, 155, 0.75);
    margin-left: 6px;
    font-size: 15px;
    font-weight: bold;
}
// 侧栏超链接样式（友链的样式）
.sidebar a {
    color: #ccc;
    border-bottom: none;
}
.sidebar a:hover {
    color: rgb(255, 255, 255);
}
// 自定义的侧栏时间样式
#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}
// 侧栏目录链接样式
.post-toc ol a {
    color: rgb(7, 179, 155);
    border-bottom: 1px solid rgb(96, 125, 139);
}
.post-toc ol a:hover {
    color: rgb(161, 102, 171);
    border-bottom-color: rgb(161, 102, 171);
}
// 侧栏目录链接样式之当前目录
.post-toc .nav .active > a {
    color: rgb(161, 102, 171);
    border-bottom-color: rgb(161, 102, 171);
}
.post-toc .nav .active > a:hover {
    color: rgb(161, 102, 171);
    border-bottom-color: rgb(161, 102, 171);
}
/* 修侧栏目录bug，如果主题配置文件_config.yml的toc是wrap: true */
.post-toc ol {
    padding: 0px 10px 5px 10px;
}
/* 侧栏目录默认全展开，已注释
.post-toc .nav .nav-child {
    display: block;
}
*/

/************************移动端样式*******************************/
@media (max-width: 1023px) {
    .container {
        background-color: rgba(0, 0, 0, 0);
    }
    .sidebar {
        // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    .feed-link {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .main {
        padding-bottom: 120px;
    }
    .posts-expand {
        margin: 0px;
        padding-top: 10px;
    }
    .posts-expand .post-title {
        font-size: 22px;
    }
    .posts-expand .post-meta {
        font-size: 10px;
    }
    .post {
        margin-bottom: 30px !important;
        padding: 20px 15px 15px 15px !important;
    }
    .post-body h2, h3, h4, h5, h6 {
        margin-left: -15px;
        padding-left: 11px;
    }
    .posts-expand .post-tags {
        margin-top: 10px;
    }
    .post-widgets {
        margin-top: 10px;
    }
    .comments {
        margin: 40px 0px 40px 0px !important;
    }
    .footer {
        // box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
    }
}
.sidebar-active #sidebar-dimmer {
    opacity: 0;
}
// 移动端左上角菜单按钮
.site-nav-toggle {
    top: 35px;
    left: 91px;
    // background-color: #222;
}
.btn-bar {
    background-color: rgb(255, 255, 255);
}
// 移动端菜单
@media (max-width: 767px) {
    .menu {
        text-align: center;
        // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }
    .site-nav {
        top: initial;
        background-color: rgba(255, 255, 255, 0.75);
        border-top: none;
        border-bottom: none;
        position: relative;
        z-index: 1024;
    }
}
//移动端顶部
@media (max-width: 767px) {
    .site-title {
        font-size: 28px !important;
        letter-spacing: 0px !important;
    }
    .site-subtitle{
        letter-spacing: 0px !important;
        padding-bottom: 0px !important;
    }
    .site-meta {
        // box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    }
    .menu .menu-item {
        margin: 0px 10px !important;
    }
}

Copy the code

Advanced advanced function configuration

Setting dynamic Title

Themes/next/source/js/SRC create dytitle. Js:

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange'.function () {
    if (document.hidden) {
        $('[rel="shortcut icon"]').attr('href'."/TEP.png");
        document.title = 'w(゚ д ゚)w out BUG ！！！！ ';
        clearTimeout(titleTime);
    }
    else{$('[rel="shortcut icon"]').attr('href'."/favicon.png");
        document.title = '(^∇^*) Good again... ' + OriginTitile;
        titleTime = setTimeout(function () {
            document.title = OriginTitile;
        }, 2000); }});Copy the code

Modify themes/next/layout/layout. The swing, before adding:

<script type="text/javascript" src="/js/src/dytitle.js"></script>
Copy the code

The sidebar adds the running time

Modify the file :themes/next/layout/_custom/sidebar. Swig and add the following code:

BirthDay=new Date(“05/27/2017 15:13:14”); Change the date to your own

<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000); BirthDay=new Date("05/27/2017 15:13:14");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="Running"+daysold+"Day"+hrsold+"Hour"+minsold+"Points"+seconds+"Seconds";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
Copy the code

Modify the files themes/next/layout/_macro/sidebar. Swig

        {# Blogroll #}
        {% if theme.links %}
          <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
            <div class="links-of-blogroll-title">
              <i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
              {{ theme.links_title }}&nbsp;
              <i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
            </div>
            <ul class="links-of-blogroll-list">
              {% for name, link in theme.links %}
                <li class="links-of-blogroll-item">
                  <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
                </li>
              {% endfor %}
            </ul>
+        {% include '.. /_custom/sidebar.swig' %}
          </div>
         {% endif %}

-        {% include '.. /_custom/sidebar.swig' %}
Copy the code

Click on the love effect

In the/themes/next/source/js/love. Love js under the new file. Js, then copy and paste the code under the link to love. The js file

!function (e, t, a) { function n() { c(".heart{width: 10px; height: 10px; position: fixed; background: #f00; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }.heart:after,.heart:before{content: ''; width: inherit; height: inherit; background: inherit; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: fixed; }.heart:after{top: -5px; }.heart:before{left: -5px; }"), o(), r() } function r() { for (var e = 0; e < d.length; e++)d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y-- , d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px; top:" + d[e].y + "px; opacity:" + d[e].alpha + "; transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg); background:" + d[e].color + "; z-index:99999"); requestAnimationFrame(r) } function o() { var t = "function" == typeof e.onclick && e.onclick; e.onclick = function (e) { t && t(), i(e) } } function i(e) { var a = t.createElement("div"); a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a) } function c(e) { var a = t.createElement("style"); a.type = "text/css"; try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a) } function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" } var d = []; e.requestAnimationFrame = function () { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) { setTimeout(e, 1e3 / 60) } }(), n() }(window, document);
Copy the code

At the end of the \themes\next\layout\_layout.swig file add:

{% include '_third-party/exturl.swig' %}
</body>
</html>
+ <! -- Page click little red heart -->
+ <script type="text/javascript" src="/js/src/love.js"></script>
Copy the code

Click on your profile picture to return to the front page of your blog

Modify the file /themes/next/layout/_macro/sidebar. Swig and add the following code:

+ 
          <img class="site-author-image" itemprop="image"
               src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
               alt="{{ theme.author }}" />
+ 
Copy the code

Add content sharing services

Modify the themes/next/_config.yml theme configuration file, search needmoreshare2, find the following code and make the following changes:

# Post sharing
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: vertical
      position: topRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
Copy the code

About the wechat QR code image load failure in the share, thanks to [Qcmoke](https://www.qcmoke.site) big guy’s solution

In the next 5.1.4 version, wechat could not load the TWO-DIMENSIONAL code, which should be because the encapsulated wechat sharing link failed. I am via the old version of the warehouse github.com/iissnan/hex… The new version of next does not have this problem. The new version repository has been moved to https://github.com/theme-next

Enter the following command:

rm -rf themes/next/source/lib/needsharebutton
git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton
Copy the code

Add site article search function

To install the hexo-Generator-searchdb plug-in, run the following command:

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

Modify the hexo/_config.yml site configuration file by adding the following code at the end:

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

Modify the themes/next/_config.yml theme configuration file, search the keyword local_search to find the following code, set enable to true as follows:

local_search:
  enable: true
Copy the code

Add article word count and reading time function

To install the hexo-Wordcount plug-in, run the following command:

 npm install hexo-wordcount --save
Copy the code

Modify the themes/next/_config.yml configuration file and search for the keyword post_wordcount as follows:

post_wordcount:
  item_text: true
  wordcount: true # Number of words per article
  min2read: true # Reading time per text
  totalcount: true # Total word count of the site
  separated_meta: true
Copy the code

Added the site access statistics function

The Next theme integrates third-party access statistics plug-ins by default.

Modify the themes/next/_config.yml theme configuration file and search for busuanzi_count:

Display total visitors and total page views in the footer (false: true
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 
  site_pv_footer: 
  # custom pv span for one page only
  You are advised to use leancloud_visitors
  # First, leanCloud is more stable. Second, leanCloud is easier to manage
  Finally, you can use leanCloud's API to create TopX pages
  page_pv: false
  page_pv_header: <i class="fa fa-eye"></i>
  page_pv_footer: 
Copy the code

The domain name “dn-lbstatics. Qbox. me” has expired. Change the domain name to “busuanzi.iBruce.info”! Therefore you may need to modify > the following file related information:

Themes /next/layout/_third-party/analytics/busuanzi-counter.swig, go to dn-lbstatics.qbox.me, modify the code:

> <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
>
Copy the code

Article top function

Remove plugins installed by default:

npm uninstall hexo-generator-index --save
Copy the code

Install a new plug-in:

npm install hexo-generator-index-pin-top --save
Copy the code

Finally, when editing related articles that require this, add a line in Front-matter:

top: true
Copy the code

If you top more than one, how do you control the order? Set the value of top (larger first), as in:

# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10
Copy the code

Article B will appear before article A.

LeanCloud counts the number of articles read

Existing bosses, to provide specific details, please stamp into [Hexo blog – NexT topic: using leancloud visitor statistics page] (https://lfwen.site/2016/05/31/add-count-for-hexo-next/)

Add a scoring system at the bottom of the article

I am a porter, please stamp in the details [super depth optimization – section 5.6] (https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html/)

Add TopX page

Lazy lazy, please poke in the details [super depth optimization – section 5.8] (HTTP: / / https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html#%E 6%B7%BB%E5%8A%A0-TopX-%E9%A1%B5%E9%9D%A2)

Review system

If you have already registered for LeanCloud(click here if you haven’t), then just set the AppID and AppKey and modify the theme configuration file:

# Comment system
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  #your id
  appkey:  #your key
  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

Update about the theme

For the upgrade topic, we need to reconfigure the topic configuration file, so do we do this every time we upgrade? Super trouble!

The NexT authors suggested using [Data Files](https://hexo.io/zh-cn/docs/data-files.html), Specific details please poke into [Theme configurations using Hexo data files # 328] (https://github.com/iissnan/hexo-theme-next/issues/328)

Post the following summary:

Make sure you use a version of Hexo above 3
Create a new next. Yml file in the source/_data directory of the site (the _data directory may need to be created)
Migrate the configuration from the site profile and topic profile to next.yml

All subject-specific configurations can be written to the next. Yml file. The _config.yml in the theme directory can be left unchanged.

If you are new, you can copy the entire contents of the _config.yml theme and modify it

If you have previously written the configuration in _config.yml of your site, cut the theme-related configuration from this file to next. Copy the configuration from _config.yml to next.

Each change to _next. Yml requires a restart of the Hexo server to take effect.

Advanced search engine chapter

Blog posts never get picked up because the search engines don’t pick them up

Want to search engines included in the article, must first have their own domain name, how to buy domain name can refer to this article

Refer to the [[domain name binding article]] (http://yangbingdong.com/2017/build-blog-hexo-advanced/#%E5%9F%9F%E5%90%8D%E7%BB%91%E5%AE%9A%E7%AF%87) bosses configuration

About how to optimize please direct reference this article [Hexo – next baidu and Google search optimization 】【 search optimization] (http://www.ehcoo.com/seo.html), the configuration of

[[Search optimization] Hexo Advanced Tutorial: Want your blog to be found by more people in search engines?] (https://blog.csdn.net/sunshine940326/article/details/70936988) bosses configuration

Advanced writing essay

Article template function

The article template function is mainly used to initialize article Settings when creating a new article by command. See front-matter and page variables in Hexo’s official documentation, summarized as follows:

/* ！！！！！！！！！！ ** Each: is followed by a space ** and: is the English symbol ** ！！！！！！！！！！ */ title: /* ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** You can also say ** as long as you have created_at configured in your theme configuration file ** why do you add it yourself? ** Updated: /* Updated: /* At the top of each post on the page, it is updated to... ** In the topic configuration file, updated_at */ permalink: /* If permalink in the site configuration file has title **, replace title (title) */ categories: / * classification, support multi-level, such as: - technology - computer - computer - aided - art is technology/computer/computer - aided - art (does not apply to the layout: Page) */ tags: /* Tags ** Multiple can be written like this [Tags 1, 2, 3] ** (not applicable to Layout: Page) */ description: /* The description of the article, displayed below the title of each article and as the description metadata of the page ** If not written, automatically <! -- More --> ** The previous text as the description metadata of the web page ** it is recommended that every article must be added! */ keywords: /* Keywords, and as the keywords of the page ** if not written, automatically take tags ** as the keywords of the page */ comments: /* Whether to enable comments ** default istrue** to close writefalse*/ layout: /* Page layout, default is post, default can be modified in the ** site configuration file default_layout ** another: 404 pages may use, change the value tofalse* /type: /* Categories, categories page ** tags, tags page ** picture, used to generate group-pictures ** quote? ** https://reuixiy.github.io/uncategorized/2010/01/01/test.html */ photos: /* Gallery support:  - photo_url_1 - photo_url_2 - photo_url_3 https://reuixiy.github.io/uncategorized/2010/01/01/test.html */ link: External links https://reuixiy.github.io/uncategorized/2010/01/01/test.html * * * / * article/image: ** This item is only configured by referring to section 5.14 of this article, otherwise do not add it! */ sticky: /* Article top ** This item only refer to section 5.15 of this article configure, otherwise do not add! */ password: /* Article password, this only reference tutorial: ** http://shenzekun.cn/hexo next theme personalized configuration tutorial. There is still a bug, which is to right click on a new TAB to open ** and see the content */ regardless of whether the password is enteredCopy the code

I referred to reuixiy’s template Settings:

---
title: {{ title }}
date: {{ date }}
permalink:
categories:
tags: []
description:
image:
---

<img src="https://" alt="" style="width:100%"/ > <! -- more --># #

# #

# #

<hr />
Copy the code

Use the Markdown

Markdown is so programmer-friendly that it enjoys writing documents in the language and has largely given up the mouse. Easy to read and write, just contact may not remember the command, believe me, write two or three blog proficiently.

Markdown tutorial:

Markdown tutorial

Add music and video

Refer directly to this! [insert music and video] (insert music and visual https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html# Frequency)

Fun writing style

Start with themes/ Next /source/ CSS /_custom/custom.styl and add the following styles:

// Button style (for emoji). BTN {color:#fff ! important;text-decoration: none ! important; border: 2px solid# 222! important;
}
.btn:hover {
    color: # 222! important;} // Download style A#download {
display: inline-block;
padding: 0 10px;
color: # 000;
background: transparent;
border: 2px solid # 000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: # 000;
color: #fff;}} / / Color block - yellow span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;} // Color block - green span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;} // Color block - blue span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;} // Color block - purple span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;} // Left border red block level p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;} // Left border yellow block level p#div-border-left-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #f0ad4e;} // Left border green block level p#div-border-left-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #5cb85c;} // Left border blue block level p#div-border-left-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #2780e3;} // Left border purple block level p#div-border-left-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #9954bb;} // Right border red block level p#div-border-right-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #df3e3e;} // Right border yellow block level p#div-border-right-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #f0ad4e;} // Right border green block level p#div-border-right-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #5cb85c;} // Right border blue block level p#div-border-right-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #2780e3;} // Right border purple block level p#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb;} // Top border red p#div-border-top-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #df3e3e;} // Upper border yellow p#div-border-top-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #f0ad4e;} // Top border green P#div-border-top-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #5cb85c;} // Top border blue p#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3;} // Top border purple p#div-border-top-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #9954bb;
}
Copy the code

Text adds background color block

Site profile, topic profile

<span id="inline-blue"> Site profile </span>, <span id="inline-purple"> Theme configuration file </span>Copy the code

Reference border discoloration

If it didn’t work, it could be the wall. It is recommended to download node. js and install it directly.

For more basic operations and basics, consult the official documentation of [Hexo](https://hexo.io/zh-cn/) and [NexT](http://theme-next.iissnan.com/).

<p id="div-border-left-red"> < p style = "max-width: 100%; clear: both; It is recommended to download node. js and install it directly. </p> <p id="div-border-top-blue"For more basic operations and basics, please refer to the official documentation of [Hexo](https://hexo.io/zh-cn/) and [NexT](http://theme-next.iissnan.com/).</p>Copy the code

Theme native Style

For the tag styles that come with the NexT theme, click theme-next.iissnan.com/tag-plugins…

Center text references

Life is a mirror, and to see yourself in the mirror is what I would call a priority, a goal only! {% endcq %}

Code:

Life is a mirror, and to see yourself in the mirror is what I would call a priority, a goal only! {% endcq %}Copy the code

Reference block

Effect: {% blockquote David Levithan, Wide Awake %} Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy. {% endblockquote %}

Code:

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}
Copy the code

{% blockquote @devdocs twitter.com/devdocs/sta… %} NEW: DevDocs now comes with syntax highlighting. devdocs.io {% endblockquote %}

Code:

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}
Copy the code

Themes come with style note tags

default

<div class="note default"><p>default</p></div>
Copy the code

primary

<div class="note primary"><p>primary</p></div>
Copy the code

success

<div class="note success"><p>success</p></div>
Copy the code

info

<div class="note info"><p>info</p></div>
Copy the code

warning

<div class="note warning"><p>warning</p></div>
Copy the code

danger

<div class="note danger"><p>danger</p></div>
Copy the code

danger no-icon

<div class="note danger no-icon"><p>danger no-icon</p></div>
Copy the code

The following can be configured in the topic configuration file:

# Note tag (bs-callout).
note:
  # style
  style: flat
  # Do not want icon
  icons: true
  # Rounded rectangle
  border_radius: 3
  light_bg_offset:
Copy the code

The theme comes with the style label tag

The following can be configured in the topic configuration file:

# Label tag.
label: true
Copy the code

It looks like this (@ is preceded by the name of the label, followed by the text to display) :

{% label default@default %}

{% label default@default %}
Copy the code

Change default to primary, success, info, warning, danger.

The theme comes with a style tabs tag

The following can be configured in the topic configuration file:

# Tabs tag.
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 0
Copy the code

Effect: {% tabs, 2 %}

This is TAB 1 hahahahahahahahahahahahahahahahahahahahahahahahaha…

This is TAB 2

This is TAB 3. Wow, you found me! ♪ ~ phi (≧ ≦ omega *)

{% endTabs %}

{% tabs TAB, 2 %} <! -- TAB --> ** This is the TAB. <! -- endtab --> <! -- TAB --> ** This is the TAB 2** <! -- endtab --> <! -- TAB --> ** This is TAB 3** Wow, you found me! Phi (≧ ≦ omega *) ♪ ~ <! -- endtab --> {% endtabs %}Copy the code

Note: in the source code, 2 means to start in the second TAB, not mandatory, if the value of -1 hidden TAB content. See this page for more usage.

Themes come with style buttons

Source:

{% BTN https://www.baidu.com, download fa-lg fa-fw %}Copy the code

Effect: {% BTN www.baidu.com, download fa-lg fa-fw %}

More on the use of buttons can be found on this page.

<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span>
</a>
Copy the code

Effect: Download Now

This also calls the Font Awesome method.

Add ICONS to the document

Markdown Support Hexo supports all of the GitHub Markdown features and even integrates most of Octopress’s plugins.
A deployment can be deployed to Github Pages, or other sites, with a single command
Rich plugins Hexo has a powerful plugin system, and installing plugins enables Hexo to support Jade, CoffeeScript.

- <i class="fa fa-pencil"></ I > Support Markdown < I >Hexo supports all the GitHub Markdown features and even integrates most of Octopress's plugins. </i> - <i class="fa fa-cloud-upload"></ I > A single deployment of < I > can be deployed to Github Pages with a single command, or other sites </ I > - < I class="fa fa-cog"></ I > Rich plugins < I >Hexo has a powerful plugin system, and installing plugins enables Hexo to support Jade, CoffeeScript. </i>Copy the code

  

Font Awesome is used.

Custom style references

Themes /next/source/ CSS /_custom/custom.styl

Blockquote. Question {color:# 555; # color
    border-left: 4px solid rgb(16, 152, 173);# Border thickness
    background-color: rgb(227, 242, 253);# the background color
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-bottom: 20px;
}
Copy the code

Effect:

content

<blockquote class="question"> < / blockquote > contentCopy the code

Custom style number blocks

Themes /next/source/ CSS /_custom/custom.styl

// A custom number block span#inline-toc {
    display: inline-block;
    border-radius: 80% 100% 90% 20%;
    background-color: rgb(227, 242, 253);
    color: # 555;Padding: 0.05 0.4 em em; margin: 2px 5px 2px 0px; The line - height: 1.5; }Copy the code

Results: 1.

<span id="inline-toc">1.</span>
Copy the code

Pw /style/#TOC…

Write in the last

Too tired ~~, although this article wrote very little, most of them are reference big guy, but all the configuration of the article I have used their own blog, is to try all over, and then typesetting. If the function of the text is not clear, you can also leave a message. At the end of this article, I posted a reference article, Google is too much, if there is any omission, please forgive me ~

Having built a good skin, the next task is to give it an interesting soul.

The reason for setting up a blog is to keep thinking and output what you have learned. Keep curious and keep learning!

Reference:

Yangbingdong.com/2017/build-…
Reuixiy. Making. IO/technology /…
www.ehcoo.com/seo.html
www.qcmoke.site/hexo_next.h…
Almostover. Ru / 2016-01 / hex…
Blog.csdn.net/u012443858/…
Blog.csdn.net/w_ngzeqi/ar…
Blog.csdn.net/sunshine940…
Lfwen. Site / 2016/05/31 /…

Writing in the front

Thank you bosses

The basic definition

Blog set up

Elementary Basic functions

Site profile

Topic profile

Advanced web style pages

Need to know

Modify the page size of the article

Modify small code block colors

Modify the link text style

Modify the [Read More] button style

Change the color of the tagcloud

Modify the # tag at the bottom of the article to the icon

Set the avatar to a circle and leave the rotation effect on

Hide the bottom “strong drive” content

Add a “end of article” tag at the end of the article

Add copyright information at the end of the article

Add background image

The mobile side displays the back-to-top button and sidebar

Attach my custom.styl style file

Advanced advanced function configuration

Setting dynamic Title

The sidebar adds the running time

Click on the love effect

Click on your profile picture to return to the front page of your blog

Add content sharing services

Add site article search function

Add article word count and reading time function

Added the site access statistics function

Article top function

LeanCloud counts the number of articles read

Add a scoring system at the bottom of the article

Add TopX page

Review system

Update about the theme

Advanced search engine chapter

Advanced writing essay

Article template function

Use the Markdown

Add music and video

Fun writing style

Text adds background color block

Reference border discoloration

Theme native Style

Center text references

Reference block

Themes come with style note tags

The theme comes with the style label tag

The theme comes with a style tabs tag

Themes come with style buttons

Add ICONS to the document

Custom style references

Custom style number blocks

Write in the last

Related Posts

Design Pattern (1)

How can good design principles shape a more powerful product form

Who are your core users?