Recommend a good-looking hexo theme Ayer

Time:2020-1-21

introduce

Ayer is a clean and elegant hexo theme. It is self-contained and responsive, with fast loading speed. There are many functions and configurable items. It is very suitable for your blog theme. Six exquisite high-definition wallpapers are also attached to the theme. Welcome to use and star support, if you have any questions or suggestions in the use process, please contact me!

Recommend a good-looking hexo theme Ayer

Project address

Effect preview

Chinese explanation

Characteristic

  • Clean and elegant, beautiful and easy to read
  • The cover of the front page is full screen tiled, flat design, more tall
  • Responsive design, blog can be well displayed on desktop, tablet, mobile phone and other devices
  • The front cover and copy can be changed at will, and 6 fine high-definition wallpapers are attached to the theme
  • Timeline archive page
  • The sidebar can be displayed and hidden by clicking
  • More customized articles about my page
  • Support article top and article reward
  • SupportMathJax
  • TOCThe table of contents is suspended on the article page, making it easier to jump
  • Password verification can be set when reading articles
  • Valine and gitalk comment modules (recommended with leancloudValine
  • Integrated non garlic statistics and cnzz(Friends League statistics)Other statistical functions

If you want to experience the browsing effect of mobile phone, you can scan the QR Code:

Recommend a good-looking hexo theme Ayer

install

$ git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer

modify

In the root directory of the blog_config.ymlLithemeModification of valueayer

theme: ayer

To update

cd themes/ayer
git pull

Theme configuration

Under the layer directory_config.yml

#Sidebar menu
menu:
  Home page: /
  Contents / Archives
  Photo: http://shenyu-vip.lofter.com
  Travel / tags / Travel/
  About me / 2019 / about

#Website icon and sidebar logo
favicon: /favicon.ico
logo: /images/ayer-side.svg

#Cover configuration
#Enable - enable cover page or not; path - background image of cover page; logo - logo of cover page
cover:
  enable: true
  Path: / images / cover1.jpg ා multiple beautiful pictures are attached to the images directory, which can be replaced
  Logo: / images / layer.svg ා if not set to false directly

#Top progress bar  
progressBar: ture

#Article configuration
#Article is too long, truncate button text (add this mark to the line to be truncated: <! -- more -- >
Please read more
#Article sharing text
Share? Text: Share
#Paginated text
nav_text:
  Page? Prev: Previous
  Page? Next: next page
  Post_prev: last
  Post & next: next

#Whether the article page displays the table of contents
toc: true

Praise and admire
Praise and admiretype设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
Praise and admirewording
"Please give me a cup of coffee."
The Alipay 2D code picture address is the same as the way you set up logo. For example, / images / alipay.jpg
alipay: /images/alipay.jpg
#Wechat QR code image address
weixin: /images/wechat.jpg

#Enable search or not
search: true

#RSS subscription (install the hexo generator feed plug-in first, and then go to the blog root directory config for configuration)
rss: /atom.xml

#Comments: 1. Valine (recommended); 2. Gitalk

#1. Valine (https://github.com/xcss/valine)
#To enable valine, you must first create a leancloud application, obtain the id|key and fill in it
leancloud:  
  enable: true
  app_id: #
  app_key: #
#Valine configuration
valine:
  Enable: true? Enable or not
  Avatar: MP ා avatar style (https://valine.js.org/avatar.html)
  Placeholder: comment on my article

# 2、Gitalk(https://github.com/gitalk/gitalk)
gitalk:
  enable: false # true
  clientID: # GitHub Application Client ID
  clientSecret: # Client Secret
  repo: # Repository name
  owner: # GitHub ID
  admin: # GitHub ID

#Fancybox (only for album display, if you need to configure albums)
fancybox: true

#Visit statistics (no garlic)
busuanzi:
  enable: true

#Cnzz statistics of alliance (URL filled with JS code SRC link)
cnzz:
  enable: true
  url: #

#Mathematical formula
mathjax: true

#Year of establishment of the website (default is 2019, if the year filled in is less than the current year, it will be displayed in the format similar to 2018-2019)
since: 2019

#Whether to display footer information (it is recommended to keep it, which is helpful for the promotion of this topic)
pageFooter: true

Plug-in unit

  • Hexo generator Search Search

    $ npm install hexo-generator-searchdb --save

    Then copy the following configuration to the_config.yml(note that it is not under the layer directory):

    # Hexo-generator-search
    search:
      path: search.xml
      field: post
      format: html
  • hexo-generate-feed RSS

    $ npm install hexo-generator-feed --save

    Then copy the following configuration to the_config.yml(note that it is not under the layer directory):

    feed:
        type: atom
        path: atom.xml
        limit: 20
        hub:
        content:
        content_limit: 140
        content_limit_delim: ' '
        order_by: -date    
  • hexo-generator-index-pin-top

    $ npm uninstall hexo-generator-index --save
    $ npm install hexo-generator-index-pin-top --save

Album

Need to be configured at the top of the article

---
title: Gallery

albums: [
        ["img_url","img_caption"],
        ["img_url","img_caption"]
        ]
---

Article directory

Use tocbot to parse article title and generate table of contents

  • Copy the following configuration to your layer directory_config.ymlLi:

    # Toc
    toc: true
  • You can also choose to close:

    toc: false

Recommended Today

Summary: NPM common commands and operations

The full name of NPM is (node package manager), which is a package management and distribution tool installed with nodejs. It is very convenient for JavaScript developersDownload, install, upload and manage installed packages。 First of all, the following variables will be used: < name > | < PKG > module name < version > version […]