博客 (99)

本文过程较为复杂，且部分内容已无法实现，建议点击这里查阅最新的操作方法！

前言：本文操作需要你具备浏览器安装和使用扩展插件的能力、以及简单的使用命令行的能力。

第一步：下载视频

首先我使用 Edge 浏览器（Chrome 操作类似，不过安装扩展需要科学上网）。

2023 年初的时候，用 FetchV 这个扩展是非常方便的，它会自动嗅到网页中的视频，即使没有嗅到也可以用录制的方式来保存。

但到了过了一两个月发现 FetchV（及其马甲）经常打不开，或者无法嗅到视频流，更别提录制了。

所以我找到了另一款专业视频下载神器：

当然它的马甲们用法也是大同小异，主界面是这样的：

开启捕获，同意下载多个文件，然后播放视频，耐心等待。

心急的朋友可以用修改播放速度的扩展（如 视频加速减速控制），例如用 16 倍速，那么一个 16 分钟的视频用 1 分钟就播放完成了。（或者在 F12 的控制台中使用 JS 代码加速：document.querySelector('video').playbackRate = 16; ）

等小浮框提示“捕获完成 点击下载”的时候就可以保存到磁盘上了。

第二步：音频修复

下载后它会有两个 .mp4 文件保存到电脑上，其中较大的是视频部分，较小的是音频部分。

但是有个小问题是，这个音频文件用 Windows 自带播放器播放正常，用 potplayer 等第三方播放器或者一些视频编辑软件播放就会有问题。

我在 Microsoft Store 中找了一款叫 Movie Maker - Video Editor 的应用，

在这个软件中添加刚才的只有音轨的视频文件会提示转码，转码后的 .mp4 文件音轨就正常了。

具体步骤是依次点击“Create New Project”，“Add clip”，“Photo/Video”，选择文件后“Transcode”，保存以后默认会在文件名后加上“ (Transcoded).mp4”。

第三步：音视频合成

接下来是合成视频和音频，将视频文件命名为 v.mp4，音频文件命名为 a.mp4。

在 FFmpeg 官网下载 Windows 版，然后使用这个命令从音频文件中提取音轨：

ffmpeg -i a.mp4 -vn -acodec copy a.aac

再用这个命令将 v.mp4 的视频和 a.aac 的音频合成一个新的文件

ffmpeg -i v.mp4 -i a.aac -c:v copy -c:a copy -map 0:v:0 -map 1:a:0 output.mp4

相比于其它的视频转换工具，ffmpeg 直接提取合并的速度是极快的。

Tips：

• 小鹅通中学习过的课程再次打开会从上次关闭的地方开始播放，这会导致捕获不全，可以将进度条手动拖到末尾，这样它会停止播放，再次刷新就会从头开始播放。

• 浮框中“点击下载”可能没反应，估计是在合成文件，过几秒钟多点几下，不会重复下载。

• 如果要下载的视频比较长或者比较多，可以像我一样在虚拟机里进行，把视频播放器的音量开到最大，把操作系统的声音关闭。

不知道从哪个版本的 Chrome 或 Edge 开始，我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中，我们想办法用 JS 来实现。

方式一、监听 paste 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
    input.value = event.clipboardData.getData('text');
});

这段代码实现了从页面获取这个 input 元素，监听它的 paste 事件，然后将粘贴板的文本内容赋值给 input。

经测试，当焦点在“年”的位置时可以粘贴成功，但焦点在“月”或“日”上不会触发 paste 事件。

方式二、监听 keydown 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        input.value = clipboardData.getData('text');
    }
});

测试发现报错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getData')

Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')

看来 event 中没有 clipboardData 对象，改为从 window.navigator 获取：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        window.navigator.clipboard.readText().then(text => {
            input.value = text;
        });
    }
});

缺点是需要用户授权：

仅第一次需要授权，如果用户拒绝，那么以后就默认拒绝了。

以上两种方式各有优缺点，选择一种适合你的方案就行。接下来继续完善。

兼容更多时间格式，并调整时区

<input type="date" /> 默认的日期格式是 yyyy-MM-dd，如果要兼容 yyyy-M-d 等格式，那么：

const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
    input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}

以 text 为“2023-4-20”举例，先转为 Date，如果成功，再转为英国时间格式“20-04-2023”，以“/”分隔，逆序，再以“-”连接，就变成了“2023-04-20”。

当然如果希望支持中文的年月日，可以先用正则表达式替换一下：

text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");

处理页面上的所有 <input type="date" />

const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
    input.addEventListener(...);
});

封装为独立域

避免全局变量污染，使用 IIFE 函数表达式：

(function() {
  // 将代码放在这里
})();

