Hexo之魔法操作

这篇博文用来记录关于hexo的一些魔法操作，主要针对于NEXT主题。将会在未来很长一段时间内持续更新，希望对大家有所帮助。

常规基本操作

写作

我们在搭建好了Hexo博客之后，肯定是需要写文章上去的。那么，首先打开git，在命令行输入这些指令来创建文章：

代码语言：javascript复制

$ hexo new [layout] <title>  //[这里是文章布局]，<这里是文章标题>

例如这样：

代码语言：javascript复制

$ hexo new post HelloHexo

完成之后，会在 _posts 目录下会生成文件标题.md，一般的格式如下：

代码语言：javascript复制

title: HelloHexo
date: 201-03-17 16:10:00 #发表日期，一般不改动
categories: hexo #文章文类
tags: [hexo,github] #文章标签，多于一项时用这种格式
---
正文，使用Markdown语法书写

写完文章后，可以先预览，或者直接推送到服务器上。

布局

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而您自定义的其他布局和 post相同，都将储存到 source/_posts 文件夹。

参数	路径	描述
post	source/_posts	文章
page	source	页面
draft	source/_drafts	草稿

在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml (根目录下的)中的 default_layout 参数来指定默认布局。如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

基本模板参数

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

基本变量参数

代码语言：javascript复制

标题（小写，空格将会被替换为短杠）

强大的标签插件

标签插件和 Front-matter 中的标签不同，它们是用于在文章中快速插入特定内容的插件。

这个其实在Hexo的官方文档上都有比较完善的，大家想了解更多的话，还是建议去那里看，这里主要放一些我用到过的，以及我自己的一些理解。

引用书上的句子

代码语言：javascript复制

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

演示效果：

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy. David Levithan—Wide Awake

解释一下：

代码语言：javascript复制

{% blockquote <这里填作者>, <这里填书名等> %}
中间这里存放引用正文
{% endblockquote %}

iframe

在文章中插入 iframe。

代码语言：javascript复制

{% iframe url [width] [height] %}  //设定url，宽、高

Image

在文章中插入指定大小的图片。

代码语言：javascript复制

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}
//实际上，只需要定义图片的路径即可，除非图片的大小不能使你满意。图片的路径可以是本地路径，也可以是网络路径，这取决于你的选择。

Link

在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。

代码语言：javascript复制

{% link text url [external] [title] %}   //这个不作过多的解释，都是常见属性

基于Next主题的优化与配置

点击爱心效果

给NexT主题内添加页面点击出现爱心的效果。首先，在找到/themes/next/source/js/src文件夹，然后下载这个clicklove.js文件。

然后，在themesnextlayout_layout.swig文件末尾添加：

代码语言：javascript复制

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

添加文章结束语

在themesnextlayout_macro中新建passage-end-tag.swig文件，添加代码至该文件中：

代码语言：javascript复制

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

大小自己看着调整，毕竟每个人喜欢的不一样。

打开themesnextlayout_macropost.swig文件，在post-body后，post-footer前，添加下面内容：

代码语言：javascript复制

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

打开主题配置文件_config.yml,在末尾添加：

代码语言：javascript复制

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

NEXT主题文件修改

设置文章背景

在themesnextsourcecss_customcustom.styl文件内增添如下代码：

代码语言：javascript复制

/*设置博文背景*/
.main-inner {
    background: #fff;
    opacity: 0.9;

background后为rgb颜色代码，百度来一个rgb色值粘贴即可替换博文背景颜色（替换了也很丑） opacity后数值为博文背景透明度，可设置0.0-1.0数值，值越小透明度越高。

为主页文章添加阴影效果

在themesnextsourcecss_customcustom.styl文件内增添如下代码：

代码语言：javascript复制

// 主页文章添加阴影效果
.post {
  background: #fff;
  opacity: 1;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }

background和上面设置文章背景一样，为文章背景颜色；opacity透明度；margin-top上边距；margin-bottom下边距；padding框间距；webkit-box-shadow和moz-box-shadow为阴影长宽设置。

腾讯云开发者社区 http hexo html

0 人点赞