Hexo Next主题配置

发表于 | 更新于 | 分类于 ， | 评论数： | 阅读次数：
本文字数： 6.6k | 阅读时长 ≈ 6 分钟

概述

看懂配置文件， 自己想怎么弄就怎么弄！！

  • Next 版本号6.0.0以上
  • 主要根据Next 主题配置文件进行部分介绍

设置菜单

使用Next主题， 需手动创建 tags页面和categories页面 (创建页面都是如下的操作)

  1. 命令行cmd进入站点文件夹
1
2
3
cd ./TestBlog
hexo new page "tags"
hexo new page "categories"

  1. 进入站点文件夹下的source文件夹, 可以看到 Hexo给我们创建了两个文件夹，categories和tags

PS: Hexo创建一个新的页面就会在站点文件夹下的source文件夹新建该页面的文件夹

  1. 修改 categories文件夹下的index.md为如下
1
2
3
4
5
---
title: 分类
date: 2018-11-08 20:41:49
type: "categories"
---
  1. 修改tags文件夹下的index.md为如下
1
2
3
4
5
---
title: 标签
date: 2018-11-08 20:41:30
type: "tags"
---
  1. 修改主题配置文件_config.yml
    修改了主题配置文件中menu的话，就会将分类categories和标签tags页面的超链接显示到菜单栏上
1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  categories: /categories/ || th
  tags: /tags/ || tags
  # about: /about/ || user
  archives: /archives/ || archive
  # schedule: /schedule/ || calendar
  # sitemap: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

PS: menu配置的解释

  • 比如categories: /path/ || th表示菜单栏显示的名字为categories, 资源放在站点文件夹的 source/path/下, th表示FrontAwesome的th图标
  • 关于菜单栏显示 categories为中文, 是因为站点配置文件设置了语言为中文, 然后hexo会去找英文转中文的配置, 该配置在themes/next/languages/zh-CN.yml

修改Next主题的样式

Next主题有4种样式可以切换

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

  1. Muse

  2. Mist

  3. Pisces

  4. Gemini

在侧边栏上加入Github CSDN等信息

修改social字段即可, 网址后面的是图标, 到FrontAwesome找到自己喜欢的图标即可使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
social:
  GitHub: https://github.com/vonsdite || github
  CSDN: https://blog.csdn.net/vonsdite || bug
  E-Mail: mailto:vonsdite@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #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

social_icons:
  enable: true
  icons_only: false
  transition: false

网站右上角加Github标识

在网站的右上角加入Github Follow的标识

1
2
3
4
5
# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
github_banner: https://github.com/vonsdite || Follow me on GitHub

修改Next的用户头像

  1. 在站点文件夹source/images/放入你的头像图片

  2. 修改配置文件如图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  # 圆形框
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  # 透明度 0 - 1 间设置
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  # 设置为真, 表示头像会转
  rotated: false

设置查看文章时有无TOC

如果想关闭TOC前的数字, 就将number设置为false即可

1
2
3
4
5
6
7
8
9
# Table Of Contents in the Sidebar
toc:
  enable: true

  # Automatically add list number to toc.
  number: true

  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false

设置Sidebar

以下的配置信息是设置Sidebar的位置, 和Sidebar的显示, 不同的Next主题有不同的设置, 具体见配置信息

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
32
sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right

  # Manual define the sidebar width.
  # If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display, available value (only for Muse | Mist):
  #  - 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

  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12

  # Back to top in sidebar (only for Pisces | Gemini).
  b2t: false

  # Scroll percent label in b2t button.
  scrollpercent: true

  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

文章设置

设置点击阅读全文时文章是否跳到阅读全文位置

1
2
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: false

保存上次阅读的位置在cookies中

1
2
# Automatically saving scroll position on each post/page in cookies.
save_scroll: false

设置阅读全文按钮

建议不要自动生成阅读全文, 建议使用在你的文章中使用<!-- more -->来生成阅读全文按钮

1
2
3
4
5
6
7
8
9
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

# Read more button
# If true, the read more button would be displayed in excerpt section
read_more_btn: true

在文章加入打赏

在站点文件夹source/images/放入支付宝和微信收款码二维码, 修改配置即可

1
2
3
4
5
6
reward:
  enable: true
  #comment: Donate comment here
  wechatpay: /images/wechatpay.jpg
  alipay: /images/alipay.jpg
  #bitcoin: /images/bitcoin.png

设置文章字体

1
2
3
4
5
6
7
# 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
  posts:
    external: true
    family: Comic Sans MS

修改网站的图标

效果如图

  1. 准备一张图片，然后到图片网站制作16*16, 32*32大小的图标

  2. 将制作好的图标放入到站点文件夹source/images中

  3. 修改Next主题配置文件

修改配置文件中favicon的值, 路径为你保存好的图标路径名

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16-next.ico
  medium: /images/favicon-32x32-next.ico
  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

设置网站底部信息

  1. 修改网站部署的起始年份 since
  2. 修改网站底部的图标 icon为爱心, 并设置图标颜色, 并让图标动起来（有心跳的感觉）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2018

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
    # `heart` is recommended with animation in red (#ff0000).
    name: heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"
  1. 关闭网站底部 Hexo驱动和Next主题版本
1
2
3
4
5
6
7
8
9
10
11
12
# 该值属于 footer键的一部分
  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

使用Hexo data files 配置主题

不一定采用，看个人需要

为了使主题与配置分离, 方便升级主题，采用 Hexo data files 进行配置

  1. 创建文件
    在站点文件夹创建source/_data/next.yml文件

  2. 复制配置文件
    将所有配置内容，包括站点和主题配置文件移入 source/_data/next.yml 文件。后面的所有配置更改都将在此文件内进行。

  3. next.yml 文件中启用 override

1
override: true
-------本 文 结 束 感 谢 您 的 阅 读-------
赞赏一杯咖啡
0%