或者封装为函数，在 jQuery 的 ready 中，或 Vue 的 mounted 中调用。

在 Vue 中使用

如果将粘贴板的值直接赋值到 input.value，在 Vue 中是不能同步更新 v-model 绑定的变量的，所以需要直接赋值给变量：

<div id="app">
    <input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
    {{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data: function () {
            return {
                a: null,
            }
        },
        methods: {
            fn_pasteToDateInput: function (event) {
                const text = event.clipboardData.getData('text');
                const parsedDate = new Date(text);
                if (!isNaN(parsedDate.getTime())) {
                    const att = event.target.getAttribute('data-model');
                    this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
                }
            },
        }
    });
    const vm = app.mount('#app');
</script>

示例中 <input /> 添加了 data- 属性，值同 v-model，并使用 getAttribute() 获取，利用 this 对象的属性名赋值。 

如果你的 a 中还有嵌套对象 b，那么 data- 属性填写 a.b，方法中以“.”分割逐级查找对象并赋值

let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
    target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text);

ChatGPT：

当你从 <textarea> 中获取到的数据中包含换行符时，如果直接在 Vue 模板中使用插值表达式 {{}} 显示，是无法保持换行的。因为在 HTML 中，多个连续的空格和换行符都会被视为一个空格，因此如果直接将 \n 显示在模板中，会被渲染成一个空格。

解决这个问题的方法之一是使用 CSS 样式来控制换行的显示。可以为显示数据的元素添加 white-space: pre-wrap; 样式，该样式可以保留换行符并自动换行。

例如，假设你的数据保存在 text 变量中，可以这样在模板中使用：

<pre style="white-space: pre-wrap;">{{ text }}</pre>

在上面的例子中，使用 <pre> 元素来包裹要显示的数据，并添加 white-space: pre-wrap; 样式，这样数据中的换行符就能被保留并自动换行了。

另外，如果你在 Vue 组件中使用了 v-html 指令来显示数据，也可以在数据中使用 <br> 标签来手动添加换行符，然后使用 v-html 来渲染数据。但是，这种方法需要注意 XSS 攻击的问题，因为 v-html 可以渲染任意的 HTML 标签和内容，如果数据中包含恶意代码，很容易被攻击者利用。

2023.5 注：可以试试在“Synology Drive 管理控制台”中删除日志，我尚未尝试，如果有效就不需要看下面的内容了。

以下是 ChatGPT 的回答：

/volume1/@synologydrive/@sync/repo/ 是 Synology NAS 系统中 Synology Drive Client 同步文件夹的本地存储路径，用于存放从云端同步下来的文件。这个目录下的文件和文件夹的占用空间大小与您在云端存储的数据量有关。当您在 Synology Drive 中创建文件夹并将文件同步到本地时，这些文件会被存储在 /volume1/@synologydrive/@sync/repo/ 目录下。

如果您发现这个目录占用空间很大，可能是因为同步的文件夹中包含了大量的文件或者文件夹，或者存在某些文件大小比较大的情况。您可以通过以下方式来清理这个目录的空间：

• 删除不需要的文件或文件夹。如果您发现同步的文件夹中包含了不需要的文件或文件夹，可以手动删除这些文件或文件夹来释放空间。
  

• 调整同步设置。您可以在 Synology Drive Client 中调整同步设置，例如只同步某些文件夹或文件类型，或者调整同步频率等，以减少同步的数据量。
  

• 关闭同步功能。如果您不再需要某个文件夹的同步功能，可以在 Synology Drive Client 中关闭该文件夹的同步功能，以停止该文件夹的同步并释放空间。
  

• 清理同步缓存。Synology Drive Client 会在本地缓存一些同步的文件，以提高访问速度。您可以在 Synology Drive Client 中清理同步缓存，以释放空间。
  

需要注意的是，如果您在 Synology Drive 中删除了某个文件夹，该文件夹的同步数据并不会自动删除。如果您需要彻底清理同步数据，可以手动删除 /volume1/@synologydrive/@sync/repo/ 目录下与该文件夹相关的文件和文件夹。

于是我听从了 ChatGPT 的指引，执行了命令：rm -rf repo

手动删除文件后发现备份速度变慢了，在 NAS 中卸载并重新安装 Synology Drive Server 恢复正常（客户端需要删除并重建任务）。

原生判断

window.addEventListener('scroll', scroll)

function scroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      
      if (scrollTop === 0) {
        console.log('滚动到顶了');
      }
      if (scrollTop + clientHeight >= scrollHeight - 100) {
        console.log('滚动到底了');
      }
}

window.removeEventListener('scroll', scroll) // 移除滚动事件

scrollTop：文档在可视区上沿的位置距离文档顶部的距离

