搭建完hexo博客后,需要针对博客进行优化,具体如下:
注意1:每次做变更后,均需要使用hexo g和hexo s。
注意2:在更改类似于theme: next时,next前需要添加空格,否则编译报错。
1、下载next主题
git clone https://github.com/iissnan/hexo-theme-next.git
mv hexo-theme-next next
blog/_config.yml文件,搜索heme: landscape改为theme: next
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
git bash输入
hexo g
hexo s
2、更换主题布局:
blog/themes/next/_config.yml文件,搜索Scheme Settings,修改如下:
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
git bash输入
hexo g
hexo s
3、修改菜单
blog/themes/next/_config.yml文件,搜索Menu Settings,修改如下:
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
git bash下输入命令,添加tags、categories
$ hexo n page tags
$ hexo n page categories
blog/source/categories/创建index.md,并添加如下内容:
---
title: 分类
date: 2018-10-17 14:39:31
type: categories
---
blog/source/tags/创建index.md,并添加如下内容:
---
title: 标签
date: 2018-09-14 14:39:31
type: tags
---
git bash输入
hexo g
hexo s
4、修改博客语言
blog/_config.yml文件,搜索language,修改以下:
language: zh-Hans
git bash输入
hexo g
hexo s
5、设置头像
blog/themes/next/source/images目录中,放入logo.jpg 最好是正方形
blog/themes/next/_config.yml文件。搜索avatar,修改如下:
avatar: /images/logo.jpg
git bash输入
hexo g
hexo s
6、修改作者名和链接
blog/_config.yml文件,搜索Site,修改如下:
# Site
title: XXX's Blog
subtitle:
description:
keywords:
author: Marshal
language: zh-Hans
timezone:
git bash输入
hexo g
hexo s
7、开启侧边栏社交链接
blog/themes/next/_config.yml文件,搜索Social
social:
GitHub: https://github.com/justforui || github
E-Mail: mailto:justforui @qq.com || envelope
weibo: https://weibo.com/u/justforui || weibo
Google: https://plus.google.com/justforui || 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
8、开启友情链接
blog/themes/next/_config.yml文件,搜索Blog rolls,方法同上。
9、首页文章缩略设置
blog/themes/next/_config.yml文件,搜索auto_excerpt,修改如下:
auto_excerpt:
enable: true
length: 10
10、设置动态背景
blog/themes/next/_config.yml文件,搜索canvas,修改如下:
#Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: true
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
11、设置动态背景增加搜索功能
$ npm install hexo-generator-searchdb --save
blog/_config.yml文件,添加如下:
search:
path: search.xml
field: post
format: html
limit: 10000
blog/themes/next/_config.ym文件,搜索local_search,修改如下:
local_search:
enable: true
12、隐藏底部的“强力驱动”内容
blog/themes/next/layout/_partials/footer.swig,注入如下代码块:
<!--
{% if theme.footer.powered %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}
{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} — {#
#}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}
-->
13、增加分享功能
git bash输入:
$ rm -rf themes/next/source/lib/needsharebutton
$ git clone https://github.com/theme-next/theme-next-needmoreshare2 themes/next/source/lib/needsharebutton
blog/themes/next/_config.yml,搜索needmoreshare2,修改如下:
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
14、添加页面加载效果
blog/themes/next/_config.yml文件,搜索pace_theme修改如下:
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal
15、压缩页面静态资源
$ npm install hexo-neat --save
打开blog/_config.yml全局配置文件添加如下配置:
#静态资源压缩优化
# hexo-neat
neat_enable: true # 启用neat
# 对html优化
neat_html:
enable: true
exclude:
# 对css优化
neat_css:
enable: true
exclude:
- '*.min.css'
# 对js优化
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'
16、删除博文目录自动生成的序数
blog/themes/next/_config.yml,搜索toc,修改如下:
toc:
enable: true
# Automatically add list number to toc.
number: false
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
网友评论