首页 通用开发

# 背景

作为一个开发者不能没有博客，最近花了几天的时间搭建了这个博客，处理了很多细节，在这篇文章中我会把我从开始到现在以及后续的优化整理出来，帮助更多的人搭建、维护、更新、自己的博客。

一开始我所有的博客都写在新浪微博，因为微博上更容易推广自己的文章，微博用户量大，但是后来微博的弊端慢慢的显示出来了，毕竟不是开发者的天地，我的博客中经常会插入大量的代码，而微博不支持 markdown 编辑，普通的编辑器对代码块的兼容性非常差，别说高亮了，有时候排版都会错乱，最后外观很不好看，如下图：

微博代码

而且微博的账号系统也存在一定的弊端，所以后来转向简书、掘金等技术平台，不得不承认相对于微博来说这些平台对开发者就要友好多了，不过后来又发现一个问题。因为我在写文章的时候使用的是本地的 markdown 编辑器，而这些平台对 markdown 语法的一些小细节并不严谨或者说统一如下图：

简书VS掘金

两个平台的编辑器无法做到统一，以至于每次写完文章都需要针对两个平台做不同的修改。

综上所述，最简单的也最一劳永逸的方法就是搭建自己的博客平台，而 HEXO 很好的帮我们解决了这个问题，其实对于一个开发者来说并不是什么难事，整个流程对于大部分有代码基础的开发者来说一上午时间就可以搞定，不过最难的也是最头痛的就是对细节的调整，对 UI 的修改、优化等，不过本文会对此逐一讲解。

# 环境配置

  • Node.js

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

  • Git

一般的开发者不会没有这个吧，我是安装 Xcode 就会有这个了，

使用 Homebrew, MacPorts ：brew install git; 或下载 安装程序 安装

  • bitbucket 账号

一般都会使用 HEXO+GitHub page 的形式搭建自己的博客，但是这里有个问题就是 GitHub 是开源的，任何人都能在上面看到你的源代码，虽然这并没有什么太大的影响，不过对于我来说感觉怪怪的，所以我就用了 bitbucket page 来处理我的博客，所有的东西都一样只不过这个是个私有库罢了（免费五个人）

# 开始建站

# 第一步：创建仓库

进入 github/bitbucket（后续都以 github 为例）新建 repo，这里要注意 repo 的名字一定要满足 your Account Name /github.io。如果是 bitbucket 那就是 your Account Name /bitbucket.io，因为只有这样的仓库名称最后才能以静态页面展示。如图：XXX 的内容一定要与红色的框里的文本一致。

# 第二步：创建本地文件夹

创建文件夹之后 CD 到你创建的文件夹中执行 hexo 的初始化相关命令

1
2
$ hexo init
$ npm install

执行完毕之后你的文件夹里就有内容了，标准的目录结构是这样（只列出几个必要的文件夹及其子目录）

1
2
3
4
5
6
7
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

  • _config.yml：
    其中我们以后的大部分操作都会在 _config.yml 中进行，这个文件是我们的站点的配置文件。

  • scaffolds：
    模板文件，规定了我们创建一篇文章的时候最开始的样子，

  • source：
    可以暂时的理解成我们文章的存放处

  • themes：
    主题文件

# 第三步：部署到 Git

修改我们的的站点配置文件 _config.yml 中如下字段


其中：

  • type 值对应的是你所部署的的服务器类型，我们这里填写 git 就可以。

  • repo 是你的仓库地址，也就是仓库克隆的地址，推荐用 https 的链接。

  • branch 不写默认是 master，通常我们写成 master 就可以。

以上配置完成后保存 然后回到终端执行 npm install hexo-deployer-git --save 安装一个插件，这样才能将你写好的文章部署到 github 服务器上并让别人浏览到。安装完成后在终端中依次执行如下代码 (为了简单后续统称为三步)

  • hexo clean 清理缓存

  • hexo generate 进行渲染 简写 hexo g

  • hexo server 部署到本地 (调试使用) 简写 hexo s 。然后浏览器输入 http://localhost:4000 就可以看到你博客的效果啦，不过这是本地调试用，其他人是看不到的。(调试完毕后记得 control + C 关闭本地端口，不然下次就进不去啦)

  • 调试完毕后使用 hexo deploy 简写为 hexo d 来部署到 git 服务器。

执行完以上操作后打开浏览器地址了输入 http://你github名字.github.io 就可以看看到效果啦，这回是所有人都能看到的，用手机也可以。至此第三步已经完成，最终的结果如下图：

