Home Debian11 Blog - JavaScript
type: channel
link: https://blog.940304.xyz/tag/JavaScript/
items: 我的听歌软件 Spotify 和网易云的故事 | 导出网易云的歌单再导入到 Spotify
items: 获取 seafile 分享的文件直链
items: 不通过插件给 Typecho 博客添加图片灯箱功能（fancybox js 实现）

我的听歌软件 Spotify 和网易云的故事 | 导出网易云的歌单再导入到 Spotify
type: item
date: 2023-04-03T20:42:40+08:00
description: 14年那会，我第一次使用网易云，当时的网易云真是同类软件中用户体验最好的，当时也没有多大的曲库问题。那时我在很多歌曲的评论区还挺活跃的，还有几首（十几首？）歌的评论在热评上🤣。 网易云一直用到了19年，我毕业工作了，19年下半年果断切换到了 Spotify 上，从此国内音乐平台是路人。主要是年纪大了没有各种社交需求了，就听听歌而已，没必要整得花里胡哨，而且Spotify （我美区）的曲库全，多个设备之间的同步、接力功能很好用。 当时是从淘宝上上车的，Spotify Premium 家庭版，我是家庭成员，并非家庭主人。很有趣的是，当时只交了一年的费用，直到现在还没有下车…… 😂️ 真的离谱啊，被我白嫖到了。 最近几个月在比亚迪的车机上听我 Spotify 上标红心的 500 首歌听腻了，有时候也会听一听 podcast 和电台，电台的话主要收听小时候爱听的音乐之声 MusicRadio。 前些天打开了网易云，听到了一首大学时很喜欢的歌曲，金魚花火 - (金鱼花火) - 大塚愛，很久没听觉得好好听！ document.getElementById("huahuo").style.height=document.getElementById("huahuo").scrollWidth*0.9+"px"; 官方的网易云客户端限制很多，于是我找到了一个漂亮的第三方网易云播放程序， https://github.com/qier222/YesPlayMusic 界面非常简洁，程序也很好用。 但是他没有提供 android 和 ios 移动客户端。我在车机上使用 alook 和 x浏览器测试都无法使用 web 版程序。后面作罢。然后打算把网易云我标记红心的那个歌单导出来，然后导入到 Spotify，于是就有了本文。 导出网易云歌单以及突破1000首歌的限制 搜索到了两个项目 source1 source2 执行了 source1 发现可行，但是网易云 web 页面限制了歌单最大显示的歌曲数量是 1000，而我标记的一共有 1623 首，于是又寻找解决方案。不一会搜到一个油猴脚本，可以突破1000的限制，于是安装测试果然解决了问题。 网易云音乐显示完整歌单 解除歌单歌曲展示数量限制 & 播放列表 1000 首上限 https://greasyfork.org/zh-CN/scripts/406054-%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90%E6%98%BE%E7%A4%BA%E5%AE%8C%E6%95%B4%E6%AD%8C%E5%8D%95 安装好之后再次执行 source1 中的 js 脚本，但是这次不凑效了，无法打印出 歌曲 - 歌手 信息，于是我就研究了一下，修改了 js 代码，最终成功运行。 source1 中的脚本 (function () { let iframeDocument = document.getElementById("g_iframe").contentDocument; let tempElement = iframeDocument.createElement("div"); function getSinger(trNode) { tempElement.innerHTML = trNode.innerHTML; return tempElement.getElementsByTagName("span")[0].title; } function getSongName(trNode) { tempElement.innerHTML = trNode.innerHTML; return tempElement.getElementsByTagName("b")[0].title; } let allSongsTRNode = iframeDocument.querySelectorAll('table.m-table > tbody > tr') var songsStr = ""; allSongsTRNode.forEach(songTR => { songsStr += (getSongName(songTR.childNodes[1]) + " - " + getSinger(songTR.childNodes[3])); songsStr += "\n"; }); console.log(songsStr); })(); 我修改后的脚本，部分逻辑重写了，好使（而且逻辑更简单了） (function () { function getSinger(trNode) { return trNode.getElementsByClassName("t…

