首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo搭建个人博客(三)—— Hexo博客的美化

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

作者头像
木制robot
发布2018-04-13 11:12:08
3.1K0
发布2018-04-13 11:12:08
举报

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


安装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博客的内容说完了,还有一些功能如站点统计等请参考以下的参考资料。

参考资料

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-03-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装Hexo博客主题
  • 博客的配置
    • 分类页面,标签页面,关于页面创建
      • 多说评论
        • 站内搜索
        • 参考资料
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档