# 第四步：写文章

使用如下命令 hexo new post “文章名字” 就可新建文章啦，建立好的文章在 source/_posts 中，你可以用 markdown 语法编辑内容就可以。编辑完成后执行第三步中终端的操作就可以啦，刷新下浏览器就可看到你的新文章啦。如下图:

# 个性化

# 一：主题

# 获取

主题是我么个性化的基础和前提，我们想做任何个性化上的修改基本上都是在我们主题上的修改，先找到一个自己满意的主题是首要任务。关于主题网上有很多很多，HEXO 官方的主题目录也收录了好多来着世界各地开发者的主题。或者开发者也可以直接去网上搜索 HEXO theme 关键字来获取主题。

# 安装

主题一般都是 repo，只要讲起 clone 到博客目录 themes/XXXX 下就可了，XXXX 对应的就是你给主题起的名字，像这样： git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git themes/a-rsnippet 这样就可以保证每次主题的作者有更新了我们就可以 pull 获取更新。不过这样有个问题后面我会在 HEXO 多终端同步一栏讲到，所以这里我们选择另一种方式去安装，就是直接把主题的 repo 下载下来
然后解压放到 themes 中。其实对于已经稳定的主题作者一般不会频繁更新，不稳定的主题我们也不会用，所以用后者安装也是一样的。

然后我们回到刚才的站点配置文件中 _config.yml 修改如下字段，对应的名字就是你刚才那个主题文件夹的名字：我这边是 next，

然后保存，再去终端执行那三步，接着刷新网页就可以看到新的界面啦。下面是我换了 NEXT 主题刷新后的效果。因为该注意已经非常完善，所有后续用该主题做例子来讲

# 二：主题菜单

# 添加按钮

主题菜单也可以说是主题按钮。也就是上面顶部的两个，next 主题默认的两个是 Home、Archive，我们一般会加上 tag about category 等。这些都是需要在主题上进行修改，我们需要修改主题的配置文件，首先在主题的文件夹下找到 _config.yml 文件，没错和之前的站点配置文件同名，只不过他们的路径不同，大家千万不要弄混，站点配置文件是配置站点通用的东西，而主题配置文件是配置一些主题的元素。在主题配置文件找到 menu 字段

可以看到主题作者注释掉了一部分按钮只保留了两个最基本的，这里需要注意前面的 Key 并不是代表的是按钮名字，因为该主题是支持多语言，所以这个 key 只是个标识，具体的按钮名字要去该路径下查找

其中每一个文件对应了不同的语言，我们以汉语为例，进入 zh-Hans.yml 中修改这些字段

其中 key 就是之前我们在主题配置文件中的 key，而后面的 value 则是简体中文状态下按钮的名字。修改完成后我们保存执行那三步就可以看到我们新添加的按钮了。

# 添加页面

添加按钮后我们需要点击按钮显示统一的页面。这时候我们需要添加页面。以 tag 页面为例，hexo 中添加页面的命令是 hexo new page XXXXX 后面 XXX 则是要添加页面的名称，我们这里写 tags。为了测试新建的 tag 页面我们对之前的页面添加个 tag。去 source/_post 中找一篇文章我们在开头添加如下字段，多标签以此类推

然后编辑我们刚才生成的 tag 页面 ( source/tags/index.md ) 指定其 type 为 tags

然后保存执行那三步就会有如下效果

点击对应的 tag 即可跳转到改 tag 所对应的文章。其他页面同理。

# 三：添加阅读更多 button

我们在首页的时候其实就是我们的文章列表，但是这时候有个问题，如果我们某一篇或者某几篇文章很长，那首页是不是更长呢？其实在首页我们可以只显示文章部分内容，通过点击阅读更多按钮来进入文章详情。这个时候就需要截断文章。我们在文章的合适地方采用 <!--more--> 来截断，用默认文章来看

然后执行那三步就会如下效果

点击阅读更多。

# 四：更改主题背景

首先找到如下路径 themes\next\source\css_custom\custom.styl 会发现里面是空的，这个文件是 Next 主题为我们预留的做一些自定的 css 样式的地方，我们添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//背景图片相关
@media screen and (min-width:1200px) {

    body {
    background-image:url(/images/bg.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover
    }

    #footer a {
        color:#eee;
    }
}

这里大家应该就可以看出括号里面的图片路径就是我们的背景图片，我们只需把图片放入 themes\next\source\images 中即可，记住图片名字要写对，要有后缀。同理括号里面我们可以直接放一个图片的链接比如 https://tpc.googlesyndication.com/simgad/6893153702744595670 做完这些操作保存，然后执行那三步即可看到效果，不过可能浏览器有缓存，可以清理下缓存再刷新看看。

