0%

next配置

Posted on Edited on In

配置公式

教程如下（很详细）:

[here][https://www.jianshu.com/p/68e6f82d88b7]

最后一步，在调用mathjax时，如果我直接在文章开头添加：mathjax: true时，无法正确生成公式

修改方法：

1
2
3
---
mathjax: true
---

圈住的部分，称为文章的front-matter

首页显示文章摘要

转载自：
[hexo技巧][https://ryderchan.github.io/2017/01/26/hexo小技巧-首页显示文章摘要及图片/)]

next主题官方给的三种生成摘要方式

  1. 在文章中使用手动进行截断，Hexo 提供的方式**(推荐)**
  2. 在文章的 front-matter 中添加 description，并提供文章摘录
  3. 自动形成摘要，在主题配置文件中添加，默认截取的长度为 150字符，可以根据需要自行设定：
1
2
3
auto_excerpt:
  enable: true
  length: 150

文章模板

1
2
3
4
5
6
7
8
9
10
11
12
---
title: git的基本使用
date: 2017-01-24
categories:
- 学习
- git
tags:
  - git
---

摘要内容......
<!-- more -->

添加文章分类

转载自：
hexo-next-为文章添加分类

  1. 新建一个页面，命名为 categories 。命令如下：

    1
    hexo new page categories

此时在source文件夹下会产生categories文件夹，打开其中的index.md文件夹

  1. 编辑刚新建的页面，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类。

    1
    2
    3
    4
    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    ---

    注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

    1
    2
    3
    4
    5
    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    comments: false
    ---

  2. 在菜单中添加链接。编辑主题的 _config.yml ，将 menu 中的 categories: /categories 注释去掉，如下:

    1
    2
    3
    4
    5
    menu:
      home: /
      categories: /categories
      archives: /archives
      tags: /tags

  3. 此时页面不显示分类，需继续设置如下：

添加文章分类关联

在文章中添加categories属性，再部署之后就可以在分类页看到分类了

1
2
3
4
5
6
---
title: hexo next 为文章添加分类
date: 2016-03-16 08:12:43
tags:
categories: 前端	//此处
---

修改链接内文本样式

[hexo引用文章链接][https://www.jianshu.com/p/9f0e90cc32c2]

  • 修改Blog/themes/next/source/css/_common/components/post/post.styl，在末尾添加CSS样式：
1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3; //原始链接颜色
  border-bottom: none;
  border-bottom: 1px solid #0593d3; //底部分割线颜色
  &:hover {
    color: #fc6423; //鼠标经过颜色
    border-bottom: none;
    border-bottom: 1px solid #fc6423; //底部分割线颜色
  }
}

在文章中添加图片

转载：https://yanyinhong.github.io/2017/05/02/How-to-insert-image-in-hexo-post/

本地引用

绝对路径

当Hexo项目中只用到少量图片时，可以将图片统一放在source/images文件夹中，通过markdown语法访问它们。

1
source/images/image.jpg![](/images/image.jpg)

图片既可以在首页内容中访问到，也可以在文章正文中访问到。

相对路径（这个是最实用的）

图片除了可以放在统一的images文件夹中，还可以放在文章自己的目录中。文章的目录可以通过配置_config.yml来生成。

主目录下的_config.yml

1
_config.ymlpost_asset_folder: true

将_config.yml文件中的配置项post_asset_folder设为true后，执行命令$ hexo new post_name，在source/_posts中会生成文章post_name.md和同名文件夹post_name。将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。

1
_posts/post_name/image.jpg![](image.jpg)

上述是markdown的引用方式，图片只能在文章中显示，但无法在首页中正常显示。

如果希望图片在文章和首页中同时显示，可以使用标签插件语法。

1
_posts/post_name/image.jpg{% asset_img image.jpg This is an image %}

CDN引用

除了在本地存储图片，还可以将图片上传到一些免费的CDN服务中。比如Cloudinary提供的图片CDN服务，在Cloudinary中上传图片后，会生成对应的url地址，将地址直接拿来引用即可。