最详细的Hexo Next主题配置教程

时间：2022-08-31 22:34:14

配置环境

安装Node（必须）

作用：用来生成静态页面的

到Node.js官网下载相应平台的最新版本，一路安装即可。

安装Git（必须）

作用：把本地的hexo内容提交到github上去.

安装Xcode就自带有Git，我就不多说了。

申请GitHub（必须）

作用：是用来做博客的远程创库、域名、服务器之类的，怎么与本地hexo建立连接等下讲。

安装hexo

Node和Git都安装好后,首先创建一个文件夹,如blog,用户存放hexo的配置文件,然后进入blog里安装Hexo。
- 执行如下命令安装Hexo：

sudo npm install -g hexo
  • 初始化然后，执行init命令初始化hexo,命令：
hexo init

至此，全部安装工作已经完成！blog就是你的博客根目录，所有的操作都在里面进行。
- 生成静态页面

hexo g

启动本地服务

hexo s

浏览器输入http://localhost:4000

设置头像

在站点配置文件中,添加avatar字段,值设置成头像的链接地址.

avatar: /images/avatar.png
//路径主题文件source/images目录下
设置网站图标(注意必须为ico格式)
在主题配置文件中,把favicon的注释去掉即可
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
//路径主题文件source/images目录下
添加「标签」页面

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

先在hexo/source的路径下创建tags文件夹,再创建一个md文件 名字为tags
title: Tagcloud
date: 2014-12-22 
type: "tags"
---

注意:这里的标题必须为Tagcloud,否则无法生成标签

测试标签页面
title: PHP基础第一章
tags:
 - PHP
date: 2016-11-14
---
添加「分类」页面

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

先在hexo/source的路径下创建categories文件夹,再创建一个md文件 名字为page
title: 分类测试
date: 2014-12-22
type: "page"
---
测试分类页面
在md里面加上categories: 分类的名字
---
title: PHP基础第一章
categories: PHP
tags:
 - PHP
date: 2016-11-14
---
添加「关于我」页面

新建「关于我」页面，并在导航栏中显示「关于我」链接。关于我页面需要自己添加html,css设计,否则此页面将是空的,下面的例子惊醒演示。

先在hexo/source的路径下创建about文件夹,再创建一个md文件
---
title: 关于我
date: 2016-11-10 20:34:05
---
添加「归档」页面

新建「归档」页面，并在导航栏中显示「归档」链接。在hexo/source的路径下创建archives文件夹即可。(你的所有文章都会在归档里面显示)

设置社交链接

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

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
文章打赏功能

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，Next特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要复制下面的代码添加到主题配置文件中即可开启该功能。

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: 图片链接
alipay: 图片链接
设置友情链接

在主题文件开启links_title和links即可

# title
links_title: 前端工具箱
#links_layout: block
#links_layout: inline
links:
   代码压缩: http://tool.oschina.net/jscompress
   CSS整理: http://example.com/
  1. 首先，找到 \themes\next\layout_partials\下面的footer.swig文件，打开会发现，如下图的语句：
    最详细的Hexo Next主题配置教程
看到划框的地方了吗？
  • 第一个框 是下面侧栏的“日期❤ XXX”
    如果想像我一样加东西，一定要在双大括号外面写。如：xxx{{config.author}},当然你要是想改彻底可以变量都删掉，看个人意愿。
  • 第二个，是图一当中 “由Hexo驱动” 的Hexo链接，先给删掉防止跳转，如果想跳转当然也可以自己写地址，至于中文一会处理。注意删除的时候格式不能错，只把<a>...</a>标签这部分删除即可，留着两个单引号”,否则会出错哦。
  • 第三个框也是最后一个了，这个就是更改图一后半部分“主题-Next.XX”,这个比较爽直接将..都删掉，同样中文“主题”一会处理，删掉之后在上一行 ‘-’后面可以随意加上你想显示的东西，不要显示敏感信息哟，请自重。
    1. 接下来，处理剩余的中文信息。找到这个地方\themes\next\languages\ 下面的语言文件zh-Hans.yml（这里以中文为例，有的习惯用英文的配置文件，道理一样，找对应位置即可）
Git上传
  1. 打开站点配置文件,翻到最下面,改成下面的样子
deploy:

     type: git

     repo: https://github.com/leopardpan/leopardpan.github.io.git

     branch: master

然后执行命令安装git：

npm install hexo-deployer-git --save

最后运行命令

hexo g//生成页面
hexo d//git上传

最详细的Hexo Next主题配置教程
上传成功如下图:
最详细的Hexo Next主题配置教程

上传到GitHub后空白或错乱解决方案

在主题配置文件中查找_internal: vendors把vendors修改为jj(自定义)

vendors:
  # Internal path prefix. Please do not edit it.
  _internal: jj

最后把source下的vendors改成jj即可(自定义)

标签：

相关文章