添加Open Graph自动替换图片和标题

Meekdai · Apr 9, 2024 · 76e124e · 76e124e
1 parent 6c41a17
commit 76e124e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/docs/index.html b/docs/index.html
@@ -8,7 +8,7 @@
   <meta property="og:description" content="Meekdai music player page with journal">
   <meta property="og:type" content="article">
   <meta property="og:url" content="https://music.meekdai.com/">
-  <meta property="og:image" content="https://cdn.jsdelivr.net/gh/Meekdai/Gmemp@main/media/%E4%B8%80%E5%90%BB%E5%A4%A9%E8%8D%92.jpeg" />
+  <meta property="og:image" content="" />
 
   <link rel="icon" href="https://static.meekdai.com/favicon.svg">
   <title>Gmemp</title>

diff --git a/docs/player.js b/docs/player.js
@@ -46,6 +46,7 @@ let Player = function(playlist) {
   artist.innerHTML =  playlist[this.index].artist;
   document.querySelector("body").style.backgroundImage = "url('" +media+ encodeURI(playlist[this.index].pic) + "')";
   post.innerHTML = '<p><b>'+playlist[this.index].date+'</b></p>' + playlist[this.index].article;
+  document.querySelector('meta[property="og:image"]').setAttribute('content', media+ encodeURI(playlist[this.index].pic));
 
   // Setup the playlist display.
   playlist.forEach(function(song) {
@@ -125,6 +126,10 @@ Player.prototype = {
     document.querySelector("body").style.backgroundImage = "url('" +media+ encodeURI(data.pic) + "')";
     window.location.hash="#"+(index);
 
+    document.querySelector('meta[property="og:title"]').setAttribute('content', data.title);
+    document.querySelector('meta[property="og:url"]').setAttribute('content', window.location.href);
+    document.querySelector('meta[property="og:image"]').setAttribute('content', media+ encodeURI(data.pic));
+
     //progressBar 垂直居中
     progressBar.style.margin = -(window.innerHeight*0.3/2)+'px auto'