utterances-bot commented 3 years ago

在 Hugo 里内嵌音乐播放器（APlayer） | Kreee's Blog

在 Hugo 里内嵌音乐播放器（APlayer） - A Kreee's Blog, powered by GitHub Pages, Hugo and Bilberry Premium Theme for Hugo.

https://blog.ohmykreee.top/article/music-player-in-hugo-page/

LiCaoZ commented 3 years ago

成功啦，谢谢dalao

shenmo7192 commented 3 years ago

大佬好！我百度了整整一个下午，换成bing才找到你的博客！真的久旱逢甘霖！我特意fq来登陆来回复！

但是我这边出现了奇怪的情况:播放器出现了好多次大佬能帮忙看看吗...播放器widget在文章的最后

https://superendermansm.gitee.io/posts/%E5%85%B3%E4%BA%8E%E6%8A%98%E8%85%BEvaline%E5%92%8Cqmsg%E8%BF%99%E6%A1%A3%E5%AD%90%E4%BA%8B/

这是我的博文，最后按您的步骤添加了播放器但是...出现了4个一模一样的APlayer..... 求指导，不胜感激！

shenmo7192 commented 3 years ago

新搞了个帖子专门用来放APlayer，屏蔽了无关内容，问题是一样的

https://superendermansm.gitee.io/posts/%E4%B8%80%E5%91%A8%E5%B9%B4%E4%B8%80%E8%B7%AF%E6%9C%89%E4%BD%A0/

markdown的位置在这里

https://gitee.com/superendermansm/superendermansm/tree/master/content/posts

按照你说的不良心的theme方法操作的

shenmo7192 commented 3 years ago

今早突然想起博文里似乎说了

好了不卖关子了，问题就在于新的渲染器 Goldmark 不默认渲染 HTML 代码，甚至用 shortcodes 也不行

突然想是不是因为这个才不能渲染网易云原生播放器的回滚后只打开这一选项 iframe标签被正确渲染了.....

虽然问题似乎解决了，但是我还是想知道为什么我的APlayer有4个我保留了这个帖子来显示bug https://superendermansm.gitee.io/posts/%E4%B8%80%E5%91%A8%E5%B9%B4%E4%B8%80%E8%B7%AF%E6%9C%89%E4%BD%A0/

ohmykreee commented 3 years ago

今早突然想起博文里似乎说了
好了不卖关子了，问题就在于新的渲染器 Goldmark 不默认渲染 HTML 代码，甚至用 shortcodes 也不行
突然想是不是因为这个才不能渲染网易云原生播放器的回滚后只打开这一选项 iframe标签被正确渲染了.....

虽然问题似乎解决了，但是我还是想知道为什么我的APlayer有4个我保留了这个帖子来显示bug https://superendermansm.gitee.io/posts/%E4%B8%80%E5%91%A8%E5%B9%B4%E4%B8%80%E8%B7%AF%E6%9C%89%E4%BD%A0/

@SuperEndermanSM 在找问题了。

不过在这之前我想问一个问题：因为看到你的模板文件是有修改的，你是否修改了 /themes/dream/layouts 里的文件，如果有的话修改了哪些地方（一个一个去看好麻烦啊 ~~其实是懒~~）。如果没有修改的话大概率是模板里有问题（也有可能是其他问题，不过模板的问题的话用修改模板的方式是能解决的）。

在这里还是想说一下，强烈不建议直接对 /themes/ 下的的模板进行直接修改，而是改用在主文件夹里进行“覆写”操作。（比如你的 favicon 可以放在 /static/favicon.ico 那里，效果和放 /themes/dream/static/favicon.ico 效果一样的；/themes/dream/static/img/ 下所有文件移到 /static/img/ 同理。）原因的话 ~~可能我有强迫症~~ 能保证模板文件的干净，在修改完模板文件后能减少一些意外的发生（？）（安利一下我的这篇文章使用 GitHub Action 自动渲染和发布网页 - Kreee's Blog 。如果使用 submodules 导入模板的话，直接修改完模板再 push 到 GitHub 并用 GitHub Action 发布，就会出问题。）

