YesPlayMusic一款功能强大的音乐播放器

本文介绍了一款名为 YesPlayMusic 的音乐播放器,它使用 Vue.js 全家桶开发,支持网易云账号登录、MV 播放、歌词显示、私人 FM、每日推荐歌曲等功能。此外,它还支持 UnblockNeteaseMusic,自动使用各类音源替换变灰的歌曲链接,支持 Light/Dark Mode 自动切换、Touch Bar、PWA、 Last.fm Scrobble、音乐云盘、自定义快捷键和全局快捷键、Mpris 等功能。本文将详细介绍 YesPlayMusic 的功能及部署方法。 YesPlayMusic 的特性 YesPlayMusic 是一款功能强大的音乐播放器,它支持以下特性: 使用 Vue.js 全家桶开发 网易云账号登录(扫码/手机/邮箱登录) 支持 MV 播放 支持歌词显示 支持私人 FM / 每日推荐歌曲 无任何社交功能 海外用户可直接播放(需要登录网易云账号) 支持 UnblockNeteaseMusic,自动使用各类音源替换变灰歌曲链接 每日自动签到(手机端和电脑端同时签到) Light/Dark Mode 自动切换 支持 Touch Bar 支持 PWA,可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑 支持 Last.fm Scrobble 支持音乐云盘 自定义快捷键和全局快捷键 支持 Mpris 下载和安装 你可以通过访问这个项目的 Releases 页面来下载安装包。同时,如果你使用的是 MacOS 系统,可以通过 Homebrew 来安装: ...

2023年4月6日 · 1 分钟 · 诚哥博客

JS逆向油猴脚本Hook中常用Hook方式方法

本文主要介绍 JS 逆向油猴脚本中常用的 Hook 方式和方法。通过对这些 Hook 技术的了解和应用,我们可以更好地控制和修改网页的行为,实现更多的自动化操作和优化效果。 在本文中,我们将详细介绍以下几种 Hook 方式和方法: DOM 操作:通过修改 DOM 元素的属性和样式,来实现对网页的控制和修改。 事件监听:通过监听网页上的事件,来触发自定义的操作和行为。 AJAX 拦截:通过拦截网页上的 AJAX 请求,来实现对数据的控制和修改。 函数替换:通过替换网页上的函数,来实现对函数的控制和修改。 通过对这些 Hook 方式和方法的深入学习和应用,我们可以更好地掌握 JS 逆向油猴脚本的技术,实现更多的自动化操作和优化效果。 DOM 操作 在 JS 逆向油猴脚本中,DOM 操作是最常用的一种 Hook 方式。通过修改 DOM 元素的属性和样式,我们可以实现对网页的控制和修改。 在实际应用中,我们可以使用以下代码来修改 DOM 元素的属性和样式: // 修改DOM元素的属性 document.getElementById("elementId").setAttribute("attrName", "attrValue"); // 修改DOM元素的样式 document.getElementById("elementId").style.property = "value"; 这样,我们就可以通过修改 DOM 元素的属性和样式,来实现对网页的控制和修改。 事件监听 除了 DOM 操作之外,事件监听也是 JS 逆向油猴脚本中常用的一种 Hook 方式。通过监听网页上的事件,我们可以触发自定义的操作和行为。 在实际应用中,我们可以使用以下代码来监听网页上的事件: // 监听按钮点击事件 document.getElementById("buttonId").addEventListener("click", function () { // 自定义操作和行为 }); AJAX 拦截 除了 DOM 操作和事件监听之外,AJAX 拦截也是 JS 逆向油猴脚本中常用的一种 Hook 方式。通过拦截网页上的 AJAX 请求,我们可以实现对数据的控制和修改。 ...

2023年4月3日 · 3 分钟 · 诚哥博客

如何利用油猴脚本实现Vue开发的网站强制打开Vuedevtools工具?

Vue 是一种流行的 JavaScript 框架,它让开发者可以更轻松地构建现代化的 Web 应用程序。Vue 开发者通常会使用 Vuedevtools 工具来调试他们的应用程序,查看组件层次结构和数据。然而,在某些情况下,Vue 开发者可能无法打开 Vuedevtools 工具,这将使得他们难以调试应用程序。在这种情况下,利用油猴脚本可以实现 Vue 开发的网站强制打开 Vuedevtools 工具。 实现步骤 安装油猴脚本 油猴脚本是一种浏览器扩展程序,它可以帮助我们在网站上添加自定义 JavaScript 代码。我们可以使用油猴脚本来实现强制打开 Vuedevtools 工具的功能。首先,我们需要安装油猴脚本。我们可以在 Chrome 浏览器的应用商店中搜索“Tampermonkey”,然后安装它。 创建油猴脚本 安装油猴脚本后,我们需要创建一个新的脚本来实现强制打开 Vuedevtools 工具的功能。我们可以右键单击油猴脚本的图标,然后选择“新建脚本”。在脚本编辑器中,我们需要输入以下代码: // ==UserScript== // @name Vue devtools auto open // @namespace http://tampermonkey // @version 0.1 // @description Automatically open Vue devtools for Vue sites // @match *://*/* // @grant none // ==/UserScript== (function () { "use strict"; const openDevTools = () => { if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) { window.__VUE_DEVTOOLS_GLOBAL_HOOK__.openDevTools(); } else { setTimeout(openDevTools, 1000); } }; openDevTools(); })(); ...

