冻葱Tewi
一个菜鸡。
冻葱Tewi
【捣鼓】OwO/Aplayer安装及踩坑小记

闲着没事看自己的博客,突然发现自己的博客失去了灵魂——评论表情和音乐插件。 之前用inspire的时候,路易已经把音乐插件集成在了主题里。好东西用惯了就不想随便找个不好看的插件凑合用。于是我就开始捣鼓DIYGOD巨佬的APlayer

Aplayer

安装所需包

首先、鼓捣了半天安装上了node.js环境,配置node.js的教程网上有很多,在此就不再赘述。

在终端使用npm在网站根路径安装aplayer包,例如:

$ cd /www/wwwroot/dctewi.com
$ npm install aplayer --save

表示将aplayer包安装到node_modules目录中。值得一提的是,如果没有手动设置过npm下载路径,那么默认安装路径是/root/node_modules/APlayer。如果出现了形如CERT_UNTRUSTED的错误无法安装,则是SSL验证问题导致的。只需要在终端输入:

$ npm config set strict-ssl false

不过我感觉也可以直接在GitHub上下载整个master分支并且解压到合适的路径。

引用css样式以及js脚本

在wordpress主题文件夹中的header.phpfooter.php中分别加入<link><script>标签,形如:

header.php:
<link rel="stylesheet" href="https://some.domain/node_modules/aplayer/dist/APlayer.min.css">
footer.php:
<script src="https://some.domain/node_modules/aplayer/dist/APlayer.min.js"></script>

这样就完成了引用。然后在合适位置创建播放器容器,我选择了footer.php(一开始想要用pjax实现异步加载):

<div id="aplayer"></div>

创建加载APlayer所需JS

要想APlayer在页面中显示,需要创建用来生成APlayer窗口的JS脚本,一种可能的方法是:在/www/wwwroot/dctewi.com/下创建loader文件夹,并在路径下创建aplayer_load.js,用于填充Aplayer窗体生成代码:

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
  	theme: '#7A8B8B',
    listFolded: true,
    listMaxHeight: 90,
    audio: [
      {
        name: '0.0?',
        artist: 'TSAR',
        url: 'https://music.163.com/song/media/outer/url?id=481733302.mp3',
        cover: 'https://p1.music.126.net/kkFFVt6w7CsZVStJ0Djs5g==/109951162938341792.jpg',
        theme: '#ebd0c2'
      },
      {
        name: 'Hello Windows',
        artist: 'ヒゲドライバー',
        url: 'http://music.163.com/song/media/outer/url?id=26114641.mp3',
        cover: 'http://p2.music.126.net/3WBcFatmkEG_v2dJROz2zA==/2431020209036094.jpg'
      },
      {
        name: '風の夢',
        artist: 'mineko / yukina',
        url: 'http://music.163.com/song/media/outer/url?id=29154889.mp3',
        cover: 'http://p1.music.126.net/Kpfx-Ds6FNF8vKAwtizEow==/7732865278343445.jpg',
        theme: '#ebd0c2'
      }
    ]
});

其中的歌曲参数以及详细配置说明可以在APlayer官方文档找到。我使用了网易云的歌曲外链以及封面图。对于网易云歌曲ID为%SONGID%的歌曲,他的外链地址为:

http://music.163.com/song/media/outer/url?id=%SONGID%.mp3

获取网易云歌曲ID的方法有很多,在此简单提一种方法:网易云分享歌曲-复制链接。会得到形如:https://music.163.com/song?id=%SONGID%&userid=%USERID%的地址,其中的songid参数就是该歌曲的网易云ID。

添加歌曲也是在这个js中直接添加json信息就可以了。另外,我遇到了歌曲名称颜色和背景颜色一样的问题。通过修改APlayer.min.css解决了问题。

通过php让WordPress加载APlayer

通过修改Wordpress主题路径下的functions.php来让网页调用加载APlayer的js校本。修改./wp-content/themes/%THEMENAME%/funtions.php,在合适位置添加php代码,形如:

