hellolinux的点点滴滴

0%

hexo使用介绍

发表于 更新于 分类于 阅读次数：
本文字数： 15k 阅读时长 ≈ 13 分钟

Hexo

官网主题(模板)： https://hexo.io/themes/
中文版官网：https://hexo.io/zh-cn/docs/

1.安装Node.js

2.安装Hexo

npm install -g hexo-cli

hexo init hexofolder

cd hexofolder
npm install

目录

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

_config.yml
网站的 配置 信息，您可以在此配置大部分的参数。

package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。(具体看官方文档，这里就不赘述了)

scaffolds
模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes
主题 文件夹。Hexo 会根据主题来生成静态页面。

3.hexo命令

hexo g #hexo generate 生成

hexo s #启动本地web服务器

通过http://localhost:4000 ，访问页面。就可以看到，hexo默认带的主题landscap的效果

Hexo常用的几个命令：
hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) 启动本地web服务，用于博客的预览
hexo deploy (hexo d) 部署播客到远端（比如github, heroku等平台）
另外还有其他几个常用命令：

hexo new “postName” #新建文章

hexo new page “pageName” #新建页面

hexo n “我的博客” == hexo new “我的博客” #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

组合：

hexo d -g #生成部署

hexo s -g #生成预览

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

配置

添加其他主题

官网主题(模板)： https://hexo.io/themes/，在上面选择自己喜欢的模板，进入它对应的git页面，获得clone的链接。

这里以主题Hexo-theme-zilan为例进行说明， 我这个主题增加了。

安装主题 

1
2
3
$ hexo clean
$ cd hexofolder/themes
$ git clone https://github.com/CatherineLiyuankun/Hexo-theme-zilan.git

启用主题

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

1
2
3
4
$ cd themes/Hexo-theme-zilan
$ git pull
$ hexo g # 生成
$ hexo s # 启动本地web服务器

主题

https://www.ccyh.xyz/archives/

add next主题

https://github.com/theme-next/hexo-theme-next

打开站点的_config.yml配置文件，修改主题为next

打开主题的_config.yml配置文件，不是站点主题文件，找到Scheme Settings

https://github.com/WordZzzz/hexo-next 

1
2
开始正式发布上线博客文章，在命令行中输入：
hexo n "博客名字"

增加侧栏菜单条目

默认的侧栏菜单条目有：首页、归档、标签、关于、搜索等。如果你想要增加其他的菜单条目，修改主题配置文件_config.yml里的Menu Settings中的menu和menu_icons两个地方

自动部署

ssh-keygen -f hexo-deploy-key

https://razeen.me/posts/use-github-action-to-deploy-your-hexo-blog/

https://dreamhomes.top/posts/202111101556/

文章使用

写作

1
hexo new [layout] <title>

在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

布局

Hexo 有三种默认布局：post、page 和 draft。在创建者三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局 路径
post source/_posts
page source
draft source/_drafts

如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

文件名称

Hexo 默认以标题做为文件名称，但您可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量 描述
:title 标题（小写，空格将会被替换为短杠）
:year 建立的年份，比如， 2015
:month 建立的月份（有前导零），比如， 04
:i_month 建立的月份（无前导零），比如， 4
:day 建立的日期（有前导零），比如， 07
:i_day 建立的日期（无前导零），比如， 7

草稿

Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

1
hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true来预览草稿。

模版（Scaffold）

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

1
hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

变量 描述
layout 布局
title 标题
date 文件建立日期

支持的格式

Hexo 支持以任何格式书写文章，只要安装了相应的渲染插件。

例如，Hexo 默认安装了 hexo-renderer-marked 和 hexo-renderer-ejs，因此你不仅可以用 Markdown 写作，你还可以用 EJS 写作。如果你安装了 hexo-renderer-pug，你甚至可以用 Pug 模板语言书写文章。

只需要将文章的扩展名从 md 改成 ejs，Hexo 就会使用 hexo-renderer-ejs 渲染这个文件，其他格式同理。

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数 描述 默认值
layout 布局
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址