# 五：修改博客背景透明度

既然再上一步中修改了背景图片，如果被 NExt 本身的白色挡住确实不好看，我们可以尝试把本身的白色背景变成透明的，这样会美观很多，同样还是修改刚才的文件 themes\next\source\css_custom\custom.styl 在上一步的基础上我们可以添加如下代码

1
2
3
4
5
//改变背景色和透明度
.main-inner {
    background: #fff;
    opacity: 0.9;
}

其中第一个属性为颜色值，第二个属性就是我们的透明度啦。适当修改，不然会适得其反连字都看不清啦。做完上两步就是我的这个博客的效果。

# 六：修改作者头像为圆形，

我们默认是方形的头像，想修改为圆形的话同样是上两步的那个路径下添加如下代码

1
2
3
4
5
6
7
.site-author-image {
  border-radius: 100%;
  padding: 2px;
  border: 2px dashed #fff;
  animation: cycle 2s 0.5s forwards;
  transition: border-radius 2s;
}

保存 -> 三步 即可看到效果

# 七：添加背景动画

背景动画使用 Js 来处理，会 JS 的同学可以自己写喜欢的动画，我这边就用了网上比较通用的动画。找到以下路径 themes\next\layout\_layout.swig 在文章 </body> 的上面添加如下代码

1
2
3
4
<script type="text/javascript"
color="255,255,255" opacity='1' zIndex="-2" count="100" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}


然后 保存 -> 三步即可看到效果 其中 src 为 JS 的路径，有兴趣的可以自定义效果。

# 八：添加评论页面

HEXO 的评论页面官方推荐了 disqus，无奈已经被墙，即使开发时候自己有克服的方法但是也不能保证所有看你博客的人都有克服的方法。所有我们打算采用其他的的一些第三方来实现，首先先对市面上的几个产品做下对比：

# 比较：
  • disqus

比较大牌的评论系统，服务稳定，唯一的缺点是国内无法使用。暂不考虑

  • 多说
    国内比较出名的评论系统，已经关闭服务暂不考虑。

  • gitment
    一款基于 github issue 的评论系统，风格很像 github，只是目前还不是太稳定，且界面无法自定，可能会于博客有些不协调。而且评论需要 github 账号

  • livere
    中文名字叫来必力，是一款韩国的评论系统，在不带有任何民族情感的前提下来看确实棒子的东西还是不错的，也是我目前在使用的一款，我主要用它的原因有几点

    • 支持很多种格式的评论导入，你可以很方便的吧之前在其他平台上的评论数据导入进来，支持多种 json 格式。

    • 简介的 UI 提供多种主题。

    • 国外的东西不受国内的限制。

# 集成：

先去 livere 的官网注册 m，具体过程我就不讲了，一步一步安她的来就行，之后他会给你一个安装代码，像这样：

里面主要的信息就是 data-uid。
NEXT 主题本身是已经集成了 livere 评论的，只不过被注释掉了。找到主题配置文件 _config.yml 找到如下代码

打开注释填入你在 livere 中注册后它给你的 UID 即可。然后 保存 -> 三步即可。

# 九：多终端操作

# 背景

大家都知道 HEXO 是静态博客，所有的页面都是静态的通过本地文件渲染然后再部署上去，这就带来一个多终端部署的问题，比如公司电脑配置好了，想回家在进行写作，发现家里什么都没有还需要重新配置环境，不过这倒是次要，关键是如果不能保证两个终端的内容完全一样就会造成服务器上的数据会被最后一次部署覆盖，导致前几次的都被覆盖掉。

# 解决

其实大家应该也看出 HEXO 整体的一套流程下来就是 git 的工作流程，不管你用 github 还是 bitbucket 都是遵循 gitflow 的，而 gitflow 就是一种多终端多人协同工作的解决方案。所以我们可以用它来解决多终端同步的问题。

# 流程

我们先来了解下 hexo 的整体流程。我们正常的为文件夹结构如图：

# 第一步：hexo g

source 文件夹下存放着我们的文章，tag、归档之类的信息，也就是我们的博客的内容。当我们在终端执行 hexo g 的时候会被 source 中的文件按照某种规则方式渲染成静态的页面文件放到 public 中：

# 第二步：hexo d

