Hexo NexT 主题的简易使用

简介: 主题介绍:NexT - Elegant and powerful theme for Hexo. 支持丰富的拓展的 Hexo 主题.官网地址https://theme-next.js.org/github 地址https://github.com/next-theme/hexo-theme-next

主题介绍:


NexT - Elegant and powerful theme for Hexo. 支持丰富的拓展的 Hexo 主题.


官网地址


https://theme-next.js.org/


github 地址


https://github.com/next-theme/hexo-theme-next


前提已安装 Node 和 hexo



  • 操作系统下安装 nodejs


  • 使用 npm 安装 hexo: npm install hexo --save


安装 NexT



获取 NexT


using npm

$ cd hexo-site
$ npm install hexo-theme-next


或使用 git 进行下载(克隆整个仓库到 themes/next 目录)

$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next


或者转到 NexT 版本Release Page 发布页面. 下载 稳定版,将 zip 文件解压缩到站点的 themes 目录,并重命名解压缩的文件夹为 next


升级 NexT


using npm

$ cd hexo-site
$ npm install hexo-theme-next@latest


using git

$ cd hexo-site
$ cd themes/next
$ git pull origin master


启动 NexT


Hexo 站点配置文件/_config.yml)中设置你的主题:

theme: next


在更改主题和验证主题之间,我们最好使用 hexo clean 来清理 Hexo 的缓存。


然后键入hexo s --debug,现在你可以在浏览器中打开 http://localhost:4000,检查网站是否正常运行。


部署


Local Deployment 本地部署


  1. Modify files locally. 本地修改文件


  1. Localization testing: 本地化测试:hexo clean && hexo s.


  1. Deployment: 部署:hexo g -d.


Continuous Integration 持续集成


可以做到直接在线编辑文件,立即生效的效果.


开始自定义设置



如果是第一次安装 NexT,则复制整个配置文件theme config file 主题配置文件 by the following command:

# Installed through npm
cp node_modules/hexo-theme-next/_config.yml _config.next.yml
# Installed through Git
cp theme/next/_config.yml _config.next.yml


主题


迄今为止,NexT 支持4个方案,它们是:

#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini


默认的 NexT 方案是Muse。我这里选择的是 Gemini 主题.


Dark Mode 黑暗模式


您可以通过编辑主题配置文件,搜索暗模式关键字来启用暗模式。 主题下一步自动显示黑暗模式,如果操作系统偏好的主题是黑暗的。 Css 混合混合模式是用来使黑暗模式的所有4个方案以上,确保您的浏览器支持此属性。


# Dark Mode
darkmode: true


Reading Progress 阅读进度


You can enable it by setting value reading_progress.enable to true in theme config file.

# Reading progress bar
reading_progress:
  enable: true


GitHub Banner


Next 在右上角提供了 GitHub 上的 Follow me 标题。

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/acc8226
  title: Follow me on GitHub


Bookmark 书签


书签是一个插件,允许用户保存他们的阅读进度。 用户只需点击页面左上角的书签图标(如图)就可以保存滚动位置。 当他们下次访问你的博客时,他们可以自动恢复每个页面的最后滚动位置。

# Bookmark Support
bookmark:


返回顶部

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true



目录
相关文章
|
6月前
|
JavaScript
Hexo个人博客之Next-8.20主题下载及美化
Hexo个人博客之Next-8.20主题下载及美化
|
11月前
|
PHP SEO
WordPress 主题和插件
WordPress 主题和插件
140 0
|
11月前
hexo主题集成pug
hexo主题集成pug
71 1
|
前端开发 算法 JavaScript
hexo博客3:主题选择
hexo博客3:主题选择
116 0
|
JavaScript 安全 前端开发
给Hexo添加说说功能
给Hexo添加说说功能
|
前端开发
Butterfly安装文档(三)主题配置-1(一)
Butterfly安装文档(三)主题配置-1
Butterfly安装文档(三)主题配置-1(三)
Butterfly安装文档(三)主题配置-1(三)
|
数据采集 搜索推荐 数据挖掘
Hexo(3)-安装自己喜欢的主题
我们之前使用 Hexo 生成的博客使用的是 Hexo 的默认主题:Landscape。怎么说呢,这个主题猛地一看还行,仔细一看还不如猛地一看,所以我决定另寻归宿。
|
Shell 开发工具 git
Hexo系列(四) NexT主题配置
Hexo系列(四) NexT主题配置
178 0
|
存储 前端开发 JavaScript
从零开始写一个Hexo主题
本文将会从零开始编写一个简单的Hexo博客主题,目的是了解一个Hexo博客主题的构成以及如何编写,因此,本示例中的博客页面样式不做过多描绘,样式主要参考 Hexo theme 中的 Noise 主题。
800 1
从零开始写一个Hexo主题