Merge pull request #125 from hfge/add-audio-tecentv

增加remark42评论、音乐播放器、腾讯视频的支持

exampleSite/config.yaml

@@ -49,10 +49,16 @@ params:
     comments:
         enabled: true
         provider: disqus
+        
         utterances:
             repo:
             issueTerm: pathname
             label:
+            
+        remark42:
+            host: # remark42服务端地址
+            site: # remark site id参数
+            locale: zh # en zh 语言
 
     widgets:
         enabled:

layouts/partials/article/article.html

@@ -1,8 +1,18 @@
 <article class="{{ if .Params.image }}has-image {{ end }}main-article">
     {{ partial "article/components/header" . }}
 
+    {{ if .Params.audio }}
+        {{ if or ( eq .Params.audio.p "before" ) ( not .Params.audio.p ) }}
+            {{ partial "article/components/audio" . }}
+        {{ end }}
+    {{ end }}
+
     {{ partial "article/components/content" . }}
 
+    {{ if or ( eq .Params.audio.p "after")  ( eq .Params.audio.p "fixed" )  }}
+        {{ partial "article/components/audio" . }}
+    {{ end }}
+
     {{ partial "article/components/footer" . }}
 
     {{ if or .Params.math .Site.Params.article.math }}

layouts/partials/article/components/audio.html

@@ -0,0 +1,24 @@
+<div style="margin: 20px;">
+<meting-js style="margin: 10px;"
+    name="{{ .Params.audio.name }}"
+    artist="{{ .Params.audio.artist }}"
+    url="{{ .Params.audio.url }}" 
+    {{ if .Params.audio.cover }}
+        cover="{{ .Params.audio.cover }}"
+    {{ else }}
+        cover="/images/logo.png"
+    {{ end }}
+    fixed="{{ eq .Params.audio.p "fixed" }}"
+	server="{{ .Params.audio.server }}" 
+	type="{{ .Params.audio.type }}" 
+	id="{{ .Params.audio.id }}"
+	autoplay="true"
+	loop="all"
+	order="list"
+	preload="auto"
+	list-folded="true"
+    list-max-height="500px"
+    theme="#999999"
+	lrc-type="1">
+</meting-js>		
+</div>

layouts/partials/article/components/header.html

@@ -32,4 +32,11 @@
     {{ end }}
 
     {{ partialCached "article/components/details" . .RelPermalink }}
+
+    {{ if .Params.audio }}
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
+        <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
+        <!-- require MetingJS -->
+        <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
+    {{ end }}
 </header>

layouts/partials/comments/provider/remark42.html

@@ -0,0 +1,54 @@
+<div id="remark42"></div>
+<script>
+    var remark_config = {
+      host: "{{ .Site.Params.comments.remark42.host }}", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
+      site_id: '{{ .Site.Params.comments.remark42.site }}',
+      components: ['embed'], // optional param; which components to load. default to ["embed"]
+                             // to load all components define components as ['embed', 'last-comments', 'counter']
+                             // available component are:
+                             //     - 'embed': basic comments widget
+                             //     - 'last-comments': last comments widget, see `Last Comments` section below
+                             //     - 'counter': counter widget, see `Counter` section below
+    //   url: 'PAGE_URL', // optional param; if it isn't defined
+                       // `window.location.origin + window.location.pathname` will be used,
+                       //
+                       // Note that if you use query parameters as significant part of url
+                       // (the one that actually changes content on page)
+                       // you will have to configure url manually to keep query params, as
+                       // `window.location.origin + window.location.pathname` doesn't contain query params and
+                       // hash. For example default url for `https://example/com/example-post?id=1#hash`
+                       // would be `https://example/com/example-post`.
+                       //
+                       // The problem with query params is that they often contain useless params added by
+                       // various trackers (utm params) and doesn't have defined order, so Remark treats differently
+                       // all this examples:
+                       // https://example.com/?postid=1&date=2007-02-11
+                       // https://example.com/?date=2007-02-11&postid=1
+                       // https://example.com/?date=2007-02-11&postid=1&utm_source=google
+                       //
+                       // If you deal with query parameters make sure you pass only significant part of it
+                       // in well defined order
+      max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
+      theme: document.body.dataset.scheme, // optional param; if it isn't defined default value ('light') will be used
+    //   page_title: 'Moving to Remark42', // optional param; if it isn't defined `document.title` will be used
+      locale: '{{ .Site.Params.comments.remark42.locale }}', // set up locale and language, if it isn't defined default value ('en') will be used
+      show_email_subscription: true // optional param; by default it is `true` and you can see email subscription feature
+                                     // in interface when enable it from backend side
+                                     // if you set this param in `false` you will get notifications email notifications as admin
+                                     // but your users won't have interface for subscription
+    };
+  
+    (function(c) {
+      for(var i = 0; i < c.length; i++){
+        var d = document, s = d.createElement('script');
+        s.src = remark_config.host + '/web/' +c[i] +'.js';
+        s.defer = true;
+        (d.head || d.body).appendChild(s);
+      }
+    })(remark_config.components || ['embed']);
+</script>
+<script>
+  window.addEventListener('onColorSchemeChange', (e) => {
+    window.REMARK42.changeTheme(document.body.dataset.scheme);
+  })
+</script>

layouts/shortcodes/tencent.html

@@ -0,0 +1,13 @@
+
+{{ $vid := (.Get 0) }}
+
+<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
+    <iframe src="http://v.qq.com/iframe/player.html?vid={{ $vid }}&auto=0"
+    scrolling="no"
+            frameborder="no"
+            framespacing="0"
+            allowfullscreen="true"
+            style="position: absolute; width: 100%; height: 100%; padding: 20px;"
+            >
+    </iframe>
+</div>