ohmykreee commented 3 years ago

今早突然想起博文里似乎说了
好了不卖关子了，问题就在于新的渲染器 Goldmark 不默认渲染 HTML 代码，甚至用 shortcodes 也不行
突然想是不是因为这个才不能渲染网易云原生播放器的回滚后只打开这一选项 iframe标签被正确渲染了.....

虽然问题似乎解决了，但是我还是想知道为什么我的APlayer有4个我保留了这个帖子来显示bug https://superendermansm.gitee.io/posts/%E4%B8%80%E5%91%A8%E5%B9%B4%E4%B8%80%E8%B7%AF%E6%9C%89%E4%BD%A0/

@SuperEndermanSM 已经找到问题了。

问题出在 MetingJS 上，而且问题可能是 MetingJS 与 jquery@3.6.0 有冲突。如果同时使用 MetingJS 与 jquery@3.6.0 ，会在控制台里报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'destroy')
    at HTMLElement.disconnectedCallback (Meting.min.js:formatted:30)
    at xe (jquery@3.6.0:formatted:1872)
    at He (jquery@3.6.0:formatted:2284)
    at S.fn.init.append (jquery@3.6.0:formatted:2364)
    at S.fn.init.wrapAll (jquery@3.6.0:formatted:3838)
    at HTMLBodyElement.<anonymous> (jquery@3.6.0:formatted:3847)
    at Function.each (jquery@3.6.0:formatted:160)
    at S.fn.init.each (jquery@3.6.0:formatted:78)
    at S.fn.init.wrapInner (jquery@3.6.0:formatted:3844)
    at at (jquery.overlayScrollbars.min.js:13)

（我觉得我有必要去 MetingJS 那里提交一个 issues）（其实我也不会前端啊，看代码啥的真的不会，我也不是啥大佬😂😂）

解决方法目前只想到了一个：禁用 jQuery ，或者不用 MetingJS + APlayer 组合。
而且如果选择禁用 jQuery 的话你那个模板里的一些功能将会失效（目前发现回到顶部、保存文章为图片功能失效）

禁用 jQuery 的方法：

复制 /themes/dream/layouts/_default/baseof.html 到 /layouts/_default/baseof.html

修改 baseof.html ：
在第 49 行：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0"></script>

把它注释掉：

<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0"></script> -->

多bb几句：

在百度搜不到我的文章是因为我没把我的博客提交给百度去索引，只提交给了必应和谷歌。而至于为啥不提交给百度呢，因为本人对百度的印象并不是很好（其实还是懒，不想整那么多）。
其实 GitHub 并没有墙啦，只是在某些地区出现了 DNS 污染。要是 GitHub 真的像谷歌一样被墙那怕不是全国的程序员都要揭竿而起（大雾）。（所以快来 GitHub 托管博客啊）
如果想把博客托管到 GitHub 上又不想有 DNS 污染，可以自己整个域名，然后用国内的域名解析服务（比如阿里云云解析） A Record 解析到 GitHub Pages 。只是我服务器的 Landing Page 用的是 A Record 而这个博客用的是 CNAME，因为不然的话每次发布到 GitHub Pages 后都要发给我一封邮件告诉我不能用 A Record 而应该用 CNAME 真的很烦。（考虑后面出个教程啥的）

shenmo7192 commented 3 years ago

@SuperEndermanSM 在找问题了。

不过在这之前我想问一个问题：因为看到你的模板文件是有修改的，你是否修改了 /themes/dream/layouts 里的文件，如果有的话修改了哪些地方（一个一个去看好麻烦啊 ~其实是懒~）。如果没有修改的话大概率是模板里有问题（也有可能是其他问题，不过模板的问题的话用修改模板的方式是能解决的）。

