Hexo搭建个人博客(三)—— Hexo博客的美化

通过前两节的学习,我们已经搭建好自己的博客,就像盖房子一样要对内部进行装修,也就是对博客进行美化。


安装Hexo博客主题

Hexo博客可以安装不同的主题,这里我们只说最火的Next主题。首先我们在自己电脑里的博客文件夹内(即username.github.io文件夹内)右键选择Git Bash here,在终端窗口内输入以下代码:

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

稍等片刻,安装完成后你的themes文件夹内就会多出一个next文件夹,请在站点的配置文件中把主题选为next,即theme: next

博客的配置

接下来我们对博客的配置主要将在两个_config.yml文件中进行。第一个为Hexo博客的站点配置文件位于你的博客文件夹(即username.github.io文件夹)内;第二个位于next文件夹内。 首先让我们看看站点配置文件都有什么:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: why so serious?  # 站点名
subtitle:  # 副标题
description:
author: WoodenRobot  # 作者
language: zh-Hans # 语言,zh-Hans为中文简体
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://woodenrobot.me # 博客网址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions  # 这里配置站点所用主题和插件
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next  #请添加next主题并选择
#theme: landscape
#theme: yilia
# 多说
duoshuo_shortname: woodenrobot  # xxx.duoshuo.com,xxx即是shortname
# 百度  # 需要安装插件 npm install hexo-generator-baidu-sitemap@0.1.1 --save
baidusitemap:
  path: baidusitemap.xml
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/Wooden-Robot/Wooden-Robot.github.io.git
  branch: master
  plugins: -hexo-generator-feed

大家可以根据自己的情况进行设置。 接下来是主题的配置文件:

# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# Place your favicon.ico to /source directory.
favicon: /favicon.ico
# Set default keywords (Use a comma to separate)
keywords: "woodenrobot"
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml #此处需要安装插件npm install hexo-generator-feed --save
# Specify the date when the site was setup
since: 2016
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu:
  home: /                   #主页
  categories: /categories   #分类页(需手动创建) 教程请往下看!
  about: /about             #关于页面(需手动创建)
  archives: /archives       #归档页
  tags: /tags               #标签页(需手动创建)
  #commonweal: /404.html    #公益 404 (需手动创建)
# Enable/Disable menu icons.
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of menu item and value is the name of FontAwsome icon.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes #此为主题内主题,建议选择Mist。个人感觉比较稳定Bug少,改用其他主题可能会出现未知Bug(取决于作者是否在最新版内完善)。
#scheme: Muse
scheme: Mist
#scheme: Pisces
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
#links_title #以下是侧边栏的友情链接,你们的配置文件中可能没有,按我的样式添加即可。
links_title: 友情链接
links:
  瓢虫映像: http://site.douban.com/177837/
# Social links
social:
  weibo: http://weibo.com/u/1561651905
  GitHub: https://github.com/Wooden-Robot
  zhihu: https://www.zhihu.com/people/mu-zhi-robot
# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  Weibo: weibo
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
# default : /images/default_avatar.jpg
avatar: http://7xraal.com1.z0.glb.clouddn.com/avatar.jpg  # 此处为侧边栏里的头像可以放入图片链接,也可将图片放入站点文件的source/uploads中(没有请在source中新建uploads)或者放入theme文件的source/images中。
# TOC in the Sidebar
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:
sidebar:  # 此处应为侧边栏左右位置,但并无什么作用,乱选无用或有bug。
  # Sidebar Position, available value: left | right
  position: left
  #position: right
  # Sidebar Display, available value:
  #  - 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 icon.
  #display: post
  display: always
  #display: hide
  #display: remove
# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------
# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
#   enabled: [true/false] - Replace with specific image
#   image: url-of-image   - Images's url
custom_logo:
  enabled: false
  image:
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically Excerpt
auto_excerpt:
  enable: true
  length: 150
# Use Lato font
use_font_lato: true
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# MathJax Support
mathjax:
# Swiftype Search API Key  # 站内搜素,教程请看往下看!
swiftype_key: TChYnQxfabLwWxErgM-L
# Baidu Analytics ID
#baidu_analytics:
# Duoshuo ShortName  # 多说评论,教程请看往下看!
duoshuo_shortname: woodenrobot
duoshuo_hotartical: true
# Disqus
#disqus_shortname:
# Share
#jiathis:
#add_this_id:
# Share
duoshuo_share: true
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:
# Google Analytics
#google_analytics:
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: false
  user_id: 0
  #admin_nickname: ROOT
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable: false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: #<app_id>
  app_key: #<app_key>
