使用Hexo开源博客系统,轻松搭建你的个人博客(2)- 配置篇

上一章节,我们介绍了Hexo的基础搭建,搭建完大家一定发现,是英文版本的,并且页面有点丑陋。这一章节,就来跟大家介绍Hexo的配置和主题的设置。
原文链接:查看

站点信息

上一章有跟大家提到过_config.yml这个文件,这个我们先称之为站点全局的配置文件,后续我们说到主题的时候,也会有一个这样的文件,暂时称它主题配置文件。
我们先来看一下全局配置文件主要有哪些内容:

# Site 站点主配置
title: Hexo  # 网站标题
subtitle:    # 网站副标题
description:   # 网站描述
keywords:      # 可以不填写保持默认
author: John Doe  # 网站拥有者昵称
language:    # 网站语言设置,一般根据依赖的主题而定
timezone:    # 网站时区设置,一般不填写保持默认

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url:   # 网站url设置
root:  # 网站根目录链接
permalink: :year/:month/:title.html  # 文章链接,默认是按照 /年/月/日/文章标题 设置的链接
permalink_defaults:  # 默认链接形式
......
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme:  #主题

这些可根据需要设置,其余默认即可,git配置和站点地图配置后续用到再介绍。
信息配置完记得执行hexo g && hexo s,刷新浏览器查看效果。

安装Next主题