在这里还是想说一下，强烈不建议直接对 /themes/ 下的的模板进行直接修改，而是改用在主文件夹里进行“覆写”操作。（比如你的 favicon 可以放在 /static/favicon.ico 那里，效果和放 /themes/dream/static/favicon.ico 效果一样的；/themes/dream/static/img/ 下所有文件移到 /static/img/ 同理。）原因的话 ~可能我有强迫症~ 能保证模板文件的干净，在修改完模板文件后能减少一些意外的发生（？）（安利一下我的这篇文章使用 GitHub Action 自动渲染和发布网页 - Kreee's Blog 。如果使用 submodules 导入模板的话，直接修改完模板再 push 到 GitHub 并用 GitHub Action 发布，就会出问题。）

这些在我今天的摸索途中发现了对源主题文件的修改已经回滚了 dreams主题留了自己添加css/js的配置，只不过默认注释了，我现在启用了

shenmo7192 commented 3 years ago

@SuperEndermanSM 已经找到问题了。

问题出在 MetingJS 上，而且问题可能是 MetingJS 与 jquery@3.6.0 有冲突。如果同时使用 MetingJS 与 jquery@3.6.0 ，会在控制台里报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'destroy')
    at HTMLElement.disconnectedCallback (Meting.min.js:formatted:30)
    at xe (jquery@3.6.0:formatted:1872)
    at He (jquery@3.6.0:formatted:2284)
    at S.fn.init.append (jquery@3.6.0:formatted:2364)
    at S.fn.init.wrapAll (jquery@3.6.0:formatted:3838)
    at HTMLBodyElement.<anonymous> (jquery@3.6.0:formatted:3847)
    at Function.each (jquery@3.6.0:formatted:160)
    at S.fn.init.each (jquery@3.6.0:formatted:78)
    at S.fn.init.wrapInner (jquery@3.6.0:formatted:3844)
    at at (jquery.overlayScrollbars.min.js:13)

（我觉得我有必要去 MetingJS 那里提交一个 issues）（其实我也不会前端啊，看代码啥的真的不会，我也不是啥大佬😂😂）

解决方法目前只想到了一个：禁用 jQuery ，或者不用 MetingJS + APlayer 组合。而且如果选择禁用 jQuery 的话你那个模板里的一些功能将会失效（目前发现回到顶部、保存文章为图片功能失效）

禁用 jQuery 的方法：

1. 复制 `/themes/dream/layouts/_default/baseof.html` 到 `/layouts/_default/baseof.html`

2. 修改 `baseof.html` ：
   在第 49 行 ：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0"></script>

把它注释掉：

<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0"></script> -->

多bb几句：

* 在百度搜不到我的文章是因为我没把我的博客提交给百度去索引，只提交给了必应和谷歌。而至于为啥不提交给百度呢，因为本人对百度的印象并不是很好（其实还是懒，不想整那么多）。

* 其实 GitHub 并没有墙啦，只是在某些地区出现了 DNS 污染。要是 GitHub 真的像谷歌一样被墙那怕不是全国的程序员都要揭竿而起（大雾）。（所以快来 GitHub 托管博客啊）

* 如果想把博客托管到 GitHub 上又不想有 DNS 污染，可以自己整个域名，然后用国内的域名解析服务（比如阿里云云解析） A Record 解析到 GitHub Pages 。只是我服务器的 Landing Page 用的是 A Record 而这个博客用的是 CNAME，因为不然的话每次发布到 GitHub Pages 后都要发给我一封邮件告诉我不能用 A Record 而应该用 CNAME 真的很烦。（考虑后面出个教程啥的）

既然iframe得网易云链接可用，我暂时也就不需要Aplayer了，还是谢谢你的回复

搜索引擎收录我还没有搞，也不知道咋搞，刚开始发布博客

Github 的DNS污染非常难受，我现在就是挂着灯笼回复...

国内有域名，xinnet注册，因为各种原因无法备案但是实名了，不知道能不能用如果可以用自有域名那我肯定要迁移到github page的但是CNAME不会出现DNS污染吗？最终也是要让DNS解析github的域名的吧

