The Hexo topic Keep provides a detailed configuration guide

The Hexo topic keeps a detailed graphical configuration guide. The directory structure corresponds to the configuration items in the topic configuration file _config.yml for easy reference.

GitHub repository: github.com/XPoet/hexo-…
Online preview: xp.o.cn /

base_info

base_info:
  title: Keep Theme
  author: Keep Team
  url: https://keep.xpoet.cn/
Copy the code

Please fill in the basic information of your website correctly in this configuration item.

title Site title(Will be displayed in the head of the website, as shown below)
The author nickname (which will appear at the bottom of the site and on the article content page, as shown below)
- At the bottom of the web site
- Article Content page
url Website domain name(Use the copyright information module of the article content page to correctly connect the article links, as shown below)

style

style:
  # Theme primary color
  primary_color: "#0066CC"

  # Avatar (You can use local image or image external link)
  avatar: /images/avatar.svg

  # Favicon (You can use local image or image external link)
  favicon: /images/logo.svg

  # Article image align position, value: left | center
  article_img_align: left

  # Left side width
  left_side_width: 260px

  # Content area max width
  content_max_width: 920px

  # Mouse hover
  hover:
    shadow: false # shadow effect when the mouse hover
    scale: false # scale effect when the mouse hover

  # First screen
  first_screen:
    enable: false
    background_img: /images/bg.svg # You can use local image or image external link
    description: Keep writing and Keep loving.

  # Scroll style settings
  scroll:
    progress_bar:
      enable: false
    percent:
      enable: false
Copy the code

Style This configuration item configures the basic style of the web site.

primary_color

Set the site theme color, support RGB, RGBA, hexadecimal color format, such as: RGB (0, 102, 204), RGBA (0, 102, 204, 0.8), #0066cc. The Web security color is recommended.

avatar

Set the author’s profile picture, it will be displayed in the article content page, as shown below.

You can use the local image (that is, the image stored in the keep/source/images/ path) or the image link URL. Writing method reference:

Local image

avatar: /images/avatar.svg
Copy the code

Picture outside the chain

avatar: https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/common-use/avatar.jpg
Copy the code

favicon

Set the site favicon that you can useLocal image(that is, the storagekeep/source/images/Path) orImage link URL.

article_img_align

Set the position of the images on the content page. The default is left, and the options are left and center.

left_side_width

Sets the width of the left TOC catalog module. Normally, you don’t have to. If necessary, keep the unit px.

content_max_width

Sets the maximum width of the content area. Normally, you don’t have to. If necessary, keep the unit px.

Home page
The article page

hover

Set the hover style (homepage article block, TOC table of contents block, button, etc.) to enable shadow and Scale effects respectively.

shadowshadows
scaleScale effects

first_screen

The newly added first screen module of Keep theme V3.0.0 will be displayed on the homepage of the website after being opened.

Enable Whether to enable the first screen
Background_img First screen background image. You can use the local image or image link URL
Description Description of the first screen
openFirst screen effect
Don’t openFirst screen effect

scroll

Set the page scrolling style.

progress_barPages scroll when on the siteAt the top of theAccording to the rollingThe progress bar
percentPages scroll when on the siteThe lower right cornerAccording to the rollingThe percentage

social_contact

social_contact:
  enable: false
  links:
    github: # your GitHub URL
    weixin: # your WeChat QR-Code URL
    qq: # your QQ QR-Code URL
    weibo: # your WeiBo URL
    zhihu: # your ZhiHu URL
    twitter: # your twitter URL
    facebook: # your facebook URL
    email: # your email
Copy the code

Set up third-party social links.

Note:social_contactIt only takes effect when the first screen is enabled!

If you want to change the icon or add another third party link, for example: Add Instagram

inFont AwesomeSearch for Instagram ICONS.
Copy the icon name (as shown above) and add it to the social_contact.links configuration item in the theme configuration file _config.yml.

social_contact:
enable: false
links:
  instagram: https://www.instagram.com/xxxxxxxx
Copy the code

