Hexo-博文编辑手册

Hexo常见命令

更多知识见hexo的官方文档

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

缩写:

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令:

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

其中,hexo d -g 是最常用的。

草稿

草稿相当于很多博客都有的“私密文章”功能。

$ hexo new draft “new draft”

会在source/_drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上,链接也访问不到。也就是说如果你想把某一篇文章移除显示,又不舍得删除,可以把它移动到_drafts目录之中。

如果你希望强行预览草稿,更改配置文件:

render_drafts: true

或者,如下方式启动server:

$ hexo server —drafts

下面这条命令可以把草稿变成文章,或者页面:

$ hexo publish [layout]

博文参数设置

默认参数三个:

  • title标题
  • date编辑日期
  • tags标签([1,2,3]可实现多个标签)

可选参数:

  • categories分类([1,2,3]可实现多层分类)
  • description简介

具体如下:

期望效果

补充:

  • photos(文章首图)“url”
  • password(密码)文章的访问密码
  • top(置顶系数)设置数值,大者优先
  • mathjax(数学公式)bool型,默认false
  • comments(评论功能)bool型,默认true
  • updated (修改日期)
  • permalink(url中的名字-文件名)
  • layout (post或page)

More截断和封面设置

使用<!-- more -->进行截断,<!-- more -->上面的内容就是显示在主页的摘要,把图片放在<!-- more -->上面就可以了。 (不要与description同时使用,否则无效)

或者:

1
2
3
4
5
6
7
8
9
10
11
12
---
title:
categories:
tags:
copyright: true
comments: false
description:
date: 2017-11-09 14:33:32
top:
photos:
- "http://oz2tkq0zj.bkt.clouddn.com/17-11-9/52323298.jpg"
---

Markdown语法问题

“>”引用问题

已解决。【通过安装NexT主题兼容了“>”语法,详见第4部分】

使用”>”引用语法时,在网页上会解析为奇怪的居中。

正确期望如下图所示:(页面实际效果并不是这样)

期望效果

实际效果:(一开始我的内心是绝望的~)

title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL中
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: #文章分类目录,可以为空,注意:后面有个空格
tags: #文章标签,可空,多标签请用格式[tag1,tag2,tag3],注意:后面有个空格

description: #这里是文章描述,在这里写了内容,则会首页该文章只显示这部分内容作为摘要,如果你想自定义摘要位置,那么这里就不要写,使用

这里开始使用markdown格式输入你的正文。

目前已经显示正常~