分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

1
2
3
4
5
categories:
- Diary
tags:
- PS3
- Games
1
2
3
categories:
  - Diary
  - Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

1
2
3
4
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

添加标签(标签云)

hexo new page tags

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "tags"
---

---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories: 
- web前端
tags:
- jQuery
- 表格
- 表单验证
---

可以打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，之后执行hexo new 文章名命令生成的文件，页面里就有categories:项了。

scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，所以可以在这里根据你自己的需求添加一些默认值。

1
npm i hexo-tag-cloud --save

next下config修改配置

tagcloud:

# All values below are same as default, change them by yourself.

min: 14 # Minimun font size in px

max: 30 # Maxium font size in px

start: “#ccc” # Start color (hex, rgba, hsla or color keywords)

end: “#111” # End color (hex, rgba, hsla or color keywords)

amount: 200 # Amount of tags, change it if you have more than 200 tags

theme/next/layout/_macro/sidebar.swig添加如下代码（放在endmacro中）

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
            <!--{{ list_categories() }}-->
        </canvas>
    </div>
</div>
{% endif %}

ist_tags()这块儿依据个人情况而定，近千个tag，最后出来的效果让人看了头皮发麻，可改成了list_categories()

文章摘要和截断

more方法

在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式 推荐

在文章的 front-matter 中添加 description，并提供文章摘录

自动形成摘要，在 主题配置文件 中添加：

1
2
3
auto_excerpt:
  enable: true
  length: 150

默认截取的长度为 150 字符，可以根据需要自行设定

建议使用 <!-- more -->（即第一种方式），除了可以精确控制需要显示的摘录内容以外， 这种方式也可以让 Hexo 中的插件更好的识别。

next V7.6之后去掉这个功能，推荐插件hexo-excerpt

1
npm install hexo-excerpt --save

hexo-excerpt插件

npm install hexo-excerpt –save

打开站点配置文件，加入

1
2
3
4
5
excerpt:
  depth: 2  #按层来算，也就是按代码块来算
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

打开主题配置文件，将下面两项设置为 true

1
2
3
excerpt_description: true
...
read_more_btn: true

引用块

在文章中插入引言，可包含作者、来源和标题。

别号： quote

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
{% endblockquote %}

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. 
{% endblockquote %}

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

插入视频

1
2
3
4
5
6
{% youtube video_id [type] [cookie] %}
{% youtube lJIrF4YjHfQ %} //视频
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %} //播放列表
{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %} //禁止 YouTube cookie
{% vimeo video_id %} //vimeo视频

其他

部署到github pages

把在本地web环境下预览到的博客部署到github上

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

1
2
3
4
deploy:
  type: git
  repo: git@github.com/CatherineLiyuankun.github.io
  branch: master

注意部署到git需要提前安装一个扩展：

npm install hexo-deployer-git –save

然后在命令行中执行

hexo d

即可完成部署

网站搜索

local search

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

    1
    $ npm install hexo-generator-searchdb --save

  2. 编辑 站点配置文件，新增以下内容到任意位置：

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  3. 编辑 主题配置文件，启用本地搜索功能：

    1
    2
    3
    # Local search
    local_search:
      enable: true

https://linchao1002.github.io/2019/03/17/Hexo%20+%20Next%20%E4%B8%BB%E9%A2%98%E5%8D%9A%E5%AE%A2%E5%88%86%E4%BA%AB%E5%8A%9F%E8%83%BD/

评论系统

Next 可以支持多种评论系统，多说 友言等等，一番了解后，还是决定使用Hypercomments.支持google登陆

HyperComments注册得到Hypercomments_id配置

Hypercomments在2018开始收费

如需取消某个 页面/文章 的评论，在 md 文件的 front-matter 中增加 comments: false

访问次数阅读量(热度)

leancloud

valine修改为评论数，zh-CN.yml中post下新增comments.valine: 评论数 #可以自定义

在leancloud上设置并在hexo中新增热度