//Aplayer Loader
function Aplayer_loader()
{
	wp_enqueue_script('aplayer_load', 'https://some.domain/loader/aplayer_load.js');
}
add_action( 'wp_footer', 'Aplayer_loader' );

这里引入了指定位置的指定js文件,并且通过add_action( $tag, $function_to_add )来把Aplayer_loader函数挂载到了wp_footer钩子上。所有wp可用的hook列表可以在WordPress官方文档找到。

想办法让音乐不被打断

一开始我是想要通过pjax异步加载来局部刷新内容,来实现比较高端的音乐不被打断的效果。但是在我安装jquery_pjax.min.js并且配置需要刷新的容器的过程中,遇到了大大小小的令人很痛苦的事情:

友链样式失效

  • pjax刷新容器时导致选择器失效(?不确定)。将样式加入主题的总style.css中并且完全刷新CDN缓存来解决问题。

OwO在从主页进入文章时不加载

  • Pjax的锅。通过将script标签写入comment.php可以解决问题。

OwO在直接进入文章时不加载

  • 很痛苦了,还是Pjax的锅。将owo_loader()写成匿名函数在上面引入的script标签下直接调用才解决问题。

无法进入仪表盘

  • 玄学错误?将header也设置成需要刷新的容器可以解决问题。

主页下方的翻页导航失效

  • 页码不会变动 – 大概是pjax加载的时候导航的$current变量没有更新,或者即使更新了但是导航栏没有重载所以没有刷新成正确状态。
  • 第2、3页的按钮失效 – 超链接变成了形如https://dctewi.com/?_pjax=%23page/page/2 这样的内容,直接访问这个地址还是在第一页,除非手动刷新一下。那么音乐将被打断。
  • 修复尝试1 – 将导航栏移出原容器,单独在‘pjax:complete’事件时刷新导航栏:失败。导航栏会直接消失,应该是姿势不正确。
  • 修复尝试2 – 在pjax局部刷新的时候重新使用js/php加载导航栏:失败。content容器中会出现一个“画中画”模式的新网页,完 全 失 败。
  • 之后尝试了各种各样杂七杂八的歪方,仍然不管用。于是遗憾地卸载了pjax模块。

然后我在神犇DIYGOD的博客中寻找可用的解决办法,然后我灵机一动……

把所有的a标签设置成了在新标签页打开!这样也算是不会打断了!(逃)

具体做法:在head部分中添加一个base标签。形如:

<head>
...
<base target="_blank" />
...
</head>

然后APlayer就完事了。

OwO表情插件

OwO是一个好看并且高自定义化的评论表情模块。Github项目地址在这里。也是巨佬DIYGOD的项目。

安装流程和APlayer类似但是简单很多:

$ cd /www/wwwroot/dctewi.com
$ npm install owo --save

并且在header中引入:

header.php:
<link rel="stylesheet" href="https://some.domain/node_modules/owo/dist/OwO.min.css">

当然,这里也可以像APlayer那样在loader中创建owo_load.js并且在functions.php中调用并加载到comment_form_after 钩子(<= 一定得是after钩子,不然会找不到owo容器)中。但是我在尝试pjax的时候把owo…怎么说呢,“组装”在了一起。

在负责评论框的comments.php中,给textarea标签添加OwO-textarea类和onmousedown事件,并且在textarra标签前添加OwO容器,最后的'comment_fields'是这个样子的:

<?php 
$comments_args = array(
...

  'comment_field' =>  '<p class="comment-form-comment"><div class="OwO"></div><textarea onmousedown="(function(){var OwO_demo = new OwO({logo: \'OωO表情\',container: document.getElementsByClassName(\'OwO\')[0],target: document.getElementsByClassName(\'OwO-textarea\')[0],api: \'https://dctewi.com/emotion/OwO.json\',position: \'up\',width: \'40%\',maxHeight: \'250px\'});})();" class="OwO-textarea" id="comment" name="comment" required aria-required="true" placeholder="' . __('Ctrl + Enter 快速发送') .'">' .
    '</textarea></p>',

...
); ?>
<?php comment_form($comments_args); ?>

