NexT主题进阶

最新推荐文章于 2022-08-31 07:47:34 发布

WilenWu

最新推荐文章于 2022-08-31 07:47:34 发布

阅读量1.7k

点赞数 3

分类专栏：个人博客(Hexo)

本文链接：https://blog.csdn.net/qq_41518277/article/details/101766036

版权

个人博客(Hexo) 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

NexT 是 Hexo 框架中最为流行的主题之一。精于心，简于形。
NexT 支持多种常见第三方服务，使用 第三方服务 来扩展站点的功能。
除了 Markdown 支持的语法之外，NexT 借助 Hexo 提供的 tag 插件 ，为您提供在书写文档时快速插入带特殊样式的内容。

安装主题

克隆NexT 主题
- 克隆最新版本
  定位到 Hexo 站点目录下，将NexT主题文件克隆或者拷贝到hexo/theme目录下即可。
```
cd your-hexo-sit
git clone https://github.com/iissnan/hexo-theme-next themes/next
```
- 克隆稳定版本
  定位到 Hexo 站点目录下，将NexT主题文件克隆或者拷贝到hexo/theme目录下即可。本博客就是克隆的这个版本。
```
cd your-hexo-sit
git clone https://github.com/theme-next/hexo-theme-next  themes/next
```
启用主题

与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，打开站点配置文件，找到 theme 字段，并将其值更改为 next
```
theme: next
```

主题核心配置

核心配置可完全参考NexT官网中文文档
包括：选择Scheme、设置语言、设置菜单、设置头像、设置侧栏、添加「标签」页面、添加「分类」页面、设置字体、设置代码高亮主题、侧边栏社交链接、开启打赏功能、友情链接、腾讯公益404页面、数据统计与分析、搜索服务、分享服务等。

主题配置文件 ‪username.github.io\themes\next\_config.yml
分为若干块，每块都附带官方说明文件网址，可以用谷歌浏览器打开，开启翻译，即可轻松配置。
目前主流的组件基本已被装进 NexT主题，只需修改主题配置文件参数即可，网上的若干优化教程估计已非必要。

NexT 7 自定义样式支持已与主题核心组件分离，如博客背景、文本结束标记等。这样用户可放心升级主题而不会破坏自定义配置。在路径 source/_data 下添加自定义文件，并在主题配置文件 custom_file_path 取消注释。

另，tag 插件也是NexT的一大亮点，会单独开一篇文章具体介绍，请参考 NexT tag 插件

本人博客：由 Hexo 强力驱动 v3.9.0 |主题 – NexT.Gemini v7.4.0

Next 主题更新日志

主题优化

RSS支持

RSS(Really Simple Syndication)称为简易信息聚合，是一种描述和同步网站内容的格式。RSS搭建了信息迅速传播的一个技术平台，使得每个人都成为潜在的信息提供者。发布一个RSS文件后，这个RSS Feed中包含的信息就能直接被其他站点调用，而且由于这些数据都是标准的XML格式，所以也能在其他的终端和服务中使用，是一种描述和同步网站内容的格式。

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

rss: false
禁用 RSS，不在页面上显示 RSS 连接。
rss: #留空
留空：使用 Hexo 生成的 Feed 链接，需先安装 hexo-generator-feed 插件
- 安装 hexo-generator-feed 插件
```
npm install hexo-generator-feed --save 
```
- 在站点配置文件 _config.yml 修改/添加
```
feed:
  type: atom
  path: atom.xml
  limit: 20     # Feed中的最大帖子数(使用0或false显示所有帖子)
```

rss: /atom.xml
具体的URL：适用于已经烧制过 Feed 的情形。

安装 hexo-generator-feed 插件

npm install hexo-generator-feed --save

在站点配置文件 _config.yml 修改/添加

feed:
  type: atom
  path: atom.xml
  limit: 20     # Feed中的最大帖子数(使用0或false显示所有帖子)

Creative Commons

NexT支持显示Creative Commons 4.0国际许可证。这些许可证允许创作者声明保留的权利和放弃的权利。

修改主题配置文件

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: deed.zh

阅读进度和书签

NexT支持页面滚动阅读进度指示器。

修改主题配置文件

reading_progress:
  enable: true
  color: "#37c6c0"
  height: 2px

Bookmark是一个插件，允许用户保存他们的阅读进度。用户只需单击页面左上角的书签图标即可保存滚动位置。当他们下次访问您的博客时，他们可以自动恢复每个页面的最后滚动位置。
在主题配置文件启用