2023年4月3日 · 1 分钟 · 诚哥博客

Python脚本批量处理图片,缩放裁剪压缩到指定大小

本文将介绍如何使用 Python 编写脚本批量处理图片。我们将使用 Pillow 库来缩放、裁剪和压缩图片,并使用 MD5 哈希值来重命名输出文件。通过本文的学习,您将学习如何使用 Python 快速自动化处理大量图片。 简介 对于需要处理大量图片的工作,例如调整图片大小、裁剪图片等,手动处理是非常繁琐的。为了提高工作效率,我们可以使用 Python 编写脚本来自动化这些任务。在本文中,我们将介绍如何使用 Python 编写脚本来批量处理图片。 环境准备 在开始编写脚本之前,我们需要确保已安装必要的库。在本文中,我们将使用 Pillow 库来处理图片。您可以使用以下命令来安装 Pillow 库: pip install Pillow 编写 Python 脚本 from PIL import Image import os import hashlib input_folder = "/Users/rakers/Library/Containers/com.macosgame.iwallpaperstatic/Data/Documents/OriginalImage/" # 原始图片文件夹路径 output_folder = "./thumb/" # 处理后图片文件夹路径 target_size = (1920, 1080) # 目标大小 if not os.path.exists(output_folder): os.makedirs(output_folder) for filename in os.listdir(input_folder): if not (filename.endswith('.png') or filename.endswith('.jpeg') or filename.endswith('.jpg')): continue try: with Image.open(os.path.join(input_folder, filename)) as img: width, height = img.size if width < height: new_width = target_size[0] new_height = int(height * new_width / width) else: new_height = target_size[1] new_width = int(width * new_height / height) resized_img = img.resize((new_width, new_height)) cropped_img = resized_img.crop((0, 0, target_size[0], target_size[1])) # 获取文件的MD5哈希值,并用它作为新文件名 hash_md5 = hashlib.md5(cropped_img.tobytes()) new_filename = hash_md5.hexdigest() + '.jpg' cropped_img.save(os.path.join(output_folder, new_filename), 'JPEG', quality=95) except Exception as e: print(f"Error processing {filename}: {str(e)}") 运行测试 python3 thumb.py 坐等输出: ...

2023年3月30日 · 1 分钟 · 诚哥博客

Vue中使用Animate.css和Transition标签

本文介绍了如何在 Vue 开发中使用 Animate.css 和 Transition 标签,让你的应用程序拥有更多的动画效果和更好的用户体验。通过引入 Animate.css 库和在 Vue 组件中使用 <transition> 标签,你可以轻松地实现各种预定义的 CSS 动画效果,并控制组件的进入和离开动画。本文还提供了使用 Animate.css 和 Transition 标签的详细步骤和代码示例。 在 Vue 开发中,动画效果对于提升用户体验和视觉效果非常重要。Animate.css 是一个流行的 CSS 动画库,它提供了许多预定义的 CSS 动画效果,可以很容易地在 Vue 应用程序中使用。 animate.css 官网案例 Animate.css 是一个非常流行的 CSS 动画库,它包含了各种各样的动画效果,可以方便地在 Web 应用程序中使用。Animate.css 官网提供了许多演示页面,这些页面展示了 Animate.css 库的不同动画效果。 官网案例: https://animate.style/ github 项目地址: https://github.com/animate-css/animate.css Transition 标签属性简介用法 在 Vue 中,我们可以使用 <transition> 标签来控制组件的进入和离开动画。 <transition> 标签有以下属性: name:指定过渡类的名称,通常使用 "transition" 前缀。 enter-active-class:指定组件进入时的 CSS 类。 leave-active-class:指定组件离开时的 CSS 类。 appear:指定是否在组件出现时触发动画效果,默认为 false。 appear-active-class:指定组件出现时的 CSS 类。 下面是一个使用 <transition> 标签的例子: ...

2023年3月20日 · 2 分钟 · 诚哥博客