Hexo站点搭建(二)

下载主题

可以直接从guthub上下载：

    cd /home/HexoWeb  
    git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia  

等待下载完成，如出现下载失败可重复命令！

主题配置

修改文件

先修改/home/HexoWeb下的_config.yml文件,主要修改一下几个，其他可根据需要更改：

    title:            //网站名
    subtitle:         //签名
    description:      //网站描述
    keywords:         //网站关键字
    author:           //作者
    language: zh-CN   //语言

    url:              //站点名

    theme: yilia      //所用主题

在文件最后加上：

    jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

修改主题配置文件

修改/home/HexoWeb/theme/yilia的_config.yml文件，主要修改了：

      excerpt_link:     //后面什么都不写

excerpt_link填写了后会出现两个阅读全文的按钮，虽然长得不一样，但是看起来不太好，索性就不填写。
其他都可以根据自己的需要来改。

模块下载

需要在/home/HexoWeb下安装模块

      npm i hexo-ganarator-json-content --save

接下来做的就是根据自己爱好更改。

加入音乐播放器

H5的默认的音乐播放器不怎么好看，就去找了Aplayer与MetingJS两个配合使用
具体使用点击Aplyer文档，MetingJS有详细的教程。
先将js资源加入到theme/yilia/layout/_partial/head.ejs的head标签中

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

在theme/yilia/layout/_partial/layout.ejs的第六行下加上：

  <div class="aplayer"
    data-id="网易云歌单ID"
    data-server="netease"    //可以更改为其他
    data-type="playlist"     //可以切换单曲或歌单
    data-list-max-height="199px"  //如果为歌单，规定歌单最大长度
    data-list-folded="true"  //歌单折叠
    data-preload="auto"      //歌单预载
    data-loop="all"          //歌单循环
    data-autoplay=“false”    //自动播放
    style="top:23%;">
  </div>

如果想在移动端也加上播放列表，需要在theme/yilia/layout/_partial/mobile-nav.ejs第二行加上上面的代码。

参考资料

yilia主题
Aplay文档
MetingJS