然后我们执行 hexo d 这一步暂时我们可以认为就是对 public 中的文件进行 push 到我们的 git 仓库的过程。所以在我们的仓库中 XXXXXX.bitbucket.io 大家看到的文件只有 public 中的文件。

# 附加：hexo clean

其实这一步是和 gitflow 没有关系的，但是既然讲到流程我这边也在说下，之前说过这步是用来清理缓存的，其实他的作用是运行在第一步之前，将整个 public 文件删除，然后我们再执行 hexo g 重新渲染进 public，之后再 hexo d 进行部署，这样就避免之前的内容对我们造成影响。

# 具体操作

通过上一步流程我们知道如果 git 服务器上只有 public 是不够的，我们需要有我们整个博客文件夹下的所有文件才能进行多终端操作。所有这边有两个方法：

  • 新建另一个仓库我们暂时命名为 MyProject，把我们所有的文件传到这个 Git 仓库上，当我们换另一台电脑时候我们直接拉这个新仓库的代码然后进行写作 -> 三步走最后在将所有文件推到 MyProject 以后所有的 git 操作都在这个仓库中进行。

  • git 给我们提供了多分支操作，我们可以做 xxxx.github.io 这个仓库中创建一个新的分支暂时命名为 hexo 分支，这个分支的作用和上一个方法里 MyProject 的作用以及里面的文件一模一样，只不过我们这个方法就省的我们再创建一个仓库了。以后所有的 git 操作都去这个分支进行，本地的文件一直保持在这个分支就行，不过有一点需要注意的就是，即使所有的操作都在 hexo 分支下进行也必须保证 master 分支为主分支 (default branch)，不然你就打不开你的博客了。

以上两种都是属于基本的 git 操作，本文不再赘述。不过有一点这里要强调下，还记一开始我跟大家说的主题的是推荐大家直接去主题所在的 repo 下载 zip 然后解压拖进博客目录里面吗？如果你不是拖拽进来的而是 clone 下来的话在这一步你会涉及到 git 的 add submodule 操作。其实操作不难，具体的命令网上也是大把。不过如果你像我一样使用 bitbucket 的话可能发现无法进行 submodule 操作，不知道这个是 bitbucket 的 BUG 还是什么其他原因，同样的命令使用 github 托管博客的时候是没有问题的，而 bitbucket 就不行，当你使用另一台电脑的进行拉去的时候执行 git submodule init 操作的时候他会提示找不到。至今未解决，如果哪位大神有什么方法及时联系我。

# 十：绑定个人域名

# <font color=red> 注意：bitbucket 从 2015 年开始关闭了个人博客自定义域名的功能，也就是说如果你是按照上面操作把个人博客部署在 bitbucket 中的话就无法使用自己的域名，关于这一点 bitbucket 文档已经有明显的说明 </font>

# 准备工作

在 github 上创建仓库，仓库的名字为 username.github.io。然后修改站点配置文件中部署地址（repo 对应的字段），将原本的 bitbucket 的仓库地址改为 github 的地址

之后进行保存然后三步走，部署成功后你的博客就从 bitbucket 上迁移到 github 中了，这样一来，你整体的博客仓库还是在 bitbucket 中的私有库中，但是 public 文件夹中的公开文件已经被你部署到 github 的仓库中。该保密的信息仍然保密，同时也不影响你绑定自己的域名，一举两得。正常情况下按照上面步骤完成后的博客地址是 xxx.github.io，下面就开始绑定自己的域名。

# 域名购买

这个渠道有很多，我就不再一一赘述，我这边以阿里云的万网域名购买为例，找到合适自己的域名

# 域名解析

购买域名并且按照他的步骤实名认证之后，需要把域名解析到我们的博客中，在阿里云的控制台找到域名右侧对应的解析按钮。点击然后添加解析

然后按照如下填写添加解析，记得把记录值替换成你自己的博客地址

之后记得启用该记录，不过如果你像我一样是阿里云购买并且配置的话是不需要启用的，默认帮你启用。

# 仓库配置

然后回到你的 github 仓库，进入你的仓库设置页面，找到如下字段，在红框处添加你的域名，然后保存即可

# 博客配置

回到你的博客目录，在 source 目录下创建一个 <font color=red> 不带任何后缀的 </font > 文件，命名为 CNAME，里面填写你的域名，我是这样，只添加你的域名不要添加其他东西。然后保存 执行三步之后就可以通过你的域名访问你的博客啦，如果不能访问可能是因为运营商 DNS 缓存问题。等几分钟就可以了。

# 十一：实现 https 协议