获取 seafile 分享的文件直链
type: item
date: 2023-02-22T09:49:39+08:00
description: 创建一个带有效期的分享文件的链接，比如 http://192.168.1.29:8088/f/266c337aab4c40598023/ 点击即下载的直链是 http://192.168.1.29:8088/f/266c337aab4c40598023/?dl=1 但这些都还需要 js 运行后下载器才能获取到文件的直链。之前更新 Mattermost 后端需要下载最新版的 mm 压缩包程序，由于官网太慢，我就下载到了本地然后通过公网的 seafile 分享了个链接，试图修改 Dockerfile 让 curl 直接下载文件，最终找到了文件直链。 $ curl -vv http://192.168.1.29:8088/f/266c337aab4c40598023/?dl=1 * Trying 192.168.1.29... * TCP_NODELAY set * Connected to 192.168.1.29 (192.168.1.29) port 8088 (#0) > GET /f/266c337aab4c40598023/?dl=1 HTTP/1.1 > Host: 192.168.1.29:8088 > User-Agent: curl/7.52.1 > Accept: */* > < HTTP/1.1 302 Found < Server: nginx/1.18.0 (Ubuntu) < Date: Wed, 22 Feb 2023 01:46:28 GMT < Content-Type: text/html; charset=utf-8 < Content-Length: 0 < Connection: keep-alive < Location: http://192.168.1.29:8088/seafhttp/files/ab1a6620-1623-41e2-8838-3920199694e3/Snipaste_2022-06-09_11-02-04.png < Vary: Cookie, Accept-Language < Content-Language: en < Set-Cookie: sfcsrftoken=FoZm3c677QZ3S99XuZe17Wl8wivMUBafSYH02DMBxFTsZcq7V4o5IMCxHzteWfr0; expires=Wed, 21 Feb 2024 01:46:28 GMT; Max-Age=31449600; Path=/; SameSite=Lax < * Curl_http_done: called premature == 0 * Connection #0 to host 192.168.1.29 left intact 可以看到 curl 之后 HTTP/1.1 302 Found，目标路径 location 是 http://192.168.1.29:8088/seafhttp/files/ab1a6620-1623-41e2-8838-3920199694e3/Snipaste_2022-06-09_11-02-04.png，这个就是文件直链。但在有效期过了之后文件直链便不可访问了。

不通过插件给 Typecho 博客添加图片灯箱功能（fancybox js 实现）
type: item
date: 2022-11-19T14:03:00+08:00
description: 我有这个需求之后便搜了一下，看到已经有插件实现了 Swipebox 图片灯箱插件 其开源在 https://github.com/wuxiaocong/Swipebox/ 但是看了一下评论和 issues，担心会有一些奇奇怪怪的 bug，或者和其他已有插件冲突，便放弃了这个插件。 然后有了新的思路，FancyBox。我们可以直接使用 FancyBox 来完成我们的需求，FancyBox 是一款优秀的弹出框 Jquery 插件 允许我们用鼠标和键盘上的四个方向键切换图片 可以根据当前窗口大小自动调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框自动缩放 支持缩略图列表、放大、全屏等功能 弹出框支持显示多种类型的内容：图片、html、视频… 支持触控、缩放手势操作图片 具体步骤： 在主题的 header.php 的 标签之间添加如下 css 引用 在 footer.php 合适的位置添加如下脚本引用 找到主题的 page.php 和 post.php 等文件，这些文件都有一个共同特征，一般有文章正文，在正文的 div 中具有 <?php $this->content(); ?> 的 php 代码。这行代码是将正文内容塞入正文的 div 容器中渲染网页。要想实现图片灯箱功能，需要将正文中的 替换成一个被 a 标签包裹的 img 标签。我们使用正则表达式替换。 找到你主题下的各个文件里的 <?php $this->content(); ?> 然后替换为如下代码 <?php $pattern = '/\<img.*?src\=\"(.*?)\".*?alt\=\"(.*?)\".*[^>]*>/i'; $replacement = ' '; $content = preg_replace($pattern, $replacement, $this->content); //需要支持截断的添加下面两行 $array=explode(' ', $content); $content=$array[0]; echo $content; ?> 如果不生效，有可能是 regex 的 pattern 不对，浏览器打开 F12 审查元素，检查你的文章原文中的图片 img 标签，检查具有哪些属性？如果只有 src 和 alt，那么使用上面的 php 代码是可以生效的，如果还有 title 属性，就要改一下正则表达式，请使用如下代码 <?php $pattern = '/\<img.*?src\=\"(.*?)\".*?alt\=\"(.*?)\".*?title\=\"(.*?)\"[^>]*>/i'; $replacement = ' '; $content = preg_replace($pattern, $replacement, $this->content); //需要支持截断的添加下面两行 $array=explode(' ', $content); $content=$array[0]; echo $content; ?> 保存即可生效，打开一篇具有图片的文章就能预览 FancyBox 的图片灯箱效果。 试用一下？ 引用 https://www.idzd.top/archives/762/[...]