bookmark:
  enable: true
  color: "#222"   # 自定义书签颜色
  save: auto  # auto | manual 自动保存进度或点击保存进度

网站图标(favicon)

默认情况下，Hexo站点在hexo-site/themes/next/source/images/目录中使用 NexT favicons 。
可以自己下载图标，放在hexo-site/source/images/目录中，修改主题配置文件。

图标网站 easyicon

favicon：
  small：/  images/ favicon-16x16-next.png 
  medium： /images/favicon-32x32-next.png 
  apple_touch_icon： /images/apple-touch-icon-next.png 
  safari_pinned_tab： /images/logo.svg 
  android_manifest： /images/manifest.json 
  ms_browserconfig： /images/browserconfig.xml

SEO支持

SEO(Search Engine Optimization)意为搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

安装站点地图(sitemap)插件

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

站点配置文件修改/添加

# SEO 
sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

启用百度推送功能，博客会自动将网址推送到百度，这对搜索引擎优化非常有帮助。
主题配置文件修改 baidu_push: true

字数统计和阅读时长

导入插件

npm install hexo-symbols-count-time --save

站点配置文件

 symbols_count_time:
   symbols: true              # 是否启用
   time: true                 # 估计阅读时间
   total_symbols: true        # 页脚部分中所有帖子字数
   total_time: true           # 页脚部分中所有帖子的估计阅读时间
   exclude_codeblock: false

主题配置文件

symbols_count_time:
  separated_meta: true       # 以分隔线显示单词计数和估计读取时间
  item_text_post: true       # 显示单词计数和估计阅读时间的文本描述
  item_text_total: false     # 在页脚部分显示单词计数和估计阅读时间的文本描述
  awl: 4                     # 平均字长
  wpm: 275                   # 每分钟的平均单词数
  suffix: mins.

文章热度

配置 leancloud 官方使用文档
修复NexT的leancloud计数器的安全插件

导入插件

npm install hexo-leancloud-counter-security --save

站点配置文件添加

leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  username: <<your username>> # 部署时会询问是否留空
  password: <<your password>> # 建议留空。部署时会询问是否留空

主题配置文件修改

 leancloud_visitors:
   enable: true
   app_id: <<your app id>>
   app_key: <<your app key>>
 
 # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
 
   security: true
  betterPerformance: false

控制台命令：在Leancloud数据库中注册用户以进行权限控制

 hexo lc-counter register <<username>> <<password>>

背景动画

NexT 支持多种背景动画，导入插件并修改对应主题配置文件即可

加载栏: pace
3D库: three
流动线条: canvas_nest
彩带: canvas_ribbon

第三方服务

静态网站在某些功能上受到限制，因此我们需要第三方服务来扩展我们的网站。
您可以随时使用NexT支持的第三方服务扩展所需的功能。

数学公式

NexT提供了两个用于显示数学公式的渲染引擎。

启用数学公式
```
math:
  enable: true
  per_page: true 
```
per_page: true 默认只渲染 Front-matter 标记 mathjax: true 的文档
per_page: false 每一页都会导入 mathjax / katex 脚本
选择渲染引擎

目前，NexT提供了两个渲染引擎：MathJax和KaTeX。

math

需要卸载原始渲染器 hexo-renderer-marked 并选择渲染器之一安装：

npm un hexo-renderer-marked --save 
npm i hexo-renderer-kramed --save ＃ or hexo-renderer-pandoc

打开主题配置文件渲染引擎

mathjax：    
  enable：true

katex

需要卸载原始渲染器 hexo-renderer-marked 并选择渲染器之一安装：

npm un hexo-renderer-marked --save 
npm i hexo-renderer-markdown-it-plus --save ＃ or hexo-renderer-markdown-it

打开主题配置文件渲染引擎

katex:
  enable：true

Note: 渲染器插件只能选择其一，否则不能正常显示。

评论系统

NexT 支持多款评论系统。
如需取消某个页面/文章的评论，在 md 文件的 front-matter 中增加 comments: false

gitalk: 是一个基于Github Issue和Preact的现代评论组件。

单击此处注册新的OAuth应用程序。
其他内容可以随意填写，但请务必填写正确的回调URL（通常是与评论页面对应的域名）。
然后，您将获得 Client ID和Client secret。
创建一个您想要在GitHub中存储Gitalk 评论的存储库。
修改主题配置文件

