hexo + next 搭建博客相册页和音乐页教程

        

2016-09-13

搭建相册页

  1. 在git上输入 hexo new page “photos”,创建photos页面,之后在sourse文件夹下能够找到photos文件夹,在index.md里添加type: photos.
  2. 进入theme里的next下的config,在menu菜单下添加上photos页。
  3. 如果语言选择是zh-hans的话,记得在languanges里把photos添加进去,以确保网页显示的菜单为photos.
  4. 下面是重点,所有新建页面都可以照葫芦画瓢,next主题的整个网页布局都存在layout文件夹下,可以找到layout文件夹下有layout.swig和page.swig两个文件,layout.swig写的是整个页面的整体布局,page.swig是针对不同页面的布局。如果我们想搭建相册页,可以把自己写的相册页的代码放到page.swig,page.swig文件里div为post里有队不同页面的不同布局有分类,我们可以将相册页的代码显示在这里面,用到的js和css别忘了引用,存的时候用绝对路径就可以了。还有一种方法就是把代码直接放到photos文件夹下的index.md里,但是这个方法的js和css布局容易出问题,两种方法,相册页存储的div不同,容易引起页面混乱。

搭建音乐页

  1. 音乐页的新建建与相册页如出一辙,在git上输入 hexo new page “music”,创建music页面,之后在sourse文件夹下能够找到music文件夹,在index.md里添加type: music.
  2. 进入theme里的next下的config,在menu菜单下添加上music页。
  3. 如果语言选择是zh-hans的话,记得在languanges里把music添加进去,以确保网页显示的菜单为music.
  4. 如果我们想搭建音乐页,可以把自己写的音乐页的代码放到page.swig,page.swig文件里div为post里有队不同页面的不同布局有分类,我们可以将相册页的代码显示在这里面,关于网易云音乐的外链播放器和虾米的外链播放器对于hexo支持不是特别好,所以大家可以考虑自己动手写一个播放器或者是引用外部链接,这里不多说,除了相册和音乐,其他新的页面的展现大家都可以这么实现,有问题大家可以提出来。