按照以上步骤完成后可以通过域名访问，但是有个问题就是如果你用谷歌浏览器或者 Safari，他就会提示你网站不被信任，只有你点击仍要继续才会展示你的博客，并且地址栏里面还是有个红色的 ×，虽说不影响使用和阅读，但是还是感觉别扭，这次我们来讲如何将自己的博客协议改为 Https。这里有几种方法：

  • 购买证书

  • 使用免费 CA 证书。腾讯云阿里云都有提供。不过有时间限制

  • 使用 CDN 进行反向代理

如果使用上两步的话基本上证书的服务商都会告诉你如何配置，他们的文档讲的一定比我的详细，不过主要原因是我们使用的 github Page 是不支持上传证书的，所以这里主要说下第三步，通过 CDN 配置反向代理，这里就需要用到一个国外的 CDN 服务提供商 Cloudflare:

# 原理

Cloudflare 提供 DNS 解析服务，而且速度很快，在阿里云半个小时才能生效的解析在它这里瞬间就生效，它提供了免费的 https 服务 (但不是应用 SSL 证书)。实现模式就是，用户到 CDN 服务器的连接为 https，而 CDN 服务器到 GithubPage 服务器的连接为 http，就是在 CDN 服务器那里加上反向代理。

用户看到的小锁其实是用户连接到 Cloudflare 的证书，而由 Cloudflare 到 github 是没有 https 的，不过对于我们静态博客已经够了。

# 配置

# 第一步：

还是先去官网注册，然后添加你的域名，注意添加的是你购买的域名。

# 第二步：

进入 DNS 解析界面填入如下解析，因为我们使用 clouldflare 做 DNS 解析所以一会我们需要把我们购买域名的那个地方的解析删掉。

其中前两个是使你的域名指向 github 的服务器地址，github 文档中给的就是这个两个地址，最后那个 CNAME 记录指向的是你的 github 仓库域名 username.github.io。一定要严格按照这个来配置。

# 第三步：

记录下 cloudflare 给你的 DNS 解析服务器，就在上一步那个页面下边，用这个记录去把你域名购买处（我的是阿里云）的 DNS 解析服务器替换掉，同时删掉阿里云里面的 DNS 解析记录，因为我们以后就靠 clouleflare 来解析 DNS 啦。

# 第四步：

回到 clouldflare 上面选择 crypto 选项然后下面选择 full 或者是 Flexible

选项中几个的区别如下图

最后那个是需要证书支持的。然后滚动到下面打开 always use HTTPS 开关

# 第五步：

以上步骤配置好之后基本就完成了，但是如果直接有人在地址栏里面输入 http://XXXXX 进入你的博客的话你这边还是会出现非 Https 的效果，所以我们这里要做一个强制跳转。

这样就万无一失了。

# 坑点：

我之前按照以上步骤操作完成后发现首页虽然是 https 了也不显示红叉了，但是也没有显示绿色的小锁，而是一个叹号，但是有些博文页面可以正常显示 https 绿锁。后来发现是因为当前页面中有非 https 的链接导致，比如图片图床不是 https 的，或者评论插件不支持 https，不过我博客中使用的来必力评论是支持 https，只是我当时的图床无都是 http 所以只能是显示叹号了，后来把所有图片图床换成 https 的就好啦。

# 十二：为博客添加音乐

HEXO 博客添加的音乐的地方有两个。一个个首页侧边栏，另一个是每个页面里面。但是个人觉得添加侧边栏里面并不好，因为添加侧边栏的话用户只有在浏览你首页的时候才能听到音乐，而且期间不能点击任何站内链接，否则音乐就会中断，试想下，一般首页都是文章列表，点击文章里面之后才是正文，所以用户在首页停留的时间很短，基本上找到自己想看的文章就会马上点进去看，所以这里放音乐没有太大意义；而页面内插入音乐会更好点，读者可以一边浏览文章一边听音乐，这也正是我们想要的。不过解决前者问题的办法也不是没有，比如点击链接的话直接开另一个浏览器标签来打开新页面也可以做到不中断音乐，但是总觉得有点小题大做了。总不能读者看个你的博客而占用了一堆标签。

# 网易云音乐外链

这个是最简单的方法，通过网易云音乐官网生成播放器外链。

可以自己配置一些属性，然后自动生成配置代码，放到你的博客里面就行啦，粘贴到你文章中想要的地方

优点缺点截图上也有，不过网上也说这样的方式会影响 SEO，具体什么原理也不太清楚。总之简单便捷，不过网易的 logo 去不掉。

