✨ Close #93,#36 Add music short code.

assets/js/next-boot.js

@@ -65,6 +65,7 @@ NexT.boot.refresh = function() {
  
   if (NexT.CONFIG.page.toc) NexT.utils.registerSidebarTOC();
   if (NexT.CONFIG.page.expired) NexT.utils.calPostExpiredDate();
+  if (NexT.CONFIG.page.music) NexT.utils.registerAPlayer();
 
   NexT.utils.registerCopyCode();
   NexT.utils.registerImageViewer();

assets/js/utils.js

@@ -7,6 +7,16 @@ HTMLElement.prototype.wrap = function (wrapper) {
 };
 
 NexT.utils = {
+  registerAPlayer: function () {
+    this.getStyle(
+      NexT.utils.getCDNResource(NexT.CONFIG.page.aplayer.css)
+    );
+    
+    NexT.CONFIG.page.aplayer.js.forEach(function (js) {
+      NexT.utils.getScript(NexT.utils.getCDNResource(js), true);
+    });
+    
+  },
   calPostExpiredDate: function() {
     const postMetaDom = document.querySelector('.post-meta-container');
     let postTime = postMetaDom.querySelector('time[itemprop="dateCreated datePublished"]').getAttribute("datetime");

data/resources.yaml

@@ -216,4 +216,19 @@ plugins:
         alias_name: waline
         version: 3.3.0
         file: dist/comment.js
-        alias: "@waline/client"
+        alias: "@waline/client"
+  # 音乐播放器
+  music:
+    js:
+      - name: aplayer
+        version: 1.10.1
+        file: dist/APlayer.min.js
+      
+      - name: meting
+        version: 2.0.1
+        file: dist/Meting.min.js
+
+    css:
+      name: aplayer
+      version: 1.10.1
+      file: dist/APlayer.min.css

exampleSite/content/post/shortcodes.md

@@ -13,6 +13,8 @@ tags:
   - 短代码
   - 语法
 url: "demo/shortcodes.html"
+toc: true
+music: true
 ---
 
 虽然 `Markdown` 语法已经非常丰富能够满足我们写文章的绝大部分需求，但是为更好的对文章内容进行更友好的排版，为引设计一套自定义的短语，便于在使用时能够快速引用。
@@ -99,4 +101,53 @@ url: "demo/shortcodes.html"
 或者
 {{</* bilibili id=BV1Sx411T7QQ */>}}
 ```
-{{< bilibili id=BV1Sx411T7QQ >}}
+{{</** bilibili id=BV1Sx411T7QQ **/>}}
+
+## 音乐播放器
+
+基于[APlayer](https://github.com/DIYgod/APlayer)和[MetingJS](https://github.com/metowolf/MetingJS)库实现见面内嵌的响应式音乐播放器，自动识别的音乐平台URL，包括：`netease`、 `tencent`、 `kugou`、 `baidu` 和 `xiami` 平台，也可以支持用户自定义的音乐源。其他相关的参数说明如下：
+
+| 参数名  | 默认   | 说明  |
+| :----: | :------: | :--- |
+| **id** | _必选_  | 音乐 ID，即音乐在音乐平台的唯一标识符 |
+| **server** | _必选_  | 音乐平台，支持 `netease`、 `tencent`、 `kugou`、 `baidu` 和 `xiami` 平台 |
+| **type** | _必选_  | 播放类型，目前支持 `song` 、 `playlist`、 `album`、 `search` 和 `artist` 类型 |
+| **auto** | _可选_  | 音乐的地址，仅支持 server 参数中的平台 |
+| **theme** | `#448aff`  | 播放器的主题色，默认为 `#448aff` |
+| **url** | 空  | 自定的音乐源 URL，默认为空 |
+| **name** | 空 | 音乐名称，默认为空 |
+| **artist** | 空  | 音乐作者，默认为空 |
+| **cover** | 空  | 音乐封面 URL，默认为空 |
+| **fixed** | `false` | 固定播放器，默认为 `false` |
+| **mini** | `false`  | 显示小播放器，默认为 `false` |
+| **autoplay** | `false`  | 自动播放，默认为 `false` |
+| **loop** | `all`  | 循环播放，支持`all`、`one` 和 `none`，默认为 `all` |
+| **order** | `list`  | 播放顺序`list` 和 `random`，支持默认为 `list` |
+| **volume** | `0.7`  | 音量，默认为 `0.7` |
+| **mutex** | `true` | 有多个音乐播放时，是否只开启当前播放器，默认为 `true` |
+| **list-folded** | `false`  | 列表折叠，默认为 `false` |
+| **list-max-height** | `340px`  | 列表最大高度，默认为：340px |
+
+### 单曲播放 
+
+```markdown
+{{</* music theme="#2980b9" server="netease" type="song" id="1868553" mini="true" */>}}
+```
+
+{{< music theme="#2980b9" server="netease" type="song" id="1868553" mini="true" >}}
+
+### 列表播放
+
+```markdown
+{{</* music server="netease" type="playlist" id="769332917" list-max-height="140" */>}}
+```
+
+{{< music server="netease" type="playlist" id="769332917" list-max-height="140px" >}}
+
+### 自定义音乐源
+
+```markdown
+{{</* music url="https://ri-sycdn.kuwo.cn/ea345253b94e7ad564e6fb0cdf37fee6/677b6574/resource/n1/87/56/4272600974.mp3" name="天空之城" artist="宫崎骏" cover="http://img4.kuwo.cn/star/starheads/500/27/66/2532818318.jpg" autoplay="true" */>}}
+```
+
+{{< music url="https://ri-sycdn.kuwo.cn/ea345253b94e7ad564e6fb0cdf37fee6/677b6574/resource/n1/87/56/4272600974.mp3" name="天空之城" artist="宫崎骏" cover="http://img4.kuwo.cn/star/starheads/500/27/66/2532818318.jpg" autoplay="true" >}}

layouts/partials/head/config.html

@@ -3,11 +3,21 @@
   "isPage"    .IsPage
   "comments"  (.Scratch.Get "isComment")
   "toc"       (default .Site.Params.toc.enable .Params.Toc)
+  "music"      .Params.music
   "permalink" (.Page.Permalink | absURL)
   "path"      (.Page.Permalink | path.Base)
   "title"     .Page.Title
 }}
 
+{{/** Append APlayer plugin */}}
+{{ if .Params.music }}
+{{ $aplayer := dict
+  "js"  $.Site.Data.resources.plugins.music.js
+  "css" $.Site.Data.resources.plugins.music.css
+}}
+{{ $pageCfg = merge $pageCfg (dict "aplayer" $aplayer) }}
+{{ end }}
+
 {{/* Append post expired config */}}
 {{ $expired := default .Site.Params.PostMeta.expired .Params.Expired }}
 {{ $pageCfg = merge $pageCfg (dict "expired" $expired) }}

layouts/partials/init.html

@@ -22,7 +22,7 @@
 {{ $router := dict }}
 
 {{ if eq $vendor "local" }}
-  {{ $router = dict "url" (printf "%s3rd" .Site.BaseURL) "name" $vendor "type" "modern" }}
+  {{ $router = dict "url" (printf "%sjs/3rd" .Site.BaseURL) "name" $vendor "type" "modern" }}
 {{ else }}
   {{ range .Site.Data.resources.vendors }}
     {{ if eq .name $vendor }}

layouts/shortcodes/music.html

@@ -0,0 +1,22 @@
+{{- $theme := "#448aff" -}}
+{{- $theme = .Get "theme" | default $theme -}}
+
+<meting-js theme="{{ $theme }}"
+  {{ with .Get "id" }} id="{{ . }}" {{ end }}
+  {{ with .Get "server" }} server="{{ . }}" {{ end }}
+  {{ with .Get "type" }} type="{{ . }}" {{ end }}
+  {{ with .Get "auto" }} auto="{{ . }}" {{ end }}
+  {{ with .Get "url" }} url="{{ . }}" {{ end }}
+  {{ with .Get "name" }} name="{{ . }}" {{ end }}
+  {{ with .Get "artist" }} artist="{{ . }}" {{ end }}
+  {{ with .Get "cover" }} cover="{{ . }}" {{ end }}
+  {{ with .Get "fixed" }} fixed="{{ . }}" {{ end  }}
+  {{ with .Get "mini" }} mini="{{ . }}" {{ end  }}
+  {{ with .Get "autoplay" }} autoplay="{{ . }}" {{ end  }}
+  {{ with .Get "loop" }} loop="{{ . }}" {{ end  }}
+  {{ with .Get "order" }} order="{{ . }}" {{ end  }}
+  {{ with .Get "volume" }} volume="{{ . }}" {{ end  }}
+  {{ with .Get "mutex" }} mutex="{{ . }}" {{ end  }}
+  {{ with .Get "list-folded" }} list-folded="{{ . }}" {{ end  }}
+  {{ with .Get "list-max-height" }} list-max-height="{{ . }}" {{ end  }}
+  ></meting-js>

static/js/.gitkeep

@@ -0,0 +1 @@
+// Keep the folder under git version control

static/js/3rd/dn.txt

@@ -0,0 +1,3 @@
+https://unpkg.com/meting@2.0.1/dist/Meting.min.js
+https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.js
+https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.css

static/js/3rd/meting/2.0.1/Meting.min.js

@@ -0,0 +1 @@
+"use strict";function _objectSpread(a){for(var b=1;b<arguments.length;b++){var c=null==arguments[b]?{}:arguments[b],d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){_defineProperty(a,b,c[b])})}return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}class MetingJSElement extends HTMLElement{connectedCallback(){window.APlayer&&window.fetch&&(this._init(),this._parse())}disconnectedCallback(){this.lock||this.aplayer.destroy()}_camelize(a){return a.replace(/^[_.\- ]+/,"").toLowerCase().replace(/[_.\- ]+(\w|$)/g,(a,b)=>b.toUpperCase())}_init(){let a={};for(let b=0;b<this.attributes.length;b+=1)a[this._camelize(this.attributes[b].name)]=this.attributes[b].value;let b=["server","type","id","api","auth","auto","lock","name","title","artist","author","url","cover","pic","lyric","lrc"];this.meta={};for(var c=0;c<b.length;c++){let d=b[c];this.meta[d]=a[d],delete a[d]}this.config=a,this.api=this.meta.api||window.meting_api||"https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",this.meta.auto&&this._parse_link()}_parse_link(){let a=[["music.163.com.*song.*id=(\\d+)","netease","song"],["music.163.com.*album.*id=(\\d+)","netease","album"],["music.163.com.*artist.*id=(\\d+)","netease","artist"],["music.163.com.*playlist.*id=(\\d+)","netease","playlist"],["music.163.com.*discover/toplist.*id=(\\d+)","netease","playlist"],["y.qq.com.*song/(\\w+).html","tencent","song"],["y.qq.com.*album/(\\w+).html","tencent","album"],["y.qq.com.*singer/(\\w+).html","tencent","artist"],["y.qq.com.*playsquare/(\\w+).html","tencent","playlist"],["y.qq.com.*playlist/(\\w+).html","tencent","playlist"],["xiami.com.*song/(\\w+)","xiami","song"],["xiami.com.*album/(\\w+)","xiami","album"],["xiami.com.*artist/(\\w+)","xiami","artist"],["xiami.com.*collect/(\\w+)","xiami","playlist"]];for(var b=0;b<a.length;b++){let c=a[b],d=new RegExp(c[0]),e=d.exec(this.meta.auto);if(null!==e)return this.meta.server=c[1],this.meta.type=c[2],void(this.meta.id=e[1])}}_parse(){if(this.meta.url){let a={name:this.meta.name||this.meta.title||"Audio name",artist:this.meta.artist||this.meta.author||"Audio artist",url:this.meta.url,cover:this.meta.cover||this.meta.pic,lrc:this.meta.lrc||this.meta.lyric||"",type:this.meta.type||"auto"};return a.lrc||(this.meta.lrcType=0),this.innerText&&(a.lrc=this.innerText,this.meta.lrcType=2),void this._loadPlayer([a])}let a=this.api.replace(":server",this.meta.server).replace(":type",this.meta.type).replace(":id",this.meta.id).replace(":auth",this.meta.auth).replace(":r",Math.random());fetch(a).then(a=>a.json()).then(a=>this._loadPlayer(a))}_loadPlayer(a){let b={audio:a,mutex:!0,lrcType:this.meta.lrcType||3,storageName:"metingjs"};if(a.length){let a=_objectSpread({},b,this.config);for(let b in a)("true"===a[b]||"false"===a[b])&&(a[b]="true"===a[b]);let c=document.createElement("div");a.container=c,this.appendChild(c),this.aplayer=new APlayer(a)}}}console.log("\n %c MetingJS v2.0.1 %c https://github.com/metowolf/MetingJS \n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;"),window.customElements&&!window.customElements.get("meting-js")&&(window.MetingJSElement=MetingJSElement,window.customElements.define("meting-js",MetingJSElement));