基于Hexo搭建Next主题博客

最新推荐文章于 2024-11-09 23:59:24 发布
原创 最新推荐文章于 2024-11-09 23:59:24 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#hexo #next

Next

链接地址：https://github.com/caozongpeng/hexo-theme-next

NexT 是一个高质量并且优雅的Hexo 主题。这是精心制作做出来的 hexo 主题。

如果你对此主题非常喜欢，欢迎Star & Fork，非常感谢。

预览界面

首页

在这里插入图片描述

底部

在这里插入图片描述

相册

在这里插入图片描述

文章

在这里插入图片描述

搜索

在这里插入图片描述

安装 Installation

1. 在终端切换到hexo 根目录. 在hexo目录下一定有 node_modules, source, themes 和其他文件夹:

$ cd hexo
$ ls
_config.yml  node_modules  package.json  public  scaffolds  source  themes

2. 从 github 上获取主题 。

$ git clone git@github.com:caozongpeng/hexo-theme-next.git themes/next

3. 在 hexo 根目录下 的配置文件_config.yml里设置主题:

theme: next

更新 Update

$ cd themes/next
$ git pull
如何使用这个特性 How to use this feature
  1. 请先确保你所使用的 Hexo 版本在 3 以上
  2. 在站点的 source/_data 目录下新建 next.yml 文件（_data目录可能需要新建）
  3. 迁移站点配置文件和主题配置文件中的配置到 next.yml 中
  4. 使用 --config source/_data/next.yml 参数启动服务器, 生成或者部署。
    例如: hexo clean --config source/_data/next.yml && hexo g --config source/_data/next.yml。

支持多国语言, 包括:

?? 简体中文 & 繁体中文

?? 英语

?? 俄语

?? 法语

?? 德语

?? 日语

?? 印度尼西亚语

?? 葡萄牙语 (巴西)

?? 朝鲜语

?? 意大利语

?? 荷兰语

默认语言是英语。

language: en
# language: zh-Hans
# language: zh-hk
# language: zh-tw
# language: ru
# language: fr-FR
# language: de
# language: ja
# language: id
# language: pt
# language: pt-BR
# language: ko
# language: it
# language: nl-NL

在站点配置文件_config.yml中可以将语言切换成中文

language: zh-Hans

评论支持 Comment support

NexT 已经原生支持 多说 and Disqus 评论系统。

添加以下代码到你的主题配置文件 _config.yml:

duoshuo:
  enable: true
  shortname: your-duoshuo-shortname

或者

disqus_shortname: your-disqus-shortname

或者

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 正确填写邮箱, 才能及时收到回复哦♪(^∇^*) # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

标签页 Tags page

添加一个标签页面，里面包含您网站中的所有标签。

  • 创建一个名为 tags 页面

      hexo new page "tags"

  • 编辑标签页, 设置页面类型为tags.

      title: All tags
  date: 2014-12-22 12:39:04
  type: "tags"

  • 添加 tags 到主题配置文件 _config.yml 里:

      menu:
    home: /
    archives: /archives
    tags: /tags

分类页 Categories page

添加一个分类页面，里面包含您网站中的所有分类。

  • 创建一个名为 categories 页面

      hexo new page "categories"

  • 编辑分类页, 设置页面类型为 categories.

      title: All categories
  date: 2014-12-22 12:39:04
  type: "categories"

  • 添加 categories 到主题配置文件 _config.yml 里:

      menu:
    home: /
    archives: /archives
    categories: /categories

社交媒体 Social Media

NexT 可以自动添加链接到您的社交媒体帐户里:

social:
  GitHub: https://github.com/caozongpeng || github
  优快云: https://blog.youkuaiyun.com/qq_22067469
  E-Mail: mailto:kyriecao@163.com || envelope
  Resume: https://caozongpeng.github.io
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

Feed 链接 Feed link

显示 feed 链接。

在主题配置文件_config.yml里设置rss , 如下所示:

  1. rss: false 会禁用 feed 链接。

  2. rss: 使用站点 feed 链接。这是默认的选项。

    按照插件hexo-generator-feed的README中的安装说明进行操作。在完成这个插件的配置后，Feed链接也生成好了

  3. rss: http://your-feed-url 设置你的 feed 链接.

内置5种代码高亮主题 Up to 5 code highlight themes built-in

NexT 使用的是 Tomorrow 主题 ，一共有5种主题供你选择。
Next 默认使用 normal. 下面是 normal 和 night 主题的预览:

Tomorrow Normal Preview
Tomorrow Night Preview

查看更多信息点击Tomorrow 主题。

相册配置

请参考博文：https://malizhi.cn/HexoAlbum/

