前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo NexT 主题的简易使用

Hexo NexT 主题的简易使用

作者头像
acc8226
发布2022-05-17 17:07:11
4040
发布2022-05-17 17:07:11
举报
文章被收录于专栏:叽叽西

主题介绍: 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

代码语言:javascript
复制
$ cd hexo-site
$ npm install hexo-theme-next

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

代码语言:javascript
复制
$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

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

升级 NexT

using npm

代码语言:javascript
复制
$ cd hexo-site
$ npm install hexo-theme-next@latest

using git

代码语言:javascript
复制
$ cd hexo-site
$ cd themes/next
$ git pull origin master

启动 NexT

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

代码语言:javascript
复制
theme: next

在更改主题和验证主题之间,我们最好使用 hexo clean 来清理 Hexo 的缓存。 然后键入hexo s --debug,现在你可以在浏览器中打开 http://localhost:4000,检查网站是否正常运行。

部署

Local Deployment 本地部署

  1. Modify files locally. 本地修改文件
  2. Localization testing: 本地化测试:hexo clean && hexo s.
  3. Deployment: 部署:hexo g -d.

Continuous Integration 持续集成

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

开始自定义设置

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

代码语言:javascript
复制
# 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个方案,它们是:

代码语言:javascript
复制
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

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

Dark Mode 黑暗模式

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

代码语言:javascript
复制
# Dark Mode
darkmode: true

Reading Progress 阅读进度

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

代码语言:javascript
复制
# Reading progress bar
reading_progress:
  enable: true

GitHub Banner

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

代码语言:javascript
复制
# `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 书签

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

代码语言:javascript
复制
# Bookmark Support
bookmark:

返回顶部

代码语言:javascript
复制
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前提已安装 Node 和 hexo
  • 安装 NexT
    • 获取 NexT
      • 升级 NexT
        • 启动 NexT
        • 部署
          • Local Deployment 本地部署
            • Continuous Integration 持续集成
            • 开始自定义设置
              • 主题
                • Dark Mode 黑暗模式
                  • Reading Progress 阅读进度
                    • GitHub Banner
                      • Bookmark 书签
                        • 返回顶部
                        相关产品与服务
                        持续集成
                        CODING 持续集成(CODING Continuous Integration,CODING-CI)全面兼容 Jenkins 的持续集成服务,支持 Java、Python、NodeJS 等所有主流语言,并且支持 Docker 镜像的构建。图形化编排,高配集群多 Job 并行构建全面提速您的构建任务。支持主流的 Git 代码仓库,包括 CODING 代码托管、GitHub、GitLab 等。
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档