emmmm,有那么一点乱。整理一下就是:

<?php 
$comments_args = array(
...

'comment_field' =>  
'<p class="comment-form-comment">
 <div class="OwO"></div>
 <textarea
   onmousedown="
     (function(){
       var OwO_demo = new OwO({
       logo: \'OωO表情\',
       container: document.getElementsByClassName(\'OwO\')[0],
       target: document.getElementsByClassName(\'OwO-textarea\')[0],
       api: \'https://dctewi.com/emotion/OwO.json\',
       position: \'up\',width: \'40%\',maxHeight: \'250px\'
     });})();"
   class="OwO-textarea" 
   id="comment" 
   name="comment" 
   required aria-required="true" 
   placeholder="' . __('Ctrl + Enter 快速发送') .'">' .
 '</textarea></p>',

...
); ?>
<?php comment_form($comments_args); ?>

当然这么一整理,引号肯定就对不上了。但是更加容易看清楚。在这个输入区域点击的时候,OwO会被加载。其中的各种参数都是可以修改的,具体修改方法可以看Github项目地址的说明。其中表情由api属性加载的json文件控制,我放在了网站根目录的emotion文件夹下。文件结构形如:

{
    "贴吧": {
        "type": "image",
        "container": [
            {
                "icon": "<img src=\"//dctewi.com/emotion/tieba/huaji.png\">",
                "text": "滑稽"
            },
            {
                "icon": "<img src=\"//dctewi.com/emotion/tieba/yinxian.png\">",
                "text": "阴险"
            }
        ]
    },
  "贴图": {
        "type": "image",
        "container": [
            {
                "icon": "<img src=\"//dctewi.com/emotion/other/cyka_blyat.jpg\">",
                "text": "CYKA BLYAT!"
            }
        ]
    }
}

其中的路径我设置在了emotion文件夹的各个子文件夹下,就不再赘述

当然,别忘了再合适的位置引用script标签:

<script src="https://some.domain/node_modules/owo/dist/OwO.min.js"></script>

OwO也完事了!比APlayer简单了许多……这次折腾把我集训期间的空闲时间压缩了好多,但是也积累了不少经验,也尝试了一下pjax的应用(虽说最后也没有用上吧)。所以总的来说应该也算是有所收获吧。

以上。

赞赏
本站采用BY-NC-SA-4.0 国际许可协议, 转载请保留出处。
https://dctewi.com/wp-content/uploads/2019/02/head-croped-small-middle-300x300.jpg

冻葱Tewi

文章作者

这个站点的蒟蒻站长~欢迎大家来晃悠!

发表评论

textsms
account_circle
email

  • https://dctewi.com/wp-content/uploads/2017/07/mys-avatar-150x150.jpg

    好看

    2月前回复
  • https://dctewi.com/wp-content/uploads/2017/07/mys-avatar-150x150.jpg

    Excellent beat ! I would like to apprentice
    while you amend your website, how could i subscribe for a blog website?
    The account aided me a acceptable deal. I had been a
    little bit acquainted of this your broadcast provided bright clear
    idea

    8月前回复
  • https://dctewi.com/wp-content/uploads/2019/02/head-croped-small-middle-150x150.jpg

    卧槽,发现评论按钮也变成新标签页了,去改一下。。。

    8月前回复
  • https://dctewi.com/wp-content/uploads/2019/02/head-croped-small-middle-150x150.jpg

    来之不易的表情大力使用一波

    8月前回复

冻葱Tewi

【捣鼓】OwO/Aplayer安装及踩坑小记
折腾了一下站点,添加了Aplayer和OwO表情插件。记录一下坎坷的踩坑过程。
扫描二维码继续阅读
2019-01-27
标签云
隐藏
变装