# aplayer 添加音乐

这个算是 HEXO 最常用也是最出名名的播放器了，还有 Dpleyer 是用来视屏播放的，暂时我们不说。首先需要安装 aplayer 依赖，终端中切换到你的博客根目录执行 npm install aplayer --save 安装成功后就可以了。参数就不给大家一一讲解了，官方文档都有，我这里只提供一个例子。

# 页面中添加音乐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% aplayerlist %}
{
    "autoplay": true,
    "showlrc": 0,
    "mutex": true,
    "music": [
        {
            "title": "에필로그 (Epilogue)",
            "author": "이동준",
            "url": "https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/%E1%84%8B%E1%85%A6%E1%84%91%E1%85%B5%E1%86%AF%E1%84%85%E1%85%A9%E1%84%80%E1%85%B3.mp3",
            "pic": "https://y.gtimg.cn/music/photo_new/T002R300x300M000000RmZHf3qhLUL.jpg?max_age=2592000",
            "lrc": "https://歌词.lrc"
        }
    ]
}
{% endaplayerlist %}


以上代码插到文章中任意一个你想的地方就可以

pic 就是歌曲显示图片的链接。大家可以看到 music 是个数组，所以想添加列表的话就在数组中再添加个歌曲字典就好了。建议歌词 lrc 要用 URL 形式，不然 txt 格式可能要编辑死。。好多人问歌曲的 MP3 外链从哪里来。这个其实很简单，首先把歌曲下载下来然后上传到七牛云就可以在七牛云生成外链啦，七牛云有免费的存储空间，只存歌曲的话足够啦。歌词 URL

# 侧边栏中添加音乐

其实之前讲过，不建议在侧边栏中添加，但是这里还是简单介绍下。首先要做的是在 node_modules 目录下找到 APlayer.min.js 文件，将其复制到 theme/next/source/js/src/ 目录下。然后打开 theme/next/layout/_custom/ 文件夹下的 sidebar.swig 文件，向其中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="player1" class="aplayer"></div>
<script src="/js/src/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: false,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 0,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    mode: 'random',                                                    // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    listmaxheight: '513px',                                             // Optional, max height of play list
    music: [
    {                                                           // Required, music info, see: ###With playlist
        title: 'Sometimes When We Touch',                                          // Required, music title
        author: 'Oliveia',                                              // Required, music author
        url: 'https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/SometimesWhenWeTouch.mp3',  // Required, music url
        pic: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003LIDEL0NQInJ.jpg?max_age=2592000',  // Optional, music picture
        lrc: 'https://歌词.lrc'                   // Optional, lrc, see: ###With lrc
    },
    {
        "title": "大鱼",
        "author": "周深",
        "url": "https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/bigfish.mp3",
        "pic": "https://y.gtimg.cn/music/photo_new/T002R300x300M000004Y7V4s3ug4cC.jpg?max_age=2592000",
        "lrc": "https://歌词.lrc"
    }
    ]
});
</script>


只是换成了 JS 的语法，其实原理，参数都一样。然后执行三步走就可以看到啦，注意有浏览器缓存，所以多刷新几次就会有了。

# 歌词、音乐外链相关

歌曲说过大家可以用七牛的免费存储功能，但是会发现一个问题七牛的歌曲外链不支持 https，这会导致配置有 ssl 证书的人掉绿锁，其实如果有这个需求的大家可以放弃七牛，改用腾讯云，这样就 OK 啦，一样的操作。

好多人问歌词的 URL 好难找啊，去哪里找呢，大家可以看下这个 MeetingJS 这个其实是基于 Aplayer 的一个小封装，目的是简化 Aplayer 的接入成本，但是因为之前我介绍了接入步骤所以这里我们只用它的歌词 API 就可以。 ttps://demo.meting.api.meto.moe/action/metingapi?server=tencent&type=lrc&id=004OQ5Mt0EmEzv 其中要改的只有两个参数 seaver 是音乐平台包含百度、网易、QQ 音乐等平台

id 字段对应的是歌曲的 ID 这个你只要打开个歌曲网页链接里面应该都包含 id。文章结尾的播放就是这么加入的

# 最后

整篇文章只有开始一小部分在讲解如何搭建博客，后续的基本都是交给大家如何优化，调整一些细节问题如 UI、用户体验之类的，当然我们能做的远远不止这些，如果有什么问题欢迎与我探讨。下面的留言我都会看的。此外当本人对 HEXO 有新的看法或者玩法的话该文章会不断的更新，希望大家关注我的小站，感谢。