clientHeight：可视区的高度

scrollHeight：文档总高度

100：用于在滚动到底部之前提前加载内容（如瀑布流），提高用户体验，请自行修改数值（建议不小于 2 像素，以规避在部分浏览器上因获得值为小数时可能无法触发的问题）

jQuery 判断

window.addEventListener('scroll', scroll)

function scroll() {
    const doc_height = $(document).height();
    const scroll_top = $(document).scrollTop();
    const window_height = $(window).height();
    
    if (scroll_top === 0) {
      console.log('滚动到顶了');
    } else if (scroll_top + window_height >= doc_height - 100) {
      console.log('滚动到底了');
    }
}

命令语法

grep [options] [pattern] file

-r 包含所有子目录

例：

grep -r 要找的内容 /www/

• 从朋友圈发布的视频时长限制30秒

• 从视频号发布的视频时长限制30分钟

视频号助手网址：https://channels.weixin.qq.com/platform，管理视频号创作内容，相当于抖音巨量百应达人工作台。

视频号小店网址：https://channels.weixin.qq.com/shop，管理商品和订单，相当于抖店。

首先，禁止网站下所有 .php 等文件均不允许被访问到。

在 nginx 网站配置文件中，include enable-php-**.conf; 上方插入：

location ~ ^/.*\.(php|php5|py|sh|bash|out)$ { deny all; }

其中，^ 匹配开始，/.* 匹配所有目录和文件名，\.(php|php5|py|sh|bash|out) 匹配文件后缀名，$ 匹配结束。

即便如此，仍然忽略了 nginx 中 .php 文件名后加斜杠仍然能访问到的情况，譬如我们访问这个网址：

https://xoyozo.net/phpinfo.php/abc.html

nginx 仍然运行了 phpinfo.php，给了后门可趁之机，所以改进为：

location ~ ^/.*\.(php|php5|py|sh|bash|out)(/.*)?$ { deny all; }

Discuz! X3.4 需要写入权限的目录：

• /自研目录/upload/

• /config/

• /data/

• /uc_client/data/

• /uc_server/data/

• /source/plugin/

但，这些都不重要，我们已经禁止了所有目录的 .php 访问了。

第二步，解禁需要直接被访问到的文件路径。

Discuz! X3.4 根目录下的 .php 文件都是入口文件，需要能够被访问到：

/admin.php
/api.php
/connect.php
/forum.php
/group.php
/home.php
/index.php
/member.php
/misc.php
/plugin.php
/portal.php
/search.php

其它目录中需要被直接访问到的文件：

/archiver/index.php
/m/index.php
/uc_server/admin.php
/uc_server/avatar.php
/uc_server/index.php

部分插件文件需要能够被直接访问到：

/source/plugin/magmobileapi/magmobileapi.php
/source/plugin/smstong/accountinfo.php
/source/plugin/smstong/checkenv.php

另外如果有自建目录需要有 .php 访问权限，那么也需要在此处加白，本文以 /_/ 目录为例

最终拼成：工具

location ~ ^(?:(?!(/admin\.php|/api\.php|/connect\.php|/forum\.php|/group\.php|/home\.php|/index\.php|/member\.php|/misc\.php|/plugin\.php|/portal\.php|/search\.php|/archiver/index\.php|/m/index\.php|/uc_server/admin\.php|/uc_server/avatar\.php|/uc_server/index\.php|/source/plugin/magmobileapi/magmobileapi\.php|/source/plugin/smstong/accountinfo\.php|/source/plugin/smstong/checkenv\.php|/_/.*\.php))/.*\.(php|php5|py|sh|bash|out)(/.*)?)$ { deny all; }

这里用到正则表达式中的“不捕获”和“负向零宽断言”语法，格式为：

^(?:(?!(允许的目录或文件A|允许的目录或文件B))禁止的目录和文件)$

值得注意的是，此句负向零宽断言中的匹配内容是匹配前缀的，也就是说

https://xoyozo.net/index.php
https://xoyozo.net/index.php/abc.html

都可以访问到，而

https://xoyozo.net/forbidden.php
https://xoyozo.net/forbidden.php/abc.html

都访问不到，这是符合需求的。

如果自建目录 /_/ 下有写入需求，单独禁止即可，以 /_/upload/ 为例：

location ~ ^/_/upload/.*\.(php|php5|py|sh|bash|out)(/.*)?$ { deny all; }

ThinkPHP 网站有统一的访问入口，可按本文方法配置访问权限。

特别注意：上面的代码必须加在 PHP 引用配置（include enable-php-**.conf;）的上方才有效。

附：一键生成 nginx 访问控制 location URI { } 语句工具