hexo主题配置文件系列2+hexo-NexT-theme

NexT 坚持将复杂的细节隐藏,提供尽量少并且简便的设置,保持最大限度的易用性。

设置 RSS

NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改 主题配置文件,设定 rss 字段的值:

  • false:禁用 RSS,不在页面上显示 RSS 连接。
  • 留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。
  • 具体的链接地址:适用于已经烧制过 Feed 的情形。

添加「标签」页面

新建「标签」页面,并在菜单中显示「标签」链接。「标签」页面将展示站点的所有标签,若你的所有文章都未包含标签,此页面将是空的。 底下代码是一篇包含标签的文章的例子:

title: 标签测试文章
tags:
  - Testing
  - Another Tag
---

请参阅 Hexo 的分类与标签文档,了解如何为文章添加标签或者分类。

在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 tags

$ cd your-hexo-site
$ hexo new page tags

**注意:**如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false,如:

禁用评论示例

title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

添加「分类」页面

新建「分类」页面,并在菜单中显示「分类」链接。「分类」页面将展示站点的所有分类,若你的所有文章都未包含分类,此页面将是空的。 底下代码是一篇包含分类的文章的例子:

title: 分类测试文章
categories: Testing
---

请参阅 Hexo 的分类与标签文档,了解如何为文章添加标签或者分类。

在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 categories

$ cd your-hexo-site
$ hexo new page categories

**注意:**如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false,如:

禁用评论示例

title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

设置字体

注意: 此特性在版本 5.0.1 中引入,要使用此功能请确保所使用的 NexT 版本在此之后

为了解决 Google Fonts API 不稳定的问题,NexT 在 5.0.1 中引入此特性。 通过此特性,你可以指定所使用的字体库外链地址;与此同时,NexT 开放了 5 个特定范围的字体设定,他们是:

  • 全局字体:定义的字体将在全站范围使用
  • 标题字体:文章内标题的字体(h1, h2, h3, h4, h5, h6)
  • 文章字体:文章所使用的字体
  • Logo字体:Logo 所使用的字体
  • 代码字体: 代码块所使用的字体

各项所指定的字体将作为首选字体,当他们不可用时会自动 Fallback 到 NexT 设定的基础字体组:

  • 非代码类字体:Fallback 到 "PingFang SC", "Microsoft YaHei", sans-serif
  • 代码类字体: Fallback 到 consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace

另外,每一项都有一个额外的 external 属性,此属性用来控制是否使用外链字体库。 开放此属性方便你设定那些已经安装在系统中的字体,减少不必要的请求(请求大小)。

配置示例

font:
  enable: true

  # 外链字体库地址,例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体,应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Lobster Two
    size: 24

  # 代码字体,应用于 code 以及代码块
  codes:
    external: true
    family: PT Mono

设置代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮,共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题,可选的值有 normalnightnight bluenight brightnight eighties