# Gitalk
# Demo: https://gitalk.github.io
gitalk:
  enable: true 
  github_id:             # Github username
  repo:                  # Gitalk 评论的存储库
  client_id:             # Client ID
  client_secret:         # Client Secret
  admin_user:            # 所有者和合作者
  distraction_free_mode: true # Facebook-like distraction free mode
  language: zh-CN

Valine (China): 是一种快速，简单和高效的Leancloud，不依赖后端评论系统。官方使用文档
多评论系统支持: NexT允许您同时启用多个评论系统。官方使用文档

聊天服务

请参考官方文档

自定义样式支持

NexT 建议大家使用 Hexo 官方推荐的 Data Files 系统（Hexo 3.x 及以上）来分离个人配置，这样就可以在尽可能少地修改 NexT 工程代码的情况下进行个性化配置，方便主题升级。

文本结束标记

主题配置文件取消注释

custom_file_path:
  postBodyEnd: source/_data/post-body-end.swig

在路径 /source/_data 下创建/修改 post-body-end.swig文件，并添加以下内容

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

添加主题及标题栏背景图

首先主题配置文件取消注释

custom_file_path:
  style: source/_data/styles.styl

在路径 /source/_data 下创建/修改 styles.styl文件，并添加以下内容

// 添加背景 url(https://source.unsplash.com/random/1600x900); 
body {
    background:url(/images/background6.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size:cover;
}

// 标题栏背景
.site-meta {
    padding: 20px 0;
    color: #fff;
    background: $blue;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
}  

// 修改主体透明度
.main-inner{
    background: #fff;
    opacity: 0.95;
}

// 修改菜单栏透明度，会引起本地搜索菜单bug
//.header-inner {
//    opacity: 0.95;
//}

// 主页文章添加阴影效果
.post {
   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);
}

修改主副标题字体颜色

继续在/source/_data/styles.styl文件中添加，帮你挑选颜色的网站： color-hex

//主标题颜色
.brand{
    color: $white
}

//副标题颜色
.site-subtitle {
    margin-top: 10px;
    font-size: 13px;
    color: #ffffff;
}

修改按钮，选择区域，代码块，表格等样式

首先主题配置文件取消注释

custom_file_path:
  style: source/_data/variables.styl

在路径 /source/_data 下创建/修改 variables.styl文件（相当于修改主题文件 next/source/css/_variables/base.styl），并添加以下内容

// Buttons
// --------------------------------------------------
$btn-default-bg                 = white;
$btn-default-color              = #49b1f5;
$btn-default-font-size          = $font-size-small;
$btn-default-border-width       = 2px;
$btn-default-border-color       = #49b1f5;
$btn-default-hover-bg           = #49b1f5;
$btn-default-hover-color        = white;
$btn-default-hover-border-color = #49b1f5;

// Selection
$selection-bg                 = #49b1f5;
$selection-color              = white;

// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace;
$code-border-radius             = 3px;
$code-foreground                = $black-light;
$code-background                = #edf1ff;

// Table
// --------------------------------------------------
$table-width                    = normal;  //next默认100%
$table-border-color             = $gray-lighter;
$table-font-size                = $font-size-small;
$table-content-alignment        = left;
$table-content-vertical         = middle;
$table-th-font-weight           = 700;
$table-cell-padding             = 8px;
$table-cell-border-right-color  = $gainsboro;
$table-cell-border-bottom-color = $gray-lighter;
$table-row-odd-bg-color         = #f9f9f9;
$table-row-hover-bg-color       = $whitesmoke;

文章加密

在需要加密的文章 Front matter 区域设置 password: 123456
主题配置文件取消注释

custom_file_path:
  head: source/_data/head.swig

在路径 /source/_data 下创建/修改 head.swig文件，并添加以下内容

<script> 
 (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

参考链接：

hexo的next主题个性化配置
 Hexo Next主题进阶详细教程
 hexo个人博客next主题优化
 NexT主题统一网站颜色
 Hexo Theme NexT 主题个性化配置最佳实践
 Hexo+NexT 主题配置备忘

WilenWu

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
NexT主题进阶

文章目录安装主题主题核心配置主题优化RSS支持Creative Commons阅读进度和书签网站图标(favicon)SEO支持字数统计和阅读时长文章热度相关热门帖子背景动画第三方服务数学公式评论系统聊天服务自定义样式支持文本结束标记修改背景图及侧边栏颜色，修改主副标题颜色文章加密NexT 是Hexo框架中最为流行的主题之一。精于心，简于形。NexT 支持多种常见第三方服务，使用第三方服务 ...
复制链接

扫一扫