大象无形，大音希声

嘘......

0%

搭建HEXO平台+Next主题的相关问题汇总

发表于 更新于 分类于

1、HEXO平台

1.1、目录结构及含义

  • scaffolds是模板文件夹，它用于预先定义创建新文单所用的布局
  • source文件夹内_drafts文件夹用于放置草稿，使用hexo --draft可查看草稿文章
  • 资源文件夹：资源（Asset）代表source文件夹除了文章以外的所有文件，例如图片、CSS、JS文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。
  • 文章资源文件夹: 将站点配置文件config.yml中的post_asset_folder选择设为true，这样当使用`hexo new命令生成新文章时，会自动添加一个资源文件夹。

1.2、相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

1
2
3
4
5
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}
#举例
{% asset_img example.jpg This is an example image %}

2、Next主题

2.1、文字首行缩进

修改next主题目录下的source/css/_custom/custom.styl文件，新增

1
.post-body p { text-indent: 2em; }

2.2、如何设置[阅读全文]

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。Next提供三种方式来控制文章在首页的显示方式。也就是说，在首页显示文章的摘录并显示阅读全文按钮，可以通过以下方式：

  • 在文章中使用<!-- more -->手动进行截断，Hexo提供的方式
  • 在文章的front-matter中添加description，并提供文章摘录
  • 自动形成摘要，在主题配置文件中添加：
    1
    2
    3
    auto_excerpt:
      enable: true
      length: 150

2.3、如何更改字体？

NexT从5.0.1版开始提供了一个字体定制特性，请先查看此特性是否能满足你的需求。以下的修改将覆盖字体定制的特性。编辑主题 下的source/css/_variables/custom.styl，新增两个变量：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 标题，修改成你期望的字体族
$font-family-headings = Georgia, sans

// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif

// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace

// 正文字体的大小
$font-size-base = 16px

// 代码字体的大小
$code-font-size = 13px

2.4、Bootstrap Callout

使用方式

1
{% note class_name %}Content(md partial supported){% endnote %}

其中，class_name可以是以下列表中的一个值：

  • dafault
  • primary
  • success
  • info
  • warning
  • danger
    效果如下

    dafault

    class_name值为default

    class_name值为primary

    class_name值为success

    class_name值为info

    class_name值为warning

    class_name值为danger

2.5、文本居中的引用

此标签将生成一个带上下分割线的引用，同时引用内文本将自动居中。文本居中时，多行文本若长度不等，视觉上显得不对称，因此建义在引用单行文本的场景下使用。例如作为文单开篇引用或者结束语之前的总结引用。
使用方式：

  • HTML方式：使用这种方式时，给img添加属性class="blockquote-center"即可
  • 标签方式：使用centerquote或者简写cq
    1
    {% centerquote %}大象无形，大音希声{% endcenterquote %}
    效果如下：

    大象无形，大音希声

    出自《道德经》

    出自道德经“大方无隅，大器晚成。大音希声，大象无形。”这是由老子提出的中国古代文学理论中的一种美学观念，意在推崇自然的、而非人为的美。 白话翻译：越好的音乐越悠远潜低，越好的形象越飘渺宏远，越是大气度的往往越包容万物。

2.6、禁止文章目录自动编号

打开文章后，默认next主题右侧是文章目录列表且列表是自动编号的，往往我们在写文章的时候需要在文章中标明第几章第几节，所以我们需要自己手动指定编号，需要修改主题的配置文件themes\next\_config.yml，找到toc:修改number:false

1
2
3
4
toc:
  enable: true # 侧栏中的目录是否启用
  number: false # 侧栏中的目录自动编号是否启用
  wrap: true #侧栏中的目录是否允许折行显示