配置 Configuration

NexT 的配置很少


# Menu configuration.
menu:
  home: /
  archives: /archives

# Favicon
favicon: /favicon.ico

# Avatar (put the image into next/source/images/)
# can be any image format supported by web browsers (JPEG,PNG,GIF,SVG,..)
avatar: /default_avatar.png

# Code highlight theme
# available: normal | night | night eighties | night blue | night bright
highlight_theme: normal

# Fancybox for image gallery
fancybox: true

# Specify the date when the site was setup
since: 2013

更多配置请详细查看_config.yml文件。

更新日志

2019-01-28第一个版本

此外还有另一个非常 好看、简洁、大方 的主题：https://blog.youkuaiyun.com/qq_22067469/article/details/86685248

================================================================================
感谢阅读，写得不好的地方请指教，能帮助到你是对我最好的回报，不卑不亢，加油。
请你记住比你优秀的一定比你努力，比你努力的人一定比你优秀。
================================================================================
基于Hexo和NexT的博客搭建
zystrivego的博客
05-17 553
前言 主要记录一些要注意的点，因为网上教程版本众多，所以尽量以最新的官方文档为准；我的博客主要用来记录学习，搭的风格比较简练。 官方文档地址 Hexo官网 NexT中文文档 NexT英文文档 版本 Node.js v12.16.3 hexo: 4.2.1 NexT: v8.0.0-rc.2 2014-2017 https://github.com/iissnan/hexo-theme-next 2018-2019 https://github.com/theme-next/hexo-theme-
Hexo next主题博客搭建及美化
qq_39085060的博客
01-04 1647
转载及引用 hexo主题配置一     hexo主题配置二    hexo主题配置三     hexo主题配置四     hexo主题配置五     Hexo博客提交百度和Google收录     hexo个人...
使用Hexo搭建next主题效果的博客
黄庆庆的世界
11-13 636
一、安装Hexo 在某个盘下新建一个目录，例如hqblog 然后先安装node.js，去官网下载安装 然后安装git 然后执行命令 npm install -g hexo-cli 然后使用git来到创建的目录hqblog下，执行 hexo init 二，下载next主题 然后在这里目录下接着执行 git clone https://github.com/iissnan/hexo-theme-n...
Hexo博客Next主题相册搭建
AomanHao的博客
12-22 836
参考文章，小红鸡 参考文章，主题美化 在blog文件夹/source下创建photos文件夹，在photos文件夹创建index.md文件，编辑index.md文件，写入以下代码: <style type="text/css"> .header-inner{ display: none; } .sidebar{ dis...
Next主题美化博客
javaWeb
12-22 546
1.前言 在 Hexo 中有2份主要的配置文件，其名称都是_config.yml。 其中，一份位于博客根目录下，主要包含 Hexo 本身的配置；另一份位于themes/next/目录下，用于配置主题相关的选项。 2.Next主题安装 Hexo安装主题，只需要将主题文件拷贝至博客所在目录的themes目录下，修改相关配置文件即可生效。 博客所在目录下打开git bash Git cl...
基于Hexo搭建的博客系统源码.zip
11-02
基于Hexo搭建的博客系统源码.zip文件包含了一整套用于创建个人博客的源代码，使得用户可以自定义自己的博客样式和功能。下面我们将详细探讨Hexo的搭建过程、核心组件以及与人工智能的潜在结合点。 1. **Hexo搭建...
Hexo博客搭建文件（next主题）
12-07
下面将详细介绍Hexo博客搭建以及Next主题的配置。 首先，你需要确保你的计算机上已经安装了Git和Node.js。Git是分布式版本控制系统，对于管理代码和项目非常有用，而Node.js是JavaScript的后端运行环境，因为Hexo是...
hexo 搭建个人博客网站
最新发布
m0_69003698的博客
11-09 1978
主要记录一下搭建网站的步骤，以及搭建好之后该怎么修改yml文件，使自己的网站看起来好看些，后期发布文章等等。。。此搭建全程免费，非常的不错（除了更改域名之外)有什么附加功能大家可以一块在留言区讨论。🔑 注释：我的内容从许多博客，帖子中汲取接下来咱们开始进入正题。
用Github Pages+Hexo搭建博客之(十)Hexo博客next主题MathJax数学公式渲染问题
夏普通
10-13 1497
【置顶】【专栏】用Github Pages+Hexo搭建博客 文章目录【置顶】【专栏】[用Github Pages+Hexo搭建博客](https://blog.youkuaiyun.com/qq_34243930/category_9662425.html)1. 在主题配置中开启mathjax开关2. 在文章的Front-matter里打开mathjax开关3. 重新启动部署Hexo 在用Markdown写技术文档时，免不了会碰到数学公式。 常用的Markdown编辑器都会集成Mathjax，用来渲染文档中的类Lat
搭建基于Hexo和Next的个人博客并部署至Github Pages
- Next是一个基于Hexo的主题，提供了丰富的个性化设置选项，通过Next主题，可以定制出美观、实用、响应式的博客界面。 2. Github Pages - Github Pages是一个静态网站托管服务，它允许用户直接通过GitHub仓库来...
基于Next5主题美化的一款hexo博客主题
08-08
基于Next5主题美化的一款hexo博客主题
nextblog使用nextjs实现一个基于Markdown的博客
08-10
next-blog 使用next.js实现一个基于Markdown的博客
hexo+next博客搭建
z7sz的博客
06-21 296
服务器环境：Ubuntu 20.04 nodejs版本：v18.3.0 npm版本：8.12.2 hexo版本：6.2.0 next主题版本：v8.12.1关于nodejs和npm的安装，网上有很多的方法，我用的是源码安装，但是缺点就是make编译的时间很长，优点则是可以选择安装的版本。nodejs18.3.0下载地址：https://nodejs.org/dist/v18.3.0/node-v18.3.0.tar.gz下载完之后上传到服务器上，然后解压文件并安装 2、安装hexo 2.1、下载cnpm
Hexo+Next博客搭建
qq_40590778的博客
03-01 156
1.登录github创建一个仓库，仓库名为：用户名.github.io 2.下载并安装Node.js 网址: nodejs.org 3.打开git bash ，输入命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装后输入cnpm -v可查看版本 之后npm需改成cnpm 4.输入 cnpm install -...
使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内添加相册功能（七）
EnjoyToShare | 资源分享平台
03-10 745
给博客添加一个相册页面，以展示自己拍摄的一些照片 (≖ᴗ≖)✧ 一、说明： 在github上新建一个仓库，主要用于存储图片，可以通过url访问到，也方便管理 将要放到相册的图片处理成json格式的数据，然后进行访问，这里json的格式需要配合要使用的样式，所以需要处理成特定格式的json数据，下面会给出 图片裁剪，因为相册显示的样式最好是正方形的的图片，这里使用脚本处理一下 图片压缩，相...
Hexo博客Next主题美化
Alderaan的博客
05-12 1036
本文主要说明在Hexo博客nexT主题下如何进行美化，具体对应效果可通过博客页面(https://alderaan.xyz)进行查看。
Hexo博客搭建 —— Next主题配置
ahahayaa的博客
06-24 1096
你需要在这里设置你的博客网站的域名，这样 Hexo 生成的链接才能正确指向你的网站。然而，如果你没有使用这种特殊命名的仓库，那么你的仓库仅仅是一个用于托管代码的平台。这将确保文章链接是唯一的，从而避免了链接冲突的问题。这样，即使你更新了主题，你的自定义设置仍会保存在根目录下的。在这种情况下，新的链接格式将替代原来的链接格式。为你的自定义域名，或者使用部署服务分配给你的临时域名（例如，该文件的内容和下面的主题配置文件中的内容相同(就是从主题下的。，这是为了避免将来主题更新时，由于新版主题自带的默认的初始的。
定制Hexo-NexT的个性化博客
小晓晓晓林的博客
07-28 2496
前几天，我写了一篇关于如何使用GitHub＋Hexo搭建个人博客的博文，接下来我会以我的博客为例，讲讲如何对NexT主题的个性化定制和一些细节的优化。 前言 这篇博客主要是next主题的个性化定制，还有一些细节的优化。在搭建的过程，有一些优化，也是参考了大量之前大佬的教程和结合了一些做的比较优秀的博客，我在这里做了一个集合，同时把自己做的而别人没有做的优化，写出来方便大家。 参考的文章我都会贴出...
为 hexo NexT 添加 Gitment 评论插件
12-23 185
Gitment 是作者imsun实现的一款基于 GitHub Issues 的评论系统. 支持在前端直接引入, 不需要任何后端代码. 可以在页面进行登录, 查看, 评论, 点赞等操作. 同时有完整的 Markdown / GFM 和代码高亮支持. 尤为适合各种基于 GitHub Pages 的静态博客或项目页面. 这篇文章仅介绍如果在 hexo-NexT 中添加 Gitment 评论插...
Hexo Next主题：快速搭建个性化博客
描述中的“hexo搭建博客的next主题下载，赶紧下载吧，积分已经设最低了”这部分说明Next主题的获取方式。通常情况下，Next主题作为开源项目，可以通过其在GitHub上的仓库地址进行克隆或者下载压缩包。由于这里提到了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值