Open the /source/about/index.md file under the Hexo project and fill in the contents of the Adout page. Support for Markdown and HTML;

For reference:
```
---
title: about
date: 2020-03-19 14:59:53
comment: true
---

## About meXPoet "Keep Core Developer"... . . .Copy the code
```
Comment: true Indicates that the comment function is enabled on the page.

Do not modify the title property that is automatically generated when the page is created! Do not delete! For example: title: about cannot be modified! Cannot delete!

If you want to jump to a third-party website when you click the menu in the navigation bar, you only need to fill in the value of the configuration item as the URL of the third-party website. For example, in the header navigation bar, configure the menu to jump to the BaiDu website

menu:
  BaiDu: https://www.baidu.com/
Copy the code

home_article

home_article:
  category:
    enable: false # show category in home page article block
    limit: 3 # max number of categories shown in home page article block
  tag:
    enable: false # show tags in home page article block
    limit: 5 # max number of tags shown in home page article block
Copy the code

This configuration item is used to set the display of labels and classification information at the bottom of the article block on the home page.

This is a category.
Tag Tag
Limit Specifies the number of displays
rendering
- Disable effect
- Open the effect

post

post:
  # Post word count
  # Dependencies: hexo-wordcount (npm install hexo-wordcount)
  # See: https://github.com/willin/hexo-wordcount
  word_count:
    enable: false
    wordcount: false # word count, one article
    min2read: false # time to read, one article

  # Author label
  author_label:
    enable: true
    auto: true # if true, show Lv1, Lv2, Lv3... , If false, show custom label
    # label array item can be one or more
    custom_label_list: ["Trainee"."Engineer"."Architect"."CTO"."BOSS"]
Copy the code

This configuration item is used to set whether to display article word count, reading duration, and author id.

word_count

To enable article wordcount and read duration, you need to install the hexo-wordcount dependency in the Hexo project root directory.

$ npm install hexo-wordcount
Copy the code

wordcountArticle Word Count
min2readReading Time

author_label

There are two ways to set the author id on the content page of an article:

autoAutomatically generateLv1,Lv2,Lv3. , based on the number of articles.
custom_label_listList of custom identifiers, array entries cana 或 multiple, matching is based on the number of articles.

Format reference:

An array entry[" Front end motivator "]
Multiple array entries[" Intern ", "Engineer "," Architect "]

code_copy

code_copy:
  enable: false
  style: default # values: default | mac
Copy the code

This configuration item is used to set the code copy function. After this function is enabled, you can copy codes to the clipboard with one click.

Enable Whether the function is enabled.
Style Sets the style of the code block after the code copy function is enabled. Default and MAC are optional.
- defaultrendering
- macrendering

Number Automatically numbers the directory structure
- number: falseThe effect of unnumbered catalogs
- number: trueThe effect of catalogs with numbers
Expand_all Expands all directory structures
- expand_all: trueAutomatically expand all directory structures
- expand_all: falseExpand the directory at the corresponding location while scrolling the page
Init_open Whether the TOC directory structure is automatically opened when the article page is opened

copyright_info

copyright_info:
  enable: true
Copy the code

This configuration item is used to open the article copyright information module of the article content page.

website_count

website_count:
  # busuanzi
  # See: http://ibruce.info/2015/04/04/busuanzi/
  busuanzi_count:
    enable: false
    site_uv: false
    site_pv: false
    page_pv: false
Copy the code

This configuration item is used to set the website count. The Keep theme has built-in counting, no additional configuration is required, just select the counting item you want to open.

site_uvNumber of visitors to the site (shown at bottom)
site_pvTotal site visits (shown at bottom)
page_pvNumber of articles read (displayed on the Article Content page)

local_search

local_search:
  enable: false
  preload: false # Preload the search data when the page loads
Copy the code

This configuration item is used to set the website search function and is very practical. You are advised to enable it. After this function is enabled, the search button will appear on the right of the navigation bar in the header.

Search function configuration process:

