学无止境

KNOWLEDGE HAS NO LIMIT

0%

hexo

发表于 分类于 Valine：
本文字数： 3.9k 阅读时长 ≈ 4 分钟
官方文档地址：https://hexo.io/zh-cn/docs/configuration

官方文档地址：https://hexo.io/zh-cn/docs/configuration

一、基本设置

1、启动主题

  • 1、git clone主题到hexo\blog\themes文件夹下

  • 2、修改hexo\blog\_config.yml文件

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: hexo-theme-next

  • 3、在根目录打开命令行输入hexo s查看效果

2、更改主题为中文

修改hexo\blog\_config.yml文件

1
language: zh-CN

3、增加标签页和分类页

  • 修改主题的配置文件hexo\blog\themes\hexo-theme-next\_config.yml
1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  schedule: /schedule/ || fa fa-calendar
  sitemap: /sitemap.xml || fa fa-sitemap
  commonweal: /404/ || fa fa-heartbeat
  • 创建标签页

在hexo根目录执行hexo n page tags会在hexo\blog\source路径下生成tags文件夹，修改里面的index.md文件

1
2
3
4
5
---
title: 标签
date: 2020-12-06 21:09:12
type: "tags"
---
  • 创建分类页

在hexo根目录执行hexo n page categories会在hexo\blog\source路径下生成categories文件夹，修改里面的index.md文件

1
2
3
4
5
---
title: 分类
date: 2020-12-06 21:16:09
type: "categories"
---

4、主题样式更改

修改主题配置文件

1
2
3
4
5
6
7
8
9
10

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

设置头像

1
2
3
4
5
6
7
8
9

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

更改作者标题链接

hexo主配置文件

1
2
3
4
5
6
7
8
# site
title: Sylser’s Blog
subtitle: ''
description: ''
keywords:
author: SYLSER
language: zh-CN
timezone: ''

主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/sylser || fab fa-github
  E-Mail: mailto:[email protected] || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
  enable: true
  icons_only: false
  transition: false
  
 # 友情链接
# Blog rolls
links_settings:
  icon: fa fa-globe
  title: Links
  # Available values: block | inline
  layout: block

links:
  友情链接: https://example.com

5、新建一篇博客

1
hexo n "第一篇博客"

编辑hexo\blog\source\_posts\第一篇博客.md添加分类和标签

1
2
3
4
5
6
7
8
9
---
title: 第一篇博客
date: 2020-12-06 21:58:32
#tags: "JAVA"
tags:
	- java
	- linux
categories: 基础
---

6、开启打赏功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Donate (Sponsor) settings
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: true
  comment: Buy me a coffee

reward:
  wechatpay: /images/wxpay.jpg
  alipay: /images/alipay.jpg
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

二、常见问题

1、安装完成之后出现警告 Warning: Accessing non-existent property ‘lineno’ of module exports inside circular dependency

  • 原因：当前node版本为14.16，切换为12.X

2、busuanzi_count失效

1
2
3
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
替换为
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

3、中文锚点失效

在post-details.js文件中找到

1
2
3
var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));
// 下面加一句重新解析
targetSelector = decodeURI(this.getAttribute('href'))

4、分页按钮不正常显示

1
2
3
4
5
6
7
8
9
10
11
12
13
找到pagination.ejs，添加一句escape: false
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left"></i>',
        next_text: '<i class="fa fa-angle-right"></i>',
        mid_size: 1,
        escape: false
      })
    }}
  </nav>
{% endif %}
赏口饭吃吧！