imgimg[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OczmhHPb-1615036439807)(http://theme-next.iissnan.com/assets/img/tomorrow-night-blue.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KG9kDbV0-1615036439812)(http://theme-next.iissnan.com/assets/img/tomorrow-night-bright.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tKVJUWBg-1615036439817)(http://theme-next.iissnan.com/assets/img/tomorrow-night-eighties.png)]

更改 highlight_theme 字段,将其值设定成你所喜爱的高亮主题,例如:

高亮主题设置示例

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

侧边栏社交链接

侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。 两者配置均在 主题配置文件 中。

  1. 链接放置在 social 字段下,一行一个链接。其键值格式是 显示文本: 链接地址

    配置示例

    # Social links
    social:
      GitHub: https://github.com/your-user-name
      Twitter: https://twitter.com/your-user-name
      微博: http://weibo.com/your-user-name
      豆瓣: http://douban.com/people/your-user-name
      知乎: http://www.zhihu.com/people/your-user-name
      # 等等
    
  2. 设定链接的图标,对应的字段是 social_icons。其键值格式是 匹配键: Font Awesome 图标名称匹配键 与上一步所配置的链接的 显示文本 相同(大小写严格匹配),图标名称 是 Font Awesome 图标的名字(不必带 fa- 前缀)。 enable 选项用于控制是否显示图标,你可以设置成 false 来去掉图标。

    配置示例

    # Social Icons
    social_icons:
      enable: true
      # Icon Mappings
      GitHub: github
      Twitter: twitter
      微博: weibo
    

开启打赏功能 由 habren 贡献

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

打赏功能配置示例

reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

友情链接 由 iamwent 贡献

编辑 主题配置文件 添加:

友情链接配置示例

# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

腾讯公益404页面 由 xirong 贡献

腾讯公益404页面,寻找丢失儿童,让大家一起关注此项公益事业!效果如下 http://www.ixirong.com/404.html

使用方法,新建 404.html 页面,放到主题的 source 目录下,内容如下:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

站点建立时间

这个时间将在站点的底部显示,例如 © 2013 - 2015。 编辑 主题配置文件,新增字段 since

配置示例

since: 2013

订阅微信公众号 由 huiwang 贡献

注意: 此特性在版本 5.0.1 中引入,要使用此功能请确保所使用的 NexT 版本在此之后

在每篇文章的末尾显示微信公众号二维码,扫一扫,轻松订阅博客。

在微信公众号平台下载您的二维码,并将它存放于博客source/uploads/目录下。

然后编辑 主题配置文件,如下:

配置示例

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号,订阅我的博客!

设置「动画效果」

NexT 默认开启动画效果,效果使用 JavaScript 编写,因此需要等待 JavaScript 脚本完全加载完毕后才会显示内容。 如果您比较在乎速度,可以将设置此字段的值为 false 来关闭动画。

编辑 主题配置文件, 搜索 use_motion,根据您的需求设置值为 true 或者 false 即可:

use_motion: true  # 开启动画效果
use_motion: false # 关闭动画效果

设置「背景动画」

NexT 自带两种背景动画效果

编辑 主题配置文件, 搜索 canvas_nestthree_waves,根据您的需求设置值为 true 或者 false 即可:

注意: three_waves 在版本 5.1.1 中引入。只能同时开启一种背景动画效果。

canvas_nest 配置示例

# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画

three_waves 配置示例

# three_waves
three_waves: true //开启动画
three_waves: false //关闭动画
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Hexo是一个静态博客生成器,它提供了一些默认的主题,但是用户也可以自己开发或使用第三方主题。其中,Next是一款非常受欢迎的Hexo主题之一,它提供了丰富的功能和灵活的配置。 在使用Next主题时,我们可以通过override来修改主题的默认配置和样式。具体来说,override是指将主题的默认配置或样式文件复制到博客根目录下的/source/_data/或/source/css/override/目录下,然后进行修改。这样,在重新生成博客时,Hexo会优先使用override中的配置或样式文件,从而实现自定义主题的效果。 下面是具体的使用方法: 1. 复制配置文件到/source/_data/override/目录下 首先,我们可以通过命令`hexo config`查看当前主题的默认配置,然后将需要修改的配置项复制到/source/_data/override/目录下的同名文件中,并进行修改。例如,如果我们想修改Next主题的默认语言为英文,可以执行以下命令: ``` hexo config | grep language > source/_data/override/next.yml ``` 然后,打开source/_data/override/next.yml文件,将`language`的值修改为`en`,保存文件即可。 2. 复制样式文件到/source/css/override/目录下 如果我们需要修改主题的样式,可以将主题的默认样式文件复制到/source/css/override/目录下,并进行修改。例如,如果我们想修改Next主题的默认字体为微软雅黑,可以执行以下命令: ``` cp -r themes/next/source/css/fonts source/css/override/ ``` 然后,在source/css/override/fonts目录下,将所有字体文件中的字体名称修改为“Microsoft YaHei”,保存文件即可。 需要注意的是,override文件的命名和存放路径需要与主题默认文件一致,否则可能会导致修改无效或出现异常。同时,使用override也可能会导致主题升级时出现冲突,因此在使用时需要注意备份原始文件和谨慎修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网小队

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值