hexo+next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景 |
您所在的位置：网站首页 › 主题带音乐炫酷的动态软件叫什么 › hexo+next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景 |
hexo+next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景
|
前言
本篇文章是在已经搭建好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的都知道 绑定域名绑定域名的思路如下： 在万网购买自己喜欢的域名（.com的会贵一点，.site和.xyz的相对便宜一些，有的只需要几块钱一年就可以） 解析DNS 在hexo中添加CNAME文件 |
【本文地址】
今日新闻 |
推荐新闻 |