ohmykreee commented 3 years ago

既然iframe得网易云链接可用，我暂时也就不需要Aplayer了，还是谢谢你的回复

搜索引擎收录我还没有搞，也不知道咋搞，刚开始发布博客

Github 的DNS污染非常难受，我现在就是挂着灯笼回复...

国内有域名，xinnet注册，因为各种原因无法备案但是实名了，不知道能不能用如果可以用自有域名那我肯定要迁移到github page的但是CNAME不会出现DNS污染吗？最终也是要让DNS解析github的域名的吧

@SuperEndermanSM

搜索引擎收录的话我是把我的博客提交给谷歌和必应。大致的流程是先登陆谷歌或者微软账号，然后认领自己的网站（基本上就是指定 HTML 文件、指定 HTML 标签、DNS 解析三种方法选一种，谷歌会多一个 Google Analytics 绑定），接下来就是提交各个文章的网址，等爬虫来抓就行了（必应的爬虫要比谷歌的爬虫挑剔一点，一些小问题都会判定网址不能被收录，就有点麻烦）。百度的话没试过，但是应该流程都差不多。
GitHub 的 DNS 污染是看地区的，有些地区污染会严重一些，有些就基本没有。以我的观察来说偏东北的地方污染会严重一些，沿海一带（比如我这个地方）就会好很多。就是我们校园网很傻逼，GitHub 时污染时不污染。
DNS 污染的话其实比墙要好解决，系统整 hosts 强制解析或者用阿里云等公共 DNS 就行。
国内域名购买的话是要实名的（我是在阿里云上买的一个 .top 域名，三年首次购买才￥59，本来是想买 .icu 的，但是看那个续费价格就算了），备案的话是如果你有一个境内的服务器，并且要提供网页服务，才要备案。我这个域名就是实名购买，但是没有备案，DNS 解析到 GitHub Pages 的服务器，照样用。
CNAME 解析我估计是会出现 DNS 污染（主要是不知道最终的 IP 解析是交给阿里云还是设备分配到的 DNS 服务器解析）。其实你可以试一试：我的服务器 Landing Page（已经年久失修）www.ohmykreee.top 是用 A Record 解析到 GitHub Pages 的服务器上的（185.199.109.153），博客 blog.ohmykreee.top 是用 CNAME 的（ohmykreee.github.io），你可以试一试有没有 DNS 污染。

LiCaoZ commented 3 years ago

托管在gh pages国内经常绝赞reset🌚 建议使用vercel或者在ghpages上面再套一层cdn

shenmo7192 commented 3 years ago

bing的seo是真的严格标题太短，多个h1标记这种会影响收录吗？

shenmo7192 commented 3 years ago

还有markdown添加的图片似乎都不带alt 我的hugo主题在合成首页的时候似乎就是会把多个h1标记放到一起

ohmykreee commented 3 years ago

bing的seo是真的严格标题太短，多个h1标记这种会影响收录吗？

还有markdown添加的图片似乎都不带alt 我的hugo主题在合成首页的时候似乎就是会把多个h1标记放到一起

@SuperEndermanSM 感觉是会影响收录的。

当初我就因为多个重复的 description meta 标记被必应收录卡了好久，最后还是自己改模板解决掉了（ https://github.com/ohmykreee/kreee-blog/commit/3301039cf711b2b34ccac0c1982c7ce70ddb45b8 ）。

图片生成的时候不带 alt 标签感觉没办法直接解决，影响应该不大（影响网速慢用户和无障碍功能？）。合成首页时多个 h1 标签感觉除了自己改模板也没其他什么简单的解决方法，影响也只是影响主页的收录，只要文章能够被收录就没问题。

ohmykreee / kreee-blog

在 Hugo 里内嵌音乐播放器（APlayer） #2

在 Hugo 里内嵌音乐播放器（APlayer） | Kreee's Blog