Hexo主题设置

这里以主题yilia为例进行说明。

安装主题

$ hexo clean
$ git clone https://github.com/你安装的主题github地址

启用主题

修改Hexo目录下的_config.yml配置文件中的theme属性,将其设置为yilia。

更新主题

$ cd themes/你安装的主题github地址

$ git pull
$ hexo g # 生成
$ hexo s # 启动本地web服务器

现在打开http://localhost:4000/ ,会看到我们已经应用了一个新的主题。

 

使用hexo deploy部署

hexo deploy可以部署到很多平台,具体可以参考这个链接. 如果部署到github,需要在配置文件_config.xml中作如下修改:

deploy:
  type: git
  repo: [email protected]:13469940053/13469940053.github.io.git
  branch: master

然后在命令行中执行

hexo d

即可完成部署。

注意需要提前安装一个扩展:

$ npm install hexo-deployer-git --save

使用git命令行部署

不幸的是,上述命令虽然简单方便,但是偶尔会有莫名其妙的问题出现,因此,我们也可以追本溯源,使用git命令来完成部署的工作。

clone github repo

$ cd d:/hexo/blog

$ git clone https://github.com/你安装的主题github地址

将我们之前创建的repo克隆到本地,新建一个目录叫做.deploy用于存放克隆的代码。

创建一个deploy脚本文件