Install the plug-in hexo-Generator-searchDB in the root directory of the Hexo project.
```
$ npm install hexo-generator-searchdb
Copy the code
```

Add the following configuration items to the Hexo configuration file _config.yml.

# Search
## See: https://github.com/theme-next/hexo-generator-searchdb
search:
  path: search.json
  field: post
  content: true
  format: striptags
Copy the code

Set the value of the local_search.enable configuration item in the topic configuration file _config.yml to true.
```
local_search:
  enable: true
Copy the code
```
The local_search.preload configuration item indicates whether the search data is preloaded when the page is loaded.

Full site article search renderings:

comment

comment:
  enable: false
  use: valine # values: valine | gitalk | twikoo

  # Valine
  # See: https://github.com/xCss/Valine
  valine:
    appid: # your leancloud application appid
    appkey: # your leancloud application appkey
    placeholder: # your placeholder

  # Gitalk
  # See: https://github.com/gitalk/gitalk
  gitalk:
    github_id: # GitHub repo owner
    repository: # Repository name to store issues
    client_id: # GitHub Application Client ID
    client_secret: # GitHub Application Client Secret

  # Twikoo
  # See: https://github.com/imaegoo/twikoo
  twikoo:
    env_id: # Tencent Cloud environment id
    region: # environment region. If select Guangzhou, fill in "ap-guangzhou".
Copy the code

This configuration item is used to enable and set the comment system for a topic.

use

use: valine # values: valine | gitalk | twikoo
Copy the code

Configure which review system to use. Valine, Gitalk and Twikoo are currently built into the theme, but you can use the other one.

Valine

Born on August 7, 2017, Valine is a fast, simple and efficient backend-less review system based on LeanCloud.

See details:

Github.com/xCss/Valine…
valine.js.org/

How to use it in Keep:

To create an application, log in to LeanCloud and click in the lower left corner of the console.
Once you’ve created your APP, go to the APP you just created, go to Settings > APP Key in the lower left corner, and you’ll see your APP ID and APP Key.
Enter the required parameter information (APP ID, APP Key, etc.) in the Keep theme configuration file, as shown in the following example.
```
valine:
  appid: ih2nzxxxxxxxxxxxxxxxxxxxxxx
  appkey: gdf6666666666666666666666666
  placeholder: 😜 Make fun of it
Copy the code
```
- appidMandatory.
- appkeyMandatory.
- placeholderFillable, which represents the information displayed in a comment box when no content has been entered.
Valine reviews plugin renderings.

Gitalk

Gitalk, a comment plugin based on Github Issue and Preact.

See details:

Github.com/gitalk/gita…
gitalk.github.io/

How to use it in Keep:

Register or log in to GitHub and create a new OAuth App. Enter your own domain name in the Homepage URL and Authorization callback URL.

After OAuth App is created successfully, save the Client ID and Client Secret, which will be used next.
Register or log in to GitHub, create a new repository, and open Issues to store comments.

Enter your GitHub user name, repository name, OAuth App Client ID, and Client Secret respectively in the theme configuration file, as shown in the following example.

gitalk:
  github_id: XPoet
  repository: hexo-site-comments
  client_id: cdfffffffffffffffffffff
  client_secret: f4b55555555555555555555555555555
Copy the code

Gitalk reviews plugin renderings.

Twikoo

Twikoo, a simple, safe and free static website review system, based on Tencent Cloud development.

See details:

Github.com/imaegoo/twi…
twikoo.js.org/

How to use it in Keep:

If you plan to deploy to an existing cloud development environment, start directly with Step 3.

Enter the Cloud development CloudBase activity page, scroll to the “New user exclusive” section, select the appropriate package (usually 0 yuan package), click “Buy now”, and create a good environment as prompted. Tip: : : tip

Recommended to create Shanghai environment. If the Guangzhou environment is selected, this parameter is requiredregion: ap-guangzhou
Enter an environment name
You are advised to select the charging modePackage in monthly, meal versionBasic class 1, there will be no charge over the free limit
If application Template is displayed, select Empty Template :::