阅读时长

npm install hexo-symbols-count-time –save

需要hexo clean再进行本地测试。

在站点配置文件添加如下配置

symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计

在NexT主题配置文件添加如下配置（NexT主题已支持该插件，有的话无需再添加）

Post wordcount display settings

Dependencies: https://github.com/theme-next/hexo-symbols-count-time

symbols_count_time:
separated_meta: true # 是否另起一行（true的话不和发表时间等同一行）
item_text_post: true # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
item_text_total: false # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
awl: 4 # Average Word Length
wpm: 275 # Words Per Minute（每分钟阅读词数）
suffix: mins.

版权声明

next配置中creative_commons

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: deed.zh

sidebar参数表示在侧边栏有一个版权的图片链接，post参数表示在每一篇文章末尾自动增加本文作者、本文链接、版权声明三个信息，language参数表示点击链接后显示的版权信息的语言。

如果想个性化配置版权信息，可修改配置文件(./themes/next/layout/_partials/post/post-copyright.swig)，如果想修改显示的样式可修改配置文件(./themes/next/source/css/_common/components/post/post-copyright.styl) 。

文章生成永久唯一链接

1
npm install hexo-abbrlink --save

如果出错缺少什么包，继续安装。

修改根目录站点配置文件config.yml，改为：

1
2
3
4
permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

设置RSS

1
npm install hexo-generator-feed --save

然后在_config.yml文件中配置该插件

1
2
3
4
5
6
7
8
feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit:
    content_limit_delim: ' '

参数的含义：

  • type: RSS的类型(atom/rss2)
  • path: 文件路径,默认是atom.xml/rss2.xml
  • limit: 展示文章的数量,使用0或则false代表展示全部
  • hub:
  • content: 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
  • content_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
  • content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,，防止从中间截断.

数据统计与分析

google analytics

注册analytics把userid拷贝就可以。

分享功能

addthis

注册(G)，可以使用 Google/Facebook/Twitter 账号进行第三方登陆

从下面菜单获得 AddThis id：More.. --> General --> ID。

在 主题配置文件 中，把#Share下的 #add_this_id取消注释， 改为add_this_id: put_your_add_this_id_here

add share button

add_this_id: ra-5e8315ca5fd61bd3

公益404

hexo new page 404

默认在 Hexo 文件夹根目录下 /source/404/index.md ，输入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 404 Not Found：该页无法显示
toc: false
comments: false
permalink: /404
---
<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>                                                                                                                                        
    </head>
    <body>
         <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://www.nickyam.com"></script>
	</body>
</html>

需要部署上传才可以看到。

about

hexo new page “about”

近期文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
      <div class="links-of-blogroll-title">
        <!-- modify icon to fire by szw -->
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
      </div>
      <ul class="links-of-blogroll-list">
        {% set posts = site.posts.sort('-date') %}
        {% for post in posts.slice('0', '5') %}
          <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
{% endif %}

将此代码贴在next/layout/_macro/sidebar.swig中的if theme.links对应的endif后面

在主题的_config.yml中添加了几个变量，如下：

1
2
3
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

相关文章

1
npm install hexo-related-popular-posts --save

在 themes/next/_config.yaml 中配置：

1
2
3
4
5
6
7
8
9
10
related_posts:
  enable: true
  title: 猜你喜欢 # 自定义标题名字
  display_in_home: true # 首页是否增加
  params:
    maxCount: 5 # 最多推荐几个
    PPMixingRate: 0.4 # 同时推荐火热和相关，两者比率，不能为0
    #isDate: false # 文章时间
    #isImage: false # 文章配图
    #isExcerpt: false # 文章摘要

hexo-related-popular-posts 默认展示位置是在页面底部

设置favicon图标

友链

文章置顶

npm uninstall hexo-generator-index –save
npm install hexo-generator-index-pin-top –save

在新增文章的开头中加入top: true，比如：

title: Hello World
abbrlink: 4a17b156
top: true

设置置顶标志

