avatar

Catalog
给hexo安装播放器

准备工作

准备工作当然是你得把自己的博客给搭建好了。在这里需要提一句,不管是搭建博客,还是后期写markdown的文章,都少不了打开各种格式文件的工具,要知道一个好的工具能让我们做事事半功倍。
修改主题文件里涉及到的各种文件,我都只使用了 sublime,这款软件不管是从界面简化程度、颜值、快捷键、还是软件大小都让我爱不释手,以至于最后我用markdown写博客的时候都在使用它,你可能会问:markdown写博客不需要边写边看渲染效果吗?其实这个渲染效果没必要随时看,只需要最后写好的时候看看,再对需要修改的地方进行微调就好,因为当非常熟悉了markdown的语法以及对应的实现效果之后,都不太去看最后渲染出来的效果。当然最初编写的时候我都是在csdn上写博客的时对markdown语法慢慢熟练起来,线下编写我也使用过MP、马克飞象等工具,但是顺手程度都感觉不如 sublime。如果实在想编写和渲染同时进行的话,可以推荐一款在线markdown编辑器:在线markdown编辑器 优点我就不多说了,因人而异,自行体验。

装插件

hexo-tag-aplayer
hexo-tag-dplayer
这两个插件

安装方法

Code
1
2
npm install hexo-tag-dplayer
npm install hexo-tag-aplayer

运行之后

此时你会在 blog/node_modules 目录下发现有两个aplayerdplayer 的文件夹。(这个blog文件是你在搭建博客时自定义命名的文件)

添加音乐

选择 iframe插件,复制如下图所示的代码:
以我自己的博客为例吧:因为我想把这个播放器放在博客页面的左侧栏里,所以就把以上代码复制到主题文件夹下实现左侧栏的那个模板文件里,也就是 blog\themes\black-blue\layout\_partial\left-col.ejs 这个 left-col.ejs 文件,(需要值得注意的是,因为所使用的主题不同,可能文件也就不一样,但是大致原理就如刚才我所提到的:想放在哪个区域,就把代码复制到实现那块区域的模板文件里)。
为了使得页面更加美观,我给这块代码自定义加了 div,这样方便给播放器设定样式,只要稍微懂一点前端知识的筒子,都可以随心所欲的加 css样式。这里需要提一下,播放器设定好后,默认是:打开页面即播放音乐;如果不喜欢默认打开音乐的筒子,也可以通过把代码中的 auto=1修改为 auto=0来关闭它。

Author: 寒小林
Link: https://blog.xiaolin.mcxhz.cn/2020/03/14/%E7%BB%99hexo%E5%AE%89%E8%A3%85%E6%92%AD%E6%94%BE%E5%99%A8/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • 微信
    微信
  • 支付寶
    支付寶