# Tencent analytics ID
# tencent_analytics:
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------
# Motion
use_motion: true
# Fancybox
fancybox: true
# Static files
vendors: vendors
css: css
js: js
images: images
# Theme version
version: 0.5.0

分类页面,标签页面,关于页面创建

以标签页面为例: 1.首先运行以下命令:

# 标签为"tags",分类为"categories",关于为"about"
hexo new page "tags"

在站点/source目录下会生成一个tags文件夹,里面包含一个index.md文件。 2.修改/source/tags目录下的index.md文件

title: tags
date: 2015-09-29 14:37:02
type: "tags" # 同理分类为"categories",关于为"about"
---

3.修改主题配置文件 去掉tags的注释

menu:
  home: /                       #主页
  categories: /categories	    #分类页(需手动创建)
  #about: /about		        #关于页面(需手动创建)
  #archives: /archives	     	#归档页
  tags: /tags		        	#标签页(需手动创建)
  #commonweal: /404.html        #公益 404 (需手动创建)

多说评论

多说评论的添加在这就不多说了,官方教程内已经讲得非常详细,关于多说评论的美化如显示系统与浏览器请参考loveNight的博客里面讲的也很详细,如果还是不懂请在下方评论留言。

站内搜索

站内搜索的官方教程有所变化,所以在此为大家详细讲解一下。 前往Swiftype注册页面,注册一个新账户。

编辑站点配置文件,新增字段 swiftype_key,值设置成上述步骤复制出来的key。

12

# Swiftype Search Keyswiftype_key: xxxxxxxxx


到此基本上已经把Hexo博客的内容说完了,还有一些功能如站点统计等请参考以下的参考资料。

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AhDung

【手记】解决Resharper 2018.x起本机license server不能用的问题

ReSharper升级到2018版后,一直用的好好的本机license server(下称LS)不能用了,报The license server address...

38830
来自专栏Jerry的SAP技术分享

通过一个实际例子理解Kubernetes里pod的自动scale - 水平自动伸缩

kubectl scale命令用于程序在负载加重或缩小时进行pod扩容或缩小,我们通过一些实际例子来观察scale命令到底能达到什么效果。

15730
来自专栏landv

烽火2640路由器命令行手册-05-路由器配置命令

使用auto-summary命令激活自动路由汇总功能,no auto-summary命令则关闭自动路由 汇总功能。

18140
来自专栏Golang语言社区

阅读源代码的姿势:以 go-restful 为例

一般初学者确定一个方向,比如web 后端、前端等,会选择一门编程语言深入下去,比如后端java、python、go等。通过项目不断练习编程语言和编程思维,知道如...

18030
来自专栏FreeBuf

远程RPC溢出EXP编写实战之MS06-040

0x01 前言 MS06-040算是个比较老的洞了,在当年影响十分之广,基本上Microsoft大部分操作系统都受到了影响,威力不亚于17年爆出的”永恒之蓝”漏...

322100
来自专栏Kubernetes

cluster-proportional-autoscaler源码分析及如何解决KubeDNS性能瓶颈

Author: xidianwangtao@gmail.com 工作机制 cluster-proportional-autoscaler是kubernetes的...

593100
来自专栏Spring相关

feignClient中修改ribbon的配置

在使用@FeignClient注解的时候 是默认使用了ribbon进行客户端的负载均衡的,默认的是随机的策略,那么如果我们想要更改策略的话,需要修改消费者yml...

45210
来自专栏FreeBuf

新手指南:DVWA-1.9全级别教程之Brute Force

目前,最新的DVWA已经更新到1.9版本 ,而网上的教程大多停留在旧版本,且没有针对DVWA high级别的教程,因此萌发了一个撰写新手教程的想法,错误的地方还...

50390
来自专栏IMWeb前端团队

Node.js ORM 框架 sequelize 实践

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 Node.js ORM 框架 sequelize 实践 最近在...

674100
来自专栏ml

unbuntu系统( PC机 )中安装360wifi步骤

少说废话,每一步都经过验证:   1.  首先查看一下当前使用的linux版本: gxjun@gxjun:~$ uname -r 4.8.0-59-generi...

36430

扫码关注云+社区

领取腾讯云代金券