主题大家可以在官网下载(https://hexo.io/themes)也可以到GitHub搜索,我推荐使用Next主题,该主题几乎占领了Hexo博客的半壁江山。
Next主题下载地址:https://github.com/theme-next/hexo-theme-next.git
这边介绍的版本是Next6,在Next6版本上其实增加了很多Next5需要手动配置的东西,并且Next5已经停止维护了,所以建议使用Next6版本。

下载Next主题

两种方式:
1.使用git clone命令将Next仓库克隆到hexo目录下的themes/next,需要在根目录下执行,命令为:git clone https://github.com/theme-next/hexo-theme-next.git themes/next
2.直接在Github页面上选择绿色的按钮Clone or Download下载压缩包,然后解压到themes目录下,名字可自行修改。

设置为Next主题

打开全局配置文件_config.yml,找到theme,设置如下:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next   #此处填入你在themes目录下的next主题目录名

测试Next主题

在Git Bash中执行如下命令:

hexo clean && hexo g && hexo s

命令执行完成后在浏览器中输入http://localhost:4000即可查看安装好的Next主题。

配置Next主题

在主题目录下面,也有一个_config.yml的配置文件,我们就叫它主题配置文件,下面我们开始配置。

网站图标设置

打开_config.yml,找到favicon的位置,如下所示:

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  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

将图片放到你的next主题下面的source/images目录下面,然后在主题配置文件中设置即可。

关闭底部由hexo强力驱动

在footer中,将powered和theme下的属性全部设置为false

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

菜单栏设置

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  enable: true  #表示是否显示菜单图标icons
  badges: false  # 显示每个菜单下面有多少个内容

||后面是fontawesome中的图标名称,如果想要修改图标,可以去FontAwesome官网找自己喜欢的图标样式。

主题风格设置

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

默认是Muse,我是使用Gemini,大家可以每个都试看看,看喜欢哪个。

社交链接设置

social:
  GitHub: https://github.com/codernice || github
  #E-Mail: mailto:yourname@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

yourname改成你自己在对应网站的ID,前面的#注释去掉即可。

友情链接设置

# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
links:
  #Title: http://example.com

#Title: http://example.com换成对于网站名称和链接即可

开启阅读更多按钮

auto_excerpt:
  enable: true
  length: 150

默认是false,首页上会显示整篇文章,设置为true开启阅读更多按钮。

文章元数据设置

post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: true
  categories: true

显示在home页的文章创建于、更新于、阅读次数之类的数据

文章字数统计设置

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

该设置必须要添加hexo-symbols-count-time模块依赖,在hexo站点根目录下使用npm install hexo-symbols-count-time --save命令安装模块。

侧边栏头像设置

# 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: 你的头像地址
  # 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.
  opacity: 1 # 设置不透明度,1为完全不透明,0为完全透明
  # If true, the avatar would be rotated with the cursor.
  rotated: true # 设置鼠标放到头像上是否旋转

代码块设置

codeblock:
  # Manual define the border radius in codeblock, leave it blank for the default value: 1
  border_radius: 7   # 按钮圆滑度
  # Add copy button on codeblock
  copy_button:
    enable: true # 设置是否开启代码块复制按钮
    # Show text copy result
    show_result: true # 是否显示复制成功信息

开启文章打赏按钮

# Reward (Donate)
reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front Matter.
  enable: true #开启打赏功能
  animation: false
  #comment: Donate comment here

reward:
  wechatpay: # 微信收款图片地址
  alipay: # 支付宝收款图片地址
  #bitcoin: /images/bitcoin.png

开启相关文章推荐功能

related_posts:
  enable: true #开启
  title: # custom header, leave empty to use the default one
  display_in_home: false #显示在首页
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

需要安装hexo-related-popular-posts模块,在hexo站点根目录下执行npm install hexo-related-popular-posts --save安装模块。

代码块风格设置

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

有normal 、night 、 night eighties 、 night blue 、night bright这几种风格,大家可以都试看看。

添加valine评论系统

# Valine
# You can get your appid and appkey from https://leancloud.cn
# More info available at https://valine.js.org
valine:
  enable: true # 开启valine评论
  appid: # your leancloud application appid
  appkey: # your leancloud application appkey
  notify: false # mail notifier, See: https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder:  # comment box placeholder
  avatar: monsterid # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  language: # language, available values: en, zh-cn
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # if false, comment count will only be displayed in post page, not in home page

valine是第三方插件,需要到https://leancloud.cn注册账号,获取到appid和appkey后放到这里即可。avatar是设置默认头像,可以到https://valine.js.org/avatar选择默认头像,然后在这里设置名字即可。

开启百度分享

# Baidu Share
# Available values: button | slide
# Warning: Baidu Share does not support https.
baidushare:
  type: button  # 设置分享按钮的风格,有button何slide形式

开启needmoreshare分享

needmoreshare2:
  enable: false
  postbottom:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

needmoreshare2依赖theme-next-needmoreshare2模块,要开启的朋友可以到https://github.com/theme-next/theme-next-needmoreshare2 找到方法。

设置文章阅读量

leancloud_visitors:
  enable: true
  app_id: 
  app_key: 
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: false
  betterPerformance: true

appid和appkey跟上面开启valine评论使用的leanCloud是一样的。如果发现文章阅读量不显示,可以到leanCloud后台的存储菜单下,创建Class,命名为Counter.

开启不蒜子统计功能

busuanzi_count:
  enable: true
  total_visitors: true #开启总访客(uv)
  total_visitors_icon: user
  total_views: true #开启总访问数(pv)
  total_views_icon: eye
  post_views: false
  post_views_icon: eye

这边的post_views和上面的leanCloud_visitors冲突,两者都是显示文章阅读量,只开启一个就可以了。

开启本地博客搜索功能

local_search:
  enable: false
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false

该功能依赖hexo-generator-searchdb插件,使用命令npm install hexo-generator-searchdb --save来进行安装,然后在全局配置文件的末尾,加入以下代码即可。

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

总结

以上就是hexo博客常用的基本配置以及基于Next主题的一些设置,更多功能大家可在使用中逐摸索,欢迎讨论交流。

需要安装的模块依赖

1.字数统计:npm install hexo-symbols-count-time --save
2.相关文章推荐:npm install hexo-related-popular-posts --save
3.本地博客搜索功能:npm install hexo-generator-searchdb --save,然后在全局配置文件末尾加入代码

第三方插件

1.valine评论系统:需要到https://leancloud.cn注册账号,获取到appid和appkey
2.文章阅读量:同样需要用到leancloud的appid和appkey

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容