打开\themes\your theme\layout_macro\post.swig

找到

下面插入一下代码：

文章末尾投票打分

1
2
3
4
5
{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="RED">置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

修改默认属性

在根目录下scaffolds文件夹打开post.md

1
2
3
4
5
6
title: {{ title }}//题目
date: {{ date }}//日期
tags:			//标签	
categories:		//分类
copyright: true //版权信息说明
photos:         //主页文章显示图片

图片放大功能

打开主题配置文件_config.yml，搜索fancybox字段，设置其值为true进入到theme/next/文件夹下，打开git bash

1
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

懒加载

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install hexo-lazyload --save

lazyload:
  enable: true
  onlypost: false #是否只在文章中开启懒加载
  # className: #可选 e.g. .J-lazyload-img
  # loadingImg: #可选 eg. ./images/loading.png 作为图片未加载时的替代图片

npm install hexo-lazyload-image --save
lazyload:
  enable: true
  onlypost: false
  loadingImg: /images/loading.gif

https://steemit.com

站点地图

站点地图的作用向搜索引擎提供你的网站的概要，给你的网站做 SEO。

npm install hexo-generator-sitemap –save

sitemap:
path: sitemap.xml

  1. 进入Google Webmaster Central
  2. 点击骚红色的”ADD A PROPERTY”
  3. 在弹出来的小框中加入你的站点地址 http://yoursite.com ，然后点击”Continue”
  4. Tab栏选择”Alternate methods”，选中HTML tag可以看见

打开next主题的配置文件_config.yml，找到google_site_verification字段（找不到就新建）：

添加content数值到这

google_site_verification: XXXXXXXXXXXXXXXXXXXXXXX

部署到网站后再回到4中的Google Webmaster Central页面，点击骚红色的”VERIFY”，done。

提交到百度sitemap推荐网址

广告支持

众所周知，谷歌是全球最大的广告中间商，让你可以出卖流量来换小钱钱。具体做法是将你有流量的位置告诉谷歌，他会根据浏览你网站的用户行为来动态给他们推广告。

你可以在这里：https://www.google.com/adsense 开通，将你的网站提交，然后谷歌会给你审核，这篇文章 有讲一些申请需要注意的事项，总的来说就是得让谷歌判定你的网站是有价值的，而不是垃圾网站，至于他怎么定义垃圾，上面文章有涉及。

文末添加结束

1.在目录 themes/next/layout/_macro/ 下添加 passage-end-tag.swig ，内容如下：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束------</div>
    {% endif %}
</div>

2.打开 themes/next/layout/_macro/post.swig 文件，在passage end body下新增内容如下:

1
2
3
4
5
<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
 </div>

3.打开主题配置文件 ，添加代码如下：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

尾部添加访问量

具体到 next 主题来说，在 footer 模板（themes/next/layout/_partials/footer.swig）底部添加以下代码就行：

1
2
3
4
5
6
7
8
9
10
11
<div class="powered-by">
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv">
        本站访客数:<span id="busuanzi_value_site_uv"></span>
    </span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_pv">
        本站访问量<span id="busuanzi_value_site_pv"></span>
    </span>
</div>

显示阅读进度

主题设置文件（themes/next/_config.yml：

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 2px

放一个订阅号

放一个打赏

放分享

代码块复制功能

依次是网站标题、副标题、网站描述、作者、网站头像外部链接、网站语言、时区等。

reward

Social Links

follow_me:

更新

1
2
3
4
5
npm update -g #npm 更新全局安装的包
~/blog $ npm update #npm 更新站点文件夹根目录下安装的依赖包
npm install npm -g #更新 npm 它自己
npm install n -g #更新 Node.js 到最新版
~/blog/themes/next $ git pull #更新主题
1
npm install hexo-generator-feed --save

动态背景

在主题配置文件中，靠后面，改 canvas_nest: true

博客推广及谷歌搜索优化

参考

https://hexo.io/zh-cn/docs/configuration.html

文章截断hexo-excerpt