(我使用的markdown编辑器为:Typora

本地图片显示

基本解决。

对于Typora的默认设置,图片是保存在本地的。

需要对图片的插入方式做一些调整。

决定采用:hexo博客图片问题【dalao相助~】

先设置配置文件中post_asset_folder为true。

1
post_asset_folder: true #修改_config.yml配置文件post_asset_folder项为true。本地插入图片

按照上面博客的方法就行了。

值得注意的是,图片的引用格式需要无前缀

1
![期望效果](1530785095341.png)

Plus. 尝试了如下的Typora修改,发现会有一个asset的后缀名,也挺麻烦。

这个方法暂时不能用。233.

比较尴尬的是,此时,图片在本地编辑的时候就不能实时查看了。。。简单来说,实际操作起来有点麻烦。。。

学(zhuang)习(bi)的道路果然天高地远~

mark一个以后可能出现的坑:

想引入某些dalao 的链接时,如果链接里包含中文,那么再写入md文件里生成网页后这个链接就打不开了…..

NexT主题

Hexo有很多主题可以用。

我选用了NexT主题,看起来很不错~(next官网)

​ (超级Fancy的 Muse 方案: LEAFERx | XiaMo | OAwan

Github开源,有官方中文Handbook【点击前面NexT链接即可】。就不啰嗦了~

也可以参考:使用Hexo+Github一步步搭建属于自己的博客(进阶)(相对来说比较简明)

最后的效果如何呢~既然你已经看到这里了。。。2333

制作gif动图+静态图的复合头像

我通过一张gif和一张背景透明化的静态图合成了头像。(其实从头像很难看出来是gif,2333)

如下图:

stellarkey

  • 透明背景网上容易找到制作方法,可以在线制作。
  • 合成叠加需要PS的时间轴动画功能。
  • 还设置了头像旋转。一些Geek功能可以参考 这里

调试问题

头像解析BUG

当我的gif制作好以后,会在某段时间以后突然不能被网页解析。而其它图片的显示都是正常的。结果,把avatar.gif换了一个名字就好了(滑稽)。

文章配置的语法问题

错误为:can not read a block mapping entry; a multiline key may not be an implicit key

观察,事实证明是文章的配置上出了一点语法问题。如:在配置项的:后忘记加空格。比较容易解决~

Git操作失败并提示Another git process seems to be running in this……

Git操作的过程中突然显示Another git process semms to be running in this repository, e.g. an editor opened by ‘git commit’. Please make sure all processes are terminated then try again. If it still fails, a git process remove the file manually to continue…
翻译过来就是git被另外一个程序占用,重启机器也不能够解决。

原因在于Git在使用过程中遭遇了奔溃,部分被上锁资源没有被释放导致的。

解决方案:

进入(本地)项目文件夹下的.deploy/.git文件中(显示隐藏文件夹或rm .git/index.lock)删除index.lock文件即可。

参考:Git操作失败并提示Another git process seems to be running in this……

评论区设置

使用Valine。极简主义,赞。

更实在的教程:为你的Hexo加上评论系统-Valine

新增:一个 Valine 的拓展应用,用来增强 Valine 的邮件通知。

​ 也可以参考:Hexo 优化 —- Valine 扩展之邮件通知

插入多媒体

音乐

参考:Hexo博客中插入音乐/视频/以及 hexo添加音乐、high一下及一些坑为Hexo添加音乐

hexo-tag-aplayer:https://github.com/grzhan/hexo-tag-aplayer

安装命令:

1
npm install hexo-tag-aplayer

效果展示:

(网易云外链播放器)

Plus. 外链转换工具, HHTjim’S 部落格(需要手动参数调整)

最后采用了折中的办法~如下:

BGM
Towards the Light - Jacoo

视频

hexo-tag-dplayer: https://github.com/NextMoe/hexo-tag-dplayer

安装命令:

1
npm install hexo-tag-dplayer

效果展示:

(Bilibili分享-嵌入)

More: 在HTML中添加视频的代码

视频属性常用设定

  • 视频居中
    • 使用<center> ... </center>
  • widthheight

    • 常用参数width=90% height=350。比例合适~
    • 属于标签的通用属性了,这个不用多说。 分别是宽度、高度。
  • scrolling

    • scrolling 属性规定是否在 iframe 中显示滚动条。
    • 默认地,如果内容超出了 iframe,滚动条就会出现在 iframe 中。
描述
auto 在需要的情况下出现滚动条(默认值)。
yes 始终显示滚动条(即使不需要)。
no 从不显示滚动条(即使需要)。
  • src
    • 文件的地址。
  • border
    • border 属性规定图像周围的边框的宽度,就是说可以增加或去掉图像的边框。
    • 默认地,没有边框的(=0)。
  • frameborderframespacing
    • frameborder 属性规定是否显示框架周围的边框。
描述
1 有边框(默认值)。
0 无边框。
  • framespacing是框架元素与它周边元素的空格个数。一般没什么作用。
  • allowfullscreen
    • 启用 iframe 的内容以在全屏模式下显示。如果缺少,则仅 iframe(而非框架内的内容)可以进入全屏模式。
  • scale
    • 说明: (可选)当 width 和 height 值是百分比时,定义应用程序如何放置在浏览器窗口中。
    • “Showall”(默认值)使整个 flash 内容显示在指定区域中,且不会发生扭曲,同时保持它的原始高宽比。边框可能会出现在应用程序的两侧。
    • “Noborder”对 flash 内容进行缩放以填充指定区域,不会发生扭曲,它会使应用程序保持原始高宽比,但有可能会进行一些裁剪。
    • “Exactfit”使整个 flash 内容显示在指定区域中,但不尝试保持原始高宽比。可能会发生扭曲。
    • 如果忽略此属性(而且 width 和 height 值是百分比),则它的默认值是 showall。

修改链接文字样式

将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。
themes\next\source\css_common\components\post\post.styl 添加以下代码:

1
2
3
4
5
6
7
8
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

选择 .post-body 是为了不影响标题,选择 p 是为了不影响首页“阅读全文”的显示样式。

Html标记语言更改文字样式

参考:编辑器markdown字体、颜色与字号的设置

给出几个实例:

1
2
3
4
5
<font face="黑体">黑体字示例</font>
<font face="微软雅黑">微软雅黑示例</font>
<font face="STCAIYUN">华文彩云示例</font>
<font color=#0099ff size=5 face="STCAIYUN">color=#0099ff size=6 face="黑体"</font>
<font color=red size=5>color=#00ffff</font>12345

size可以根据实际大小进行设置,一般不超过7。

来看看效果:

黑体字示例 微软雅黑示例 华文彩云示例 color=#0099ff size=6 face="黑体" color=#00ffff12345 **常用**: turquoiseblue 翠蓝色 red 红色其他常用颜色。 华文楷体示例

修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件,将$font-size-base改成16px,如下所示:

1
$font-size-base =16px

RSS

RSS就是我博客右边边栏站点概览中显示RSS文字的东西。RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用发布一个RSS文件。
这个RSS Feed中包含的信息就能直接被其他站点调用,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用,是一种描述和同步网站内容的格式。
可以通过以下命令进行安装

1
npm install hexo-generator-feed --save

安装完成后,在全局配置文件中添加相应配置:

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

其中,feed是可选项,可配可不配。
最后,在你的主题配置文件中,添加RSS订阅链接即可。

1
rss: /atom.xml

进度条

(回到顶部的额外功能)

主题配置文件 : _config.yml 中有这两个选项。

Back to top in sidebar (only for Pisces | Gemini).

1
b2t: true

Scroll percent label in b2t button.

1
scrollpercent: true

个人域名

暂时用不到个人域名,等做SEO优化的时候再弄吧。Flag一下~

因此,搜索功能也是不能用的~


更新:搜索功能能用啦~

这个local搜索功能比我想象的强大orz。无差别攻击orz。。。


更新:个人域名开通~

skvel.tk

这是一个免费的域名。从freenom上申请,在阿里云解析上定向到指定的博客地址(还得在frennom上更新一下DNSserver,会有提示),在source目录下新建CNAME保存域名,即可生效!

还要更新Valine评论系统的白名单,可登录LeanCloud修改。

不过,从这个域名访问的话,点击量是重新统计的。这就比较尴尬orz

参考:

SEO

参考:如何搭建一个拥有个人域名又带点Geek味的独立博客

当我们搭建一个网站之后,如果没有做一些相关的搜索引擎优化SEO,那么我们的网站是很难获取来自搜索引擎的流量的,用户很难在搜索引擎上搜索到我们网站的内容,所以在这里我们要为Hexo网站做一些简单的搜索优化。

SiteMap

首先安装hexo的sitemap网站地图生成插件:

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在你的hexo站点的_config.yml添加下面的代码:

1
2
3
4
5
# hexo sitemap网站地图
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

配置成功后,hexo编译时会在hexo站点根目录生成sitemap.xml和baidusitemap.xml
其中sitemap.xml适合提交给谷歌搜素引擎,baidusitemap.xml适合提交百度搜索引擎。

蜘蛛协议robots.txt

在source目录下创建robots.txt文件,添加下面的一段代码:

1
2
Sitemap: http://www.linbinghe.com/sitemap.xml
Sitemap: http://www.linbinghe.com/baidusitemap.xml

请自行改成自己的网站。

完整robots.txt文件内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://www.arao.me/sitemap.xml
Sitemap: http://www.arao.me/baidusitemap.xml

谷歌Search Console与百度站长工具

这两个平台都是便于管理自己的网站,查看爬虫爬去频率等等,这两个的使用都不难,但是两者都需要通过验证,只要搜索这两个平台,到各自官网添加域名,按照文档说明通过验证即可。
谷歌可以通过提交站点地图提交我们的sitemap.xml,百度目前已经禁止了。

NoFollow

nofollow标签是由谷歌领头创新的一个“反垃圾链接”的标签,并被百度、yahoo等各大搜索引擎广泛支持,引用nofollow标签的目的是:用于指示搜索引擎不要追踪(即抓取)网页上的带有nofollow属性的任何出站链接,以减少垃圾链接的分散网站权重。
网上有很多资料,都是通过更改themes/next/layout/_partials目录下的footer.swig等文件,把hexo.io链接设置为非友链,但是大多数资料都已经过期了,至少我发现不是每一句我这边都能找到,这里推荐一个简单的方式,直接通过插件来解决。

1
npm install hexo-autonofollow --save

在站点配置文件中添加以下代码:

1
2
3
4
5
nofollow:
enable: true
exclude: # 例外的链接,可将友情链接放置此处
- exclude1.com
- exclude2.com

首页标题

更改index.swig文件,文件路径是your-hexo-site\themes\next\layout,将下面代码

1
{% block title %} {{ config.title }} {% endblock %}

改成

1
{{% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}}

这时候你的首页标题会更符合网站名称 - 网站描述这习惯。

主动推送新链接

解决百度爬虫被禁止访问的问题,提升网站收录质量和速度。

1
npm install hexo-baidu-url-submit --save

在 站点配置文件 中添加如下代码:

1
2
3
4
5
baidu_url_submit:
count: 5 ## 比如3,代表提交最新的三个链接
host: blog.tangxiaozhu.com ## 在百度站长平台中注册的域名
token: ## 请注意这是您的秘钥, 请不要发布在公众仓库里!
path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

为了主动推送链接,你还得在全局配置文件的deploy中添加配置:

1
2
deploy:
- type: baidu_url_submitter

更多:

hexo高阶教程:想让你的博客被更多的人在搜索引擎中搜到吗?

Hexo NexT 主题SEO优化指南

对Hexo-nexT进行简单SEO优化基于Google收录站点

SEO优化实战


为了保证本地图片在git仓库的调用格式的兼容,permanent link必须以”/“动态结尾(之前为了SEO改过头了)。这与html优化有些许矛盾。可能后期需要图床或者个人云空间。

创作保护

协议:CC BY-NC-SA 4.0

更多参考:CC-BY-NC-SA (创作共用许可协议)

相册功能

Hexo+NexT 博客搭建相册(一)

Hexo NexT主题内添加相册功能

hexo博客进阶-相册和独立域名

Reference

如何搭建一个拥有个人域名又带点Geek味的独立博客【主题超棒】

使用hexo+github搭建免费个人博客详细教程【内容详细】

使用Hexo+Github一步步搭建属于自己的博客【基础】

使用Hexo+Github一步步搭建属于自己的博客【进阶】

用Hexo开源博客系统【写博客细节】

hexo你的博客

玩转hexo博客之next【音乐播放、SEO相关】

hexo的next主题个性化配置教程【超全!33种】

Hexo博客加载优化

Hexo折腾记——性能优化篇

hexo博客-性能优化

Hexo博客优化加载速度

hexo next 主题打开博客过慢的解决办法

0%