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. 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博客換主題