hexo generate
cp -R public/* .deploy/13469940053.github.io
cd .deploy/13469940053.github.io
git add .
git commit -m “update”
git push origin master

需要部署的时候,执行这段脚本就可以了(比如可以将其保存为deploy.sh)。执行过程中可能需要让你输入Github账户的用户名及密码,按照提示操作即可。

错误描述

在使用git提交的时候出现错误

The file will have its original line endings in your working directory.

后来发现 自己再提交的时候忘记输入git add 上传的文件 出现了上面的错误,需要下面进行修改:

1 git rm -r -f --cached ./ (删除缓存)

2 git add . (添加该目录下所有文件)

3 git push -u origin master (这时候提交就没问题了)

初次提交的命令
git init
git add README.md
git commit -m "first commit"
git remote add origin [email protected]:xxxx.git
git push -u origin master

Hexo 主题配置

每个不同的主题会需要不同的配置,主题配置文件在主题目录下的_config.yml。
以我们使用的yilia主题为例,其提供如下的配置项(themeyilia_config.yml):

# Header
menu:
  主页: /
  所有文章: /archives
  # 随笔: /tags/随笔

# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #douban: "#"
  #mail: "#"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# Content
excerpt_link: more
fancybox: true
mathjax: true

# Miscellaneous
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar: ""
#是否开启分享
share: true
#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: true
#是否开启云标签
tagcloud: true

#是否开启友情链接
#不开启——
#friends: false

#是否开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: 我是谁,我从哪里来,我到哪里去?我就是我,是颜色不一样的吃货…

其他高级使用技巧

1.绑定独立域名

购买域名
在你的域名注册提供商那里配置DNS解析,获取GitHub的IP地址点击,进入source目录下,添加CNAME文件

$ cd source/
$ touch CNAME
$ vim CNAME # 输入你的域名
$ git add CNAME
$ git commit -m "add CNAME"

2.使用图床

使用七牛云存储
自己在github上搭建的图床:http://jiji262.github.io/qiniuimgbed/ ,需要首先注册七牛账号使用。

3.添加插件

添加sitemap和feed插件

$ npm install hexo-generator-feed
$ npm install hexo-generator-sitemap

修改_config.yml,增加以下内容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

#sitemap
sitemap:
  path: sitemap.xml

配完之后,就可以访问http://13469940053.github.io/atom.xmlhttp://13469940053.github.io/sitemap.xml,发现这两个文件已经成功生成了。

5.添加404公益页面

GitHub Pages有提供制作404页面的指引:Custom 404 Pages。

直接在根目录下创建自己的404.html或者404.md就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。

推荐使用腾讯公益404。

添加about页面

$ hexo new page "about"

之后在sourceaboutindex.md目录下会生成一个index.md文件,打开输入个人信息即可,如果想要添加版权信息,可以在文件末尾添加:

本文链接:<%= post.title %>
作者:
本文基于
知识共享署名-相同方式共享 4.0 国际许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 令狐葱及链接。

6.添加Fork me on Github

获取代码,选择你喜欢的代码添加到hexo/themes/yilia/layout/layout.ejs的末尾即可,注意要将代码里的you改成你的Github账号名。

添加支付宝捐赠按钮及二维码支付

支付宝捐赠按钮

在D:hexothemesyilialayout_widget目录下新建一个zhifubao.ejs文件,内容如下

打赏他


添加完该文件之后,要在D:/hexo/themes/yilia/_config.yml文件中启用,如下所示,添加zhifubao

widgets:
- category
- tag
- links
- tagcloud
- zhifubao
- rss

7.二维码捐赠

首先需要到这里获取你的支付宝账户的二维码图片,支付宝提供了自定义功能,可以添加自定义文字。

我的二维码扫描捐赠添加在about页面,当然你也可以添加到其它页面,在D:hexoblogsourceabout下有index.md,打开,在适当位置添加

欢迎您捐赠本站,您的支持是我最大的动力! ![][http://7xsxyo.com1.z0.glb.clouddn.com/2016/04/15/FoJ1F6Ht0CNaYuCdE2l52F-Fk9Vk202.png]

可以让图片居中显示,注意将图片链接地址换成你的即可。

8.添加百度站内搜索

点击进入,点击其它工具->站内检索->现在使用->新建搜索引擎->查看代码,将代码里的id值复制,打开/d/hexo/themes/jacman/_config.xml,配置成如下即可。

baidu_search:     ## http://zn.baidu.com/
  enable: true
  id: "1433674487421172828" ## e.g. "783281470518440642"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search ## your can change to your site instead of the default site

9.使用不蒜子添加访客统计

详情参考搞定你的网站计数,具体做法很简单,就是在你的themes/your themes/layout/_partial/footer.ejs底部加入这段脚本

然后在

中间添加如下统计信息即可

本站总访问量  次, 访客数  人次, 本文总阅读量 

不蒜子的官方服务网站是不蒜子,目前最大的弊端就是不开放注册,所以对于运行了一段时间的网站,不蒜子的数据都是从1开始,没办法设置,只有等后期开放注册之后,登入网站才能对统计计数进行设置。

10.修改页脚

页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。

修改社交链接

在主题的 _config.yml 文件中,默认支持 QQGitHub 和邮箱的配置,你可以在主题文件的 /layout/_partial/social-link.ejs 文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码:


    

其中,社交图标(如:fa-github)你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识,供你参考:

  • Facebook: fa-facebook
  • Twitter: fa-twitter
  • Google-plus: fa-google-plus
  • Linkedin: fa-linkedin
  • Tumblr: fa-tumblr
  • Medium: fa-medium
  • Slack: fa-slack
  • 新浪微博: fa-weibo
  • 微信: fa-wechat
  • QQ: fa-qq

注意: 本主题中使用的 Font Awesome 版本为 4.7.0

修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。

配置音乐播放器(可选的)

要支持音乐播放,就必须开启音乐的播放配置和音乐数据的文件。

首先,在你的博客 source 目录下的 _data 目录(没有的话就新建一个)中新建 musics.json 文件,文件内容如下所示:

[{
	"name": "五月雨变奏电音",
	"artist": "AnimeVibe",
	"url": "http://xxx.com/music1.mp3",
	"cover": "http://xxx.com/music-cover1.png"
}, {
	"name": "Take me hand",
	"artist": "DAISHI DANCE,Cecile Corbel",
	"url": "/medias/music/music2.mp3",
	"cover": "/medias/music/cover2.png"
}, {
	"name": "Shape of You",
	"artist": "J.Fla",
	"url": "http://xxx.com/music3.mp3",
	"cover": "http://xxx.com/music-cover3.png"
}]

:以上 JSON 中的属性:nameartisturlcover 分别表示音乐的名称、作者、音乐文件地址、音乐封面。

然后,在主题的 _config.yml 配置文件中激活配置即可:

# 是否在首页显示音乐.
music:
  enable: true
  showTitle: false
  title: 听听音乐
  fixed: false # 是否开启吸底模式
  autoplay: false # 是否自动播放
  theme: '#42b983'
  loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'list' # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto'
  volume: 0.7 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
  listFolded: false # 列表默认折叠
  listMaxHeight: # 列表最大高度

文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项 默认值 描述
title Markdown 的文件标题 文章标题,强烈建议填写此选项
date 文件创建时的日期时间 发布时间,强烈建议填写此选项,且最好保证全局唯一
author 根 _config.yml中的 author 文章作者
img featureImages中的某个值 文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top true 推荐文章(文章是否置顶),如果 top 值为 true,则会作为首页推荐文章
cover false v1.0.2版本新增,表示该文章是否需要加入到首页轮播封面中
coverImg v1.0.2版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片
password 文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml中激活了 toc 选项
mathjax false 是否开启数学公式支持 ,本文章是否开启 mathjax,且需要在主题的 _config.yml 文件中也需要开启才行
summary 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories 文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类
tags 文章标签,一篇文章可以多个标签

注意:

  1. 如果 img 属性不填写的话,文章特色图会根据文章标题的 hashcode 的值取余,然后选取主题中对应的特色图片,从而达到让所有文章都的特色图各有特色
  2. date 的值尽量保证每篇文章是唯一的,因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
  3. 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:开源中国在线工具、chahuo、站长工具。

以下为文章的 Front-matter 示例。

最简示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

最全示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

参考链接

Hexo主页
hexo你的博客
Markdown 语法说明 (简体中文版)

本文原始链接:手把手教你使用Hexo + Github Pages搭建个人独立博客 
作者:令狐葱 
本文基于 知识共享署名-相同方式共享 4.0 国际许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名 令狐葱及链接。

你可能感兴趣的:(Hexo主题设置)