hexo+next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景

最新推荐文章于 2024-11-07 16:36:16 发布

sunshine940326

最新推荐文章于 2024-11-07 16:36:16 发布

阅读量2.2w

点赞数 21

分类专栏： github

本文链接：https://blog.csdn.net/sunshine940326/article/details/69933696

版权

本文档详细介绍了如何在Hexo博客上使用Next主题进行高级定制，包括绑定自定义域名、添加菜单、设置头像、Logo，以及集成网易云音乐和跟帖功能，同时还提供了炫酷动态背景的实现方法和统计功能的添加。通过这些步骤，你可以打造一个个性化且功能丰富的博客网站。

摘要由CSDN通过智能技术生成

前言

本篇文章是在已经搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以参考我的另一篇博文：了解githubPages+hexo搭建博客的原理或者利用Gitpage+hexo开发自己的博客，这两篇博文都比较详细的教大家最基础的怎么将博客搭建起来。本篇博文是使用next主题的进击版本，主要是有以下内容

域名绑定，将github博客和你的独有域名绑定
添加更多的menu内容
添加头像
定义网站个性logo
自定义样式，重写默认样式，个性化定制你的博客
炫酷动态背景制作
添加网易云音乐
添加网易云跟帖
添加leancloud阅读次数统计功能
添加wordcount页面字数统计
添加fork me on github功能

要想最快的知道这些功能的效果，请移步我的个人博客：http://cherryblog.site/ ，顺便求个fork，大爷们看过可以评论一下，试一下新加上的网易云跟帖效果怎么样ヽ(●´ε｀●)ノ
首先要说一下我使用的版本，这个是很重要的，我的博客最先创建于2016年的9月份，距离现在已经有大半年了，所以好多版本都已经进行了更新，特别是next主题集成了更多的插件，简直不要太爽＼（＠￣∇￣＠）／

hexo v3.2.2
next v5.1.0
node v4.5.0

在改成自己想要的效果之后，对整体的hexo的next主题我有了一个大概的了解，其实next主题的最新版（5.1）已经集成了大部分我们需要的插件，只需要在主题配置文件中将默认的false改为true即可，但是我们也仍然需要知道都有哪些新的功能，最有效的方法是直接去查看官网的api：next官网这里写图片描述

授之于鱼不如授之于渔
希望我们都能够理解其源码，制作出属于自己专属的个性化博客(•̀ᴗ•́)

我们需要改的文件其实也就那么几个，大部分是不需要更改，next都已经帮我们配置好了~
默认目录结构：

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json

deploy：执行hexo deploy命令部署到GitHub上的内容目录
public：执行hexo generate命令，输出的静态网页内容目录
scaffolds：layout模板文件目录，其中的md文件可以添加编辑
scripts：扩展脚本目录，这里可以自定义一些javascript脚本
source：文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
- drafts：草稿文章
- posts：发布文章
themes：主题文件目录
_config.yml：全局配置文件，大多数的设置都在这里
package.json：应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

我们最先修改的应该是在hexo根目录下的配置文件_config.yml文件，这里是配置整个站点的配置信息，在文章的最后贴出我的配置文件，有兴趣的朋友可以参考一下~
其次就是我们的主题配置文件
在对应的主题下的_config.yml 因为我使用的是next主题，所以目录的路径为C:\Hexo\themes\next\_config.yml 这里配置的是使用主题的配置文件，这个配置文件的东西就有点多了，我们大部分的修改也是在这个文件下完成的。比如说使用集成的第三方插件，默认为false，我们需要将其改为true并且配置相应的app_key就可以使用该插件了~有木有很方便(^ ◕ᴥ◕ ^)
然后我们需要修改样式的话是需要设置css和甚至是修改模板，
页面展现的全部逻辑都在每个主题中控制，源代码在hexo\themes\你使用的主题\中，以next主题为例：

├── .github            #git信息
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-Hans.yml      #简体中文
|   └── zh-tw.yml      #繁体中文
├── layout             #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _custom        #可以自己修改的模板，覆盖原有模板
|   |   ├── _header.swig    #头部样式
|   |   ├── _sidebar.swig   #侧边栏样式
|   ├── _macro        #可以自己修改的模板，覆盖原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打赏模板
|   |   ├── sidebar.swig   #侧边栏模板
|   ├── _partial       #局部的布局
|   |   ├── head       #头部模板
|   |   ├── search     #搜索模板
|   |   ├── share      #分享模板
|   ├── _script        #局部的布局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主页面模板
|   ├── index.swig     #主页面模板
|   ├── page           #页面模板
|   └── tag.swig       #tag模板
├── scripts            #script源码
|   ├── tags           #tags的script源码
|   ├── marge.js       #页面模板
├── source             #源码
|   ├── css            #css源码
|   |   ├── _common    #*.styl基础css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字体
|   ├── images         #图片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道