Go to the Cloud Development console
Enter the Environment – Login Authorization, enable “Anonymous Login”
Go to Environment-Security Configuration and add the website domain name to WEB Security Domain name.
Go to Environment-Cloud function and click “New Cloud Function”
Function name: Twikoo, create mode: blank, run environment: Nodejs 10.15, function memory: 128MB, and click next.
Clear the sample code in the input box, copy the following code, paste it into the Function Code input box, and click OK.
```
exports.main = require("twikoo-func").main;
Copy the code
```
After the creation, click “Twikoo” to go to the cloud function details page, go to the “Function Code” TAB, click “File – New File”, type package.json and press Enter
Copy the following code, paste it into the code box, and click “Save and Install dependencies”.
```
{ "dependencies": { "twikoo-func": "1.2.0"}}Copy the code
```
Enter the environment ID env_id in the Keep theme configuration file
```
twikoo:
  env_id: xxxx-xxxx..........
  region:
Copy the code
```
If you select Guangzhou environment, set region to AP-Guangzhou; otherwise, set region to empty.
```
twikoo:
  region: ap-guangzhou
Copy the code
```
Twikoo reviews the plugin renderings.

rss

rss:
  enable: false
Copy the code

This parameter is used to enable the RSS subscription function.

Start the process:

Install the plug-in hexo-Generator-Feed in the root directory of the Hexo project.
```
$ npm install hexo-generator-feed
Copy the code
```

Add the following configuration items to the Hexo configuration file _config.yml.

# Feed Atom
# npm install hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
Copy the code

Enable RSS in the Keep theme configuration file _config.yml.
```
rss:
  enable: true
Copy the code
```
After the RSS subscription function is enabled, the RSS button will be displayed in the lower right corner of the tool button group.

lazyload

lazyload:
  enable: false
Copy the code

This configuration item is used to enable lazy image loading.

When opened, the page will not load all images, when the window scrolls to the image location to load the corresponding image resources.

Effect:

When there are too many pictures, open the lazy loading function, can effectively improve the page loading speed!

cdn

cdn:
  enable: false
Copy the code

This configuration item is used to enable the CDN acceleration function for some theme resources (such as JS files and font files).

pjax

pjax:
  enable: false
Copy the code

This configuration item is used to enable the PJAX function of the theme, bringing the single-page application experience.

PJAX works by fetching HTML from the server via Ajax, replacing the contents of the container on the page with an Ajax request for HTML, and then using pushState to update the browser’s current URL without reloading the page’s layout or any resources (JS, CSS). Thus providing a fast, full page-loading look and feel. But really it’s just Ajax and pushState.

After PJAX is opened, when you click the page to jump, a colored progress bar will appear at the top of the page.

footer

footer:
  since: 2020 # the starting year of your website, Can be null
  icp: # ICP record number of your website, Can be null
Copy the code

This configuration item is used to set the information display at the bottom of the website.

sinceSet the start year of the website, which can be empty.
icpSet the ICP record number of the website, which can be empty.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

The Hexo topic Keep provides a detailed configuration guide

base_info

style

primary_color

avatar

favicon

article_img_align

left_side_width

content_max_width

hover

first_screen

scroll

social_contact

menu

home_article

post

word_count

author_label

code_copy

toc

copyright_info

website_count

local_search

comment

use

Valine

Gitalk

Twikoo

rss

lazyload

cdn

pjax

footer

The Hexo topic Keep provides a detailed configuration guide

base_info

style

primary_color

avatar

favicon

article_img_align

left_side_width

content_max_width

hover

first_screen

scroll

social_contact

menu

home_article

post

word_count

author_label

code_copy

toc

copyright_info

website_count

local_search

comment

use

Valine

Gitalk

Twikoo

rss

lazyload

cdn

pjax

footer

Related Posts

R language generalized linear Model claim Frequency prediction: Over-dispersion, Exposure numbers, and Tree graph visualization

With CodinGame, you can learn to program while playing the game

SVN uploads code to the server at the same time — Hook mechanism (multiplayer WEB development)