hexo博客主题优化
在介绍博客主题优化这个话题以前，我想先介绍hexo主题的大致结构，便于后面将主题优化方面的东西。css
hexo主题结构
我这里选用pure主题为例进行讲解。html
- 进入themes/pure文件夹下执行以下命令
$ tree
.
├── LICENSE
├── README.cn.md
├── README.md
├── _config.yml #主题主配置文件
├── _config.yml.example #主题配置文件例子
├── _source #博客页面例子文件夹
│ ├── 404 #博客404页面只要拷贝到站点soure就行
│ │ └── index.md
│ ├── _data #博客友情连接页面
│ │ ├── gallery.yml
│ │ └── links.yml
│ ├── about #博客关于页面
│ │ └── index.md
│ ├── books #博客书单页面
│ │ └── index.md
│ ├── categories #博客分类页面
│ │ └── index.md
│ ├── links #博客友情连接
│ │ └── index.md
│ ├── repository #博客仓库模版页面
│ │ └── index.md
│ └── tags #博客标签页面
│ └── index.md
├── languages #博客语言切换配置文件夹
│ ├── default.yml
│ ├── en.yml
│ ├── zh-CN.yml
│ └── zh-TW.yml
├── layout #博客布局文件夹 这里就是生成页面的精华部分了
│ ├── _common
│ │ ├── footer.ejs
│ │ ├── head.ejs
│ │ ├── header.ejs
│ │ ├── script.ejs
│ │ └── social.ejs
│ ├── _partial
│ │ ├── archive-book.ejs
│ │ ├── archive-category.ejs
│ │ ├── archive-link.ejs
│ │ ├── archive-list.ejs
│ │ ├── archive-post.ejs
│ │ ├── archive-repository.ejs
│ │ ├── archive-tag.ejs
│ │ ├── archive.ejs
│ │ ├── article-about.ejs
│ │ ├── article.ejs
│ │ ├── item-post.ejs
│ │ ├── pagination.ejs
│ │ ├── post
│ │ │ ├── category.ejs
│ │ │ ├── comment.ejs
│ │ │ ├── copyright.ejs
│ │ │ ├── date.ejs
│ │ │ ├── donate.ejs
│ │ │ ├── gallery.ejs
│ │ │ ├── nav.ejs
│ │ │ ├── pv.ejs
│ │ │ ├── tag.ejs
│ │ │ ├── thumbnail.ejs
│ │ │ ├── title.ejs
│ │ │ └── wordcount.ejs
│ │ ├── sidebar-about.ejs
│ │ ├── sidebar-toc.ejs
│ │ └── sidebar.ejs
│ ├── _script
│ │ ├── _analytics
│ │ │ ├── baidu-analytics.ejs
│ │ │ ├── google-analytics.ejs
│ │ │ └── tencent-analytics.ejs
│ │ ├── _comment
│ │ │ ├── disqus.ejs
│ │ │ ├── gitalk.ejs
│ │ │ ├── gitment.ejs
│ │ │ ├── livere.ejs
│ │ │ ├── valine.ejs
│ │ │ └── youyan.ejs
│ │ ├── _search
│ │ │ ├── baidu.ejs
│ │ │ └── insight.ejs
│ │ ├── analytics.ejs
│ │ ├── comment.ejs
│ │ ├── douban.ejs
│ │ ├── fancybox.ejs
│ │ ├── mathjax.ejs
│ │ ├── pv.ejs
│ │ ├── repository.ejs
│ │ └── search.ejs
│ ├── _search
│ │ ├── baidu.ejs
│ │ ├── index-mobile.ejs
│ │ ├── index.ejs
│ │ ├── insight.ejs
│ │ └── swiftype.ejs
│ ├── _widget
│ │ ├── archive.ejs
│ │ ├── board.ejs
│ │ ├── category.ejs
│ │ ├── recent_posts.ejs
│ │ ├── tag.ejs
│ │ └── tagcloud.ejs
│ ├── about.ejs
│ ├── archive.ejs
│ ├── books.ejs
│ ├── categories.ejs
│ ├── category.ejs
│ ├── index.ejs
│ ├── layout.ejs
│ ├── links.ejs
│ ├── page.ejs
│ ├── post.ejs
│ ├── repository.ejs
│ ├── tag.ejs
│ └── tags.ejs
├── package.json
├── screenshot #主题颜色切换背景
│ ├── pure-theme-black.png
│ ├── pure-theme-blue.png
│ ├── pure-theme-green.png
│ ├── pure-theme-purple.png
│ ├── pure.png
│ └── pure.psd
├── scripts
│ └── thumbnail.js
└── source #主题静态资源文件目录
├── css
│ ├── style.css
│ └── style.min.css
├── favicon.png
├── fonts
│ ├── README.md
│ ├── iconfont.eot
│ ├── iconfont.svg
│ ├── iconfont.ttf
│ └── iconfont.woff
├── images
│ ├── avatar.jpg
│ ├── avatar.jpg1
│ ├── donate
│ │ ├── alipayimg.png
│ │ └── wechatpayimg.png
│ ├── favatar
│ │ ├── SzsFox-logo.png
│ │ ├── chuangzaoshi-logo.png
│ │ └── idesign-logo.png
│ ├── thumb-default.png
│ └── xingqiu-qrcode.jpg
└── js
├── application.js
├── application.min.js
├── insight.js
├── jquery.min.js
├── plugin.js
├── plugin.js.map
└── plugin.min.js
29 directories, 125 files
layout里面的文件使用ejs （js模版语言）ejs官网实现的，里面把整个页面经过js抽取各个小的模块模版文件，同时数据和标签页面是分离的，因此在页面里面能够加载config.yml 里面的配置。前端
整个页面入口文件就是layout.jsjava
<!DOCTYPE html>
<html<%= config.language ? " lang=" + config.language.substring(0, 2) : ""%>>
<%- partial('_common/head', {post: page}) %>
##这里会判断是否启用layout配置
<%
var bodyClass = 'main-center';
if (theme.config.layout) {
bodyClass = theme.config.layout;
}
if (theme.config.skin) {
bodyClass += ' ' + theme.config.skin;
}
bodyClass = page.sidebar === 'none' ? (bodyClass + ' no-sidebar') : bodyClass;
%>
<body class="<%= bodyClass %>" itemscope itemtype="http://schema.org/WebPage">
<%- partial('_common/header', null, {cache: !config.relative_link}) %>
<% if (theme.sidebar && (page.sidebar!='none' || page.sidebar!='custom')){ %>
<% if (theme.config.toc && page.toc){ %>
<%- partial('_partial/sidebar-toc', {post: page}) %>
<% }else{ %>
<%- partial('_partial/sidebar', null, {cache: !config.relative_link}) %>
<% } %>
<% } %>
<%- body %>
<%- partial('_common/footer', null, {cache: !config.relative_link}) %>
<%- partial('_common/script', {post: page}) %>
</body>
</html>
其中<%- partial('_common/footer', null, {cache: !config.relative_link}) %> 表示引入子模块_common/footer.ejs文件，{cache: !config.relative_link}表示参数
咱们的建立的博客文章都会加载这个布局文件。jquery
- 咱们新建立的博客文章有以下的配置：
title: 文章标题 categories: - 文章分类 tags: - 文章标签 toc: true # 是否启用内容索引 comment:true #是否启用评论 layout:模版文件，若是没有默认不加载任何模版 sidebar: none # 是否启用sidebar侧边栏，none：不启用，不配置默认启动
以上配置属于page 域的配置文件属于单个页面的，而config.language 这种是全局配置文件（也就是站点配置文件config.yml），每一个页面都能使用。theme.config 加载的就是主题的配置文件config.yml 文件。git
- 主题配置文件config.yml
# menu
menu:
Home: .
Archives: archives # 归档
Categories: categories # 分类
Tags: tags # 标签
Repository: repository # github repositories
Books: books # 豆瓣书单
Links: links # 友链
About: about # 关于
# Enable/Disable menu icons
menu_icons:
enable: true # 是否启用导航菜单图标
home: icon-home-fill
archives: icon-archives-fill
categories: icon-folder
tags: icon-tags
repository: icon-project
books: icon-book-fill
links: icon-friendship
about: icon-cup-fill
# rss
rss: /atom.xml
# Site
site:
logo:
enabled: true
width: 40
height: 40
url: ../images/logo.png
title: Hexo # 页面title
favicon: /favicon.png
board: <p>欢迎交流与分享经验!</p> # 站点公告
copyright: false # 底部版权信息
# config
config:
skin: theme-black # 主题颜色 theme-black theme-blue theme-green theme-purple
layout: main-center # 布局方式 main-left main-center main-right
toc: true # 是否开启文章章节目录导航
menu_highlight: false # 是否开启当前菜单高亮显示
thumbnail: false # enable posts thumbnail, options: true, false
excerpt_link: Read More
# Pagination 分页
pagination:
number: false #是否开启数字
prev:
alwayShow: true
next:
alwayShow: true
# Sidebar
sidebar: right
widgets:
- board
- category
- tag
- tagcloud
- archive
- recent_posts
# display widgets at the bottom of index pages (pagination == 2)
index_widgets:
# - category
# - tagcloud
# - archive
# widget behavior
archive_type: 'monthly'
show_count: true
# Fancybox
fancybox: false
# Search
search:
insight: true # you need to install `hexo-generator-json-content` before using Insight Search
baidu: false # you need to disable other search engines to use Baidu search, options: true, false
# Donate
donate:
enable: true
# 微信打赏
wechatpay:
qrcode: images/donate/wechatpayimg.png
title: 微信支付
# 支付宝打赏
alipay:
qrcode: images/donate/alipayimg.png
title: 支付宝
# Share
# weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin
share:
enable: true # 是否启用分享
sites: weibo,qq,wechat,facebook,twitter # PC端显示的分享图标
mobile_sites: weibo,qq,qzone # 移动端显示的分享图标
# Github
github:
username: ***
# Comment
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
comment:
type: youyan
disqus: # enter disqus shortname here
youyan:
uid: 1783844 # enter youyan uid
livere:
uid: # enter youyan uid
gitment:
githubID:
repo:
ClientID:
ClientSecret:
lazy: false
gitalk: # gitalk. https://gitalk.github.io/
owner: #必须. GitHub repository 全部者，能够是我的或者组织。
admin: #必须. GitHub repository 的全部者和合做者 (对这个 repository 有写权限的用户)。
repo: #必须. GitHub repository.
ClientID: #必须. GitHub Application Client ID.
ClientSecret: #必须. GitHub Application Client Secret.
valine: # Valine. https://valine.js.org
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
meta: nick,mail,link # custom comment header
pageSize: 10 # pagination size
visitor: false # Article reading statistic https://valine.js.org/visitor.html
# douban 豆瓣书单
# Api：
# https://developers.douban.com/wiki/?title=book_v2 图书
# https://developers.douban.com/wiki/?title=movie_v2 电影
# books：
# https://api.douban.com/v2/book/user/:name/collections?start=0&count=100 我的书单列表
# movies:
# https://api.douban.com/v2/movie/in_theaters 正在上映的电影
# https://api.douban.com/v2/movie/coming_soon 即将上映的电影
# https://api.douban.com/v2/movie/subject/:id 单个电影信息
# https://api.douban.com/v2/movie/search?q={text} 电影搜索
douban:
user: # 豆瓣用户名
start: 0 # 从哪一条记录开始
count: 100 # 获取豆瓣书单数据条数
# PV
pv:
busuanzi:
enable: false # 不蒜子统计
leancloud:
enable: false # leancloud统计
app_id: # leancloud <AppID>
app_key: # leancloud <AppKey>
# wordcount
postCount:
enable: false
wordcount: true # 文章字数统计
min2read: true # 阅读时长预计
# Plugins
plugins:
google_analytics: # enter the tracking ID for your Google Analytics
google_site_verification: # enter Google site verification code
baidu_analytics: # enter Baidu Analytics hash key
tencent_analytics:
# Miscellaneous
twitter:
google_plus:
fb_admins:
fb_app_id:
# profile
profile:
enabled: true # Whether to show profile bar
avatar: images/avatar.jpg
gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
author: 昵称
author_title: Web Developer & Designer
author_description: 我的简介。
location: Shenzhen, China
follow: https://github.com/cofess
# Social Links
social:
links:
github: https://github.com/cofess
weibo: http://weibo.com/cofess
twitter: https://twitter.com/iwebued
# facebook: /
# dribbble: /
behance: https://www.behance.net/cofess
rss: atom.xml
link_tooltip: true # enable the social link tooltip, options: true, false
# My Skills
skills:
Git: ★★★☆☆
Gulp: ★★★☆☆
Javascript: ★★★☆☆
HTML+CSS: ★★★☆☆
Bootstrap: ★★★☆☆
ThinkPHP: ★★★☆☆
平面设计: ★★★☆☆
# My Personal Links
links:
Github: https://github.com/cofess
Blog: http://blog.cofess.com
微博: http://weibo.com/cofess
花瓣: http://huaban.com/cofess
Behance: https://www.behance.net/cofess
# My Personal Labels
labels:
- 前端
- 前端开发
- 前端重构
- Web前端
- 网页重构
# My Personal Works
works:
name:
link: http://www.example.com
date: 2016
# My Personal Projects
projects:
cofess/gulp-startpro: https://github.com/cofess/gulp-startpro
cofess/hexo-theme-pure: https://github.com/cofess/hexo-theme-pure
基本上每一个配置作什么用的，配置文件里面基本写了注解。也很容易理解。
若是还不是很能理解配置项。能够查看https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md 文件。
至此，hexo模版的大致结构已经清楚了。
### 主题优化
#### 修改主题
在config.yml 文件中修改
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: puregithub
修改语言
在config.yml 文件中修改web
# Site language: zh-CN #修改为中文
添加Rss订阅
- 安装feed插件
npm install hexo-generator-feed --save
- 在config.yml添加
# Extensions ## Plugins: https://hexo.io/plugins/ #RSS订阅 plugin: - hexo-generator-feed
- 设置feed插件参数
#Feed Atom feed: type: atom path: atom.xml limit: 20
- 生成预览
hexo g hexo d
预览下就是以下
#### 添加站点地图
站点地图是一种文件，您能够经过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其余搜索引擎。Googlebot等搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站npm
- 分别安装百度和google插件
npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save
- 在博客目录的_config.yml中添加以下代码
# 自动生成sitemap sitemap: path: sitemap.xml baidusitemap: path: baidusitemap.xml
- 编译你的博客
hexo g hexo s
若是你在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了,在本地访问 http://127.0.0.4000/sitemap.xml 和 http://127.0.0.4000/baidusitemap.xml 就能正确的展现出两个sitemap 文件了。json
- 注册百度站长平台
4.1 访问：https://ziyuan.baidu.com/linksubmit/index
4.2 提交连接
提交连接方式有主动推送、自动推送、sitemap、手动上传等。
4.3主动推送
安装对应提交插件
npm install hexo-baidu-url-submit --save
修改配置：
##配置插件 plugin: - hexo-generator-baidu-sitemap - hexo-generator-sitemap - hexo-baidu-url-submit baidu_url_submit: ## 好比3，表明提交最新的三个连接 count: 3 # 在百度站长平台中注册的域名 host: www.liuyong520.cn ## 请注意这是您的秘钥， 请不要发布在公众仓库里! token: upR0BjzCYxTC2CPq ## 文本文档的地址， 新连接会保存在此文本文档里 path: baidu_urls.txt
编译博客
hexo g hexo d
若是出现下图即表示成功了
4.4 自动推送
将以下代码添加到head.ejs中便可生效
<script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script>
4.5 sitemap 提交方式
打开百度站长平台，点击sitemap，填入咱们的sitemap文件路径： <域名> /
提交便可.
可是此时你的域名其实并无被百度站长所收录：
百度依然检索不到你的网站，须要10多个工做日以后才能审核经过。
- 绑定站点到熊掌ID，这样熊掌ID站点管理里面就能看到相关站点数据了
登陆站长平台，注册熊掌ID，提交审核事后
点击站点收录：
#### 静态资源压缩
hexo 的文章是经过md格式的文件通过swig转换成的html，生成的html会有不少空格，并且本身写的js以及css中会有不少的空格和注释。
js和java不同，注释也会影响一部分的性能，空格一样是的。
静态资源压缩也有多种手段：有gulp插件和hexo自带的neat插件。
##### 1.hexo-neat 插件：
- 安装hexo-neat插件
npm install hexo-neat --save
- 修改站点配置文件_config.yml：
# hexo-neat # 博文压缩 neat_enable: true # 压缩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' - '**/jquery.fancybox.pack.js' - '**/index.js'
- 编译博客
hexo g hexo d
##### gulp插件方式
- 安装gulp及相关插件
npm install gulp -g npm install gulp-minify-css --save npm install gulp-uglify --save npm install gulp-htmlmin --save npm install gulp-htmlclean --save npm install gulp-imagemin --save
在 Hexo 站点下新建 gulpfile.js文件，文件内容以下：
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩js文件
gulp.task('minify-js', function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩 public/demo 目录内图片
gulp.task('minify-images', function() {
gulp.src('./public/demo/**/*.*')
.pipe(imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: false, //类型：Boolean 默认：false 屡次优化svg直到彻底优化
}))
.pipe(gulp.dest('./public/uploads'));
});
// 默认任务
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);
只须要每次在执行 generate 命令后执行 gulp 就能够实现对静态资源的压缩，压缩完成后执行 deploy 命令同步到服务器：
hexo g gulp hexo d
修改访问URL路径
默认状况下访问URL路径为：domain/2018/10/18/关于本站,修改成 domain/About/关于本站。 编辑 Hexo 站点下的 _config.yml 文件，修改其中的 permalink字段：
permalink: :category/:title/
博文置顶
- 安装插件
npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save
而后在须要置顶的文章的Front-matter中加上top便可：
-- title: 2018 date: 2018-10-25 16:10:03 top: 10 ---
设置置顶标志
打开：/themes/*/layout/_macro/post.swig，定位到
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
相关文章
- 1. Hexo博客主题优化
- 2. Hexo博客NexT主题SEO优化
- 3. Hexo博客优化之Next主题功能强化
- 4. hexo博客－性能优化
- 5. hexo 博客 seo 优化
- 6. Hexo博客SEO优化
- 7. hexo博客压缩优化
- 8. hexo博客更换主题
- 9. GithubPages+Hexo博客主题Yilia
- 10. Hexo博客换主题
- 更多相关文章...
- • jQuery Mobile 主题 - jQuery Mobile 教程
- • SEO - 搜索引擎优化 - 网站建设指南
- • 算法总结-广度优先算法
- • 算法总结-深度优先算法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他进程嵌入到qt FindWindow获得窗口句柄 报错无法链接的外部符号 [email protected] 无法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的应用-TOPK问题
- 6. 实例演示ElasticSearch索引查询term,match,match_phase,query_string之间的区别
- 7. 数学基础知识 集合
- 8. amazeUI 复择框问题解决
- 9. 背包问题理解
- 10. 算数平均-几何平均不等式的证明,从麦克劳林到柯西
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Hexo博客主题优化
- 2. Hexo博客NexT主题SEO优化
- 3. Hexo博客优化之Next主题功能强化
- 4. hexo博客－性能优化
- 5. hexo 博客 seo 优化
- 6. Hexo博客SEO优化
- 7. hexo博客压缩优化
- 8. hexo博客更换主题
- 9. GithubPages+Hexo博客主题Yilia
- 10. Hexo博客换主题