基于Hexo搭建个人博客（2）

基础环境搭建参考: 基于Hexo搭建个人博客(1)

主题选择

Hexo的一大优势就是提供了足够丰富的主题插件，且安装使用较为方便，个性化的配置改动也较为容易.
以下给出了两种搜索主题的方式，可以挑选喜欢的主题并按照帮助文档安装配置即可

官网给的主题列表

官网主题列表

Github搜索主题列表

除了官网，也可以在Github搜索Hexo的主题，搜索关键词Hexo theme

主题配置

此处选择了使用较多的一款主题NexT进行配置

下载插件

1 2	cd hexo git clone https://github.com/theme-next/hexo-theme-next themes/next

设置插件

修改hexo根目录下的_config.yml（记住:是hexo/_config.yml，不是hexo/themes/next/_config.yml）搜索字段 theme,将theme由landspace（默认的）修改为next

cd hexo
vim _config.yml

# theme: landspace
theme: next

启动hexo即可观察到效果

NexT主要配置详解

NexT主题的具体配置详见：hexo/themes/next/_config.yml，其中每个字段都有详细的注释，接下来以一下样式为参考说明需要如何配置

侧边栏配置

scheme选择：Pisces

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

侧边栏配置：

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  tags: /tags/ || fa fa-tags
  # about: /about/ || fa fa-user
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false


# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
  # Sidebar Position.
  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 (only for Muse | Mist), available values:
  #  - 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

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

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

# Posts / Categories / Tags in sidebar.
site_state: true

# 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/xxxx || fab fa-github
  E-Mail: mailto:xxxx@xxx.com || fa fa-envelope
  Weibo: https://weibo.com/u/xxxxxx || 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

本地搜索插件安装

安装本地搜索插件，方便本地直接搜索，效果如下图：

1	npm install hexo-generator-searchdb --save