为了保证手机和电脑数据的可靠性，自从用上 Apple 全家桶以来，我就注册了一个土区的 Apple ID 来开通 iCloud 订阅，然后将主号国区的 Apple ID 拉入其家庭成员中，以此来共享 iCloud 订阅的 200G 存储空间，用于备份重要数据和相册等内容。

国区的 iCloud 200G 订阅价格为 20 元/月，最早土区的 200G 价格仅为 19.99 土耳其里拉，换算成人民币大约是四块钱一个月，可谓是性价比极高。

关于土耳其里拉和人民币的汇率换算，考虑到大多数人都没有外币卡，而是使用从闲鱼等平台购买的礼品卡进行充值，所以按照目前闲鱼平台的最低价格，100 土耳其里拉等于 20 元人民币，如果有其他渠道或许能做到更低的价格。

然而在 2023 年 6 月 Apple 发来邮件，土区 iCloud 订阅开始了第一次涨价，从 19.99 里拉涨到了 39.99 里拉，直接翻了一倍，换算过来的价格来到了八块钱一个月。

尽管订阅价格涨了一倍，但相对国区的 iCloud 二十块钱一个月还是有一定优势在的，于是我咬咬牙继续保持着订阅。

但就在最近，我再次收到了 Apple 发来的邮件，土区 iCloud 再次宣布涨价，而且更上次一样又是翻了一倍，从 39.99 里拉涨到了 79.99 里拉，换算过来约等于十六块钱。

但因为闲鱼上土耳其礼品卡的价格也会随之波动，前面提到的汇率换算是最低的价格，如果加上一些波动，那么土区 iCloud 订阅几乎和国区的价格持平。

既然如此，我想着也没必要使用土区 iCloud 家庭共享订阅的方式了，接下来应该会考虑整一台 NAS 来替换掉 iCloud，继续存储和备份一些重要的数据。

阿里云是国内领先的云计算服务商，但其产品在平日里并不算物美价廉，高昂的价格拦住了不少在校大学生或者并不富裕的开发者们。

然而就在前段时间，阿里云推出了名为“阿里云高校计划”的扶持活动，所有通过学生认证的账号均可直接领取一张 300 元的无门槛代金券，可直接抵扣购买、升级、续费等费用。

经过我的测试，不管是专科还是本科甚至研究生，也不管是全日制还是非全日制，只要是学信网在籍的都可以顺利通过认证。

如果已经毕业很长时间了，或者实在是弄不到学生认证的资格，可以通过公众号「一纸忘忧」联系我，有偿提供已认证的账号，账号支持更换绑定手机号，确保账号所属权能够得到保障。

接下来就是本文的主要内容，如何使用这张 300 元的无门槛代金券，购买五年阿里云 ESC 服务器。

领取代金券

活动地址：https://t.aliyun.com/U/7uRdEp

随机红包：https://t.aliyun.com/U/X6r6Fw

1. 完成实名验证
2. 完成个人实名后进行学生认证
3. 领取 300 元的无门槛代金券
4. 领取一个 20-100 的随机红包

如果没有学生认证可以通过公众号「一纸忘忧」联系我，有偿提供已认证的账号。

选购服务器

打开 ECS 选购页面：https://t.aliyun.com/U/htA8pV

选择地域为：华北 6（乌兰察布）

实例规格：突发性能实例 t6（ecs.t6-c4m1.large）

突发性能实例会限制 CPU 使用频率，如果一开始需要配置环境等操作，建议先打开无性能约束模式，可能会产生一定费用，后期可以自行关闭。

然后选择一个你熟悉的操作系统，我这里选的是 Debian 12。系统盘类型选择「高效云盘」，容量调整为 20 G。

重点来了，在带宽和安全组选择分配公网 IPv4 地址，并且选择按使用流量计费，然后再勾选升级至 CDT 计费。

开通云数据传输 CDT 计费后，每个月赠送 200GB 公网流量可用于服务器流量计费，但只有其中的 20GB 流量可用于中国内地地域。

需要注意的是，超出免费额度后的流量价格为 0.8元/G，如果你的服务器有对外使用的需求，请注意设置带宽限制，避免因恶意攻击导致流量费用飙升。

如果没有什么大带宽的需求，这里我建议将带宽设置小一点，比如设置成 5Mbps，一般就不会导致太大的流量费用支出。

选择购买年限

最后可以在右侧选择需要购买的年限，可以看到 4 年的费用可以全部由代金劵支付，而如果选择 5 年的话，也仅仅只需要再支付四十多块钱，这个价格也算得上超值了。

各位可以根据自己的需求来选择，如果有其他疑惑的地方，也可以在下方留言我们一起讨论。重要的事情说三遍，如果没有学生认证可以通过公众号「一纸忘忧」联系我，有偿提供已认证的账号。（别问为什么只有一遍，前面已经说过两遍了）

前言

我一直有个强迫症，看着 WordPress 的文章中有个字段 post_name 如果不设置的话，就会默认使用标题 title 作为 post_name，导致使用 post_name 作为文章 URL 的时候会出现中文，看着很不协调。

然而我又不想手动去设置 post_name，于是乎想着能不能将 post_name 默认设置成与 ID 相同。

批量替换现有数据

首先将已经发布的文章给全部替换掉，直接用 SQL 语句

UPDATE wp_posts SET post_name = ID;

这里的 wp_posts 是 WordPress 数据库中的文章表。

发布文章自动修改

要在 WordPress 中每次发布或更新文章时，默认将 post_name 设置为与 ID 相同，可以通过添加自定义功能来实现此功能。

打开 WordPress 主题文件夹中的 functions.php 文件，在文件的末尾添加以下代码：

function set_postname_as_id( $post_id ) {
    $post = get_post( $post_id );
    $post_name = $post->post_name;
    $post_id = $post->ID;

    if ( $post_name != $post_id ) {
        $args = array(
            'ID' => $post_id,
            'post_name' => $post_id,
        );
        wp_update_post( $args );
    }
}
add_action( 'save_post', 'set_postname_as_id' );

保存并上传 functions.php 文件到您的 WordPress 主题文件夹。

每当发布或更新文章时，WordPress 将检查文章的 post_name 是否与 ID 相同。如果不同，它将自动更新 post_name 为 ID。请注意，这将影响所有类型的文章，包括页面和自定义文章类型。如果只想应用于特定类型的文章，可以在 set_postname_as_id 函数内添加适当的条件检查。

比如我用的是 B2 主题，我想替换所有的文章类型，除了 page 页面，可以改成下面这样：

function set_postname_as_id( $post_id ) {
    // 获取文章对象
    $post = get_post( $post_id );

    // 获取当前文章的 post_name 和 ID
    $post_name = $post->post_name;
    $post_id = $post->ID;

    // 检查文章类型是否为 page，如果是则返回
    if ( $post->post_type == 'page' ) {
        return;
    }

    // 检查 post_name 是否与 ID 不同
    if ( $post_name != $post_id ) {
        // 准备要更新的文章参数
        $args = array(
            'ID' => $post_id,
            'post_name' => $post_id,
        );

        // 更新文章的 post_name 为 ID
        wp_update_post( $args );
    }
}

// 在保存文章时触发自定义功能
add_action( 'save_post', 'set_postname_as_id' );

介绍

Cockpit 是一个易于使用、集成、易于浏览和开放的基于 Web 的服务器界面。

• 系统日志信息查看
• 系统存储信息查看
• 仪表盘
• 系统配置与系统基本操作
• Docker 容器监控
• 系统网络监控
• K8s 集群管理（我没测试）
• Web 命令行终端
• ......

总之功能强大就对了。

安装

我这里是用 CentOS 7 版本的，此外 Cockpit 还另外支持其他多种 Linux 发行版。

来自官网的截图：

sudo yum install -y cockpit cockpit-docker cockpit-machines cockpit-dashboard cockpit-storaged cockpit-packagekit
sudo systemctl enable --now cockpit.socket
sudo firewall-cmd --permanent --zone=public --add-service=cockpit
sudo firewall-cmd --reload

也可以安装其他模块来扩展 Cockpit 的功能（yum install -y 模块名）。

然后就可以浏览器访问 9090 端口了。

用户名和密码就是 Linux 服务器的用户名和密码，登录即可进入首页。

公司有个新项目由我这边独立选型开发，项目需求是做一个英文的产品展示官网，考虑到项目比较简单且周期不长，最终决定使用 Nuxt 框架来进行开发。

开发过程还算顺利，但中途遇到一个 Bug 花了我不少的时间，在网上找了许久，仅能检索到极少数相关内容，都是在 Vue 的 Github 仓库中的 issues，且最终仍未能够找到问题所在，当然这也许并不是 Bug，而是框架本身设计的就是这样。

以下是我的解决思路，如果各位大佬有别的见解，请指出交流。

问题现象

在产品展示的官网首页有一个全屏的 video 元素，视频默认自动播放，在大多数现代化浏览器的最新版本中，要实现这个功能，需要在 video 元素中加入 autoplay 属性，且还需要设置一个 muted 属性用于默认静音播放。

可以看到在第一次页面加载时是正常自动播放的，且此时 DOM 结构跟在 Vue 模板里写的代码是一样的。

这时候切换一下路由到产品页面，再切回首页时就出现了问题，原来 video 元素中的 muted 莫名其妙的消失了，导致视频自动播放也随之失效。

问题分析

起初我以为是 Nuxt 路由切换的问题，测试了使用 Nuxt 提供的 navigateTo() 方法和 Vue 路由提供的 $router.push() 方法，均存在该问题。

第二次测试了给页面设置 keepalive: true 来实现路由缓存，但仍未解决该问题，且因此引出了其他的 Bug，没往其深究所以暂且按下不表。

第三次测试了给 video 元素通过 v-bind 去动态绑定 muted 属性，不管是通过 ref 定义的值还是直接绑定 :muted="true"，均未能解决问题。

我开始怀疑是不是 Nuxt 的问题，于是我第四次使用另一个纯 Vue 的项目做了测试。得出结果首次加载就失去了 muted 属性，但诡异的是视频仍可以实现自动播放，这个奇怪的问题逐渐变得扑朔迷离。

最终在 Vue 的 Github 仓库中找到了一个还未解决的 issues，遇到了跟我一样的问题。

这是一个在 2022 年 10 月 12 日创建的 issues，至今为止仍未关闭。值得一提的是，底下有一条回复指出「Vue 不应该真的破坏原生浏览器功能」，但可能这确实是 Vue.js 的 Bug。

问题解决

最终我不再去纠结问题所在，开始着手准备解决方案。既然通过动态绑定属性不能解决问题，那就只能使用最原始的方案了，通过操作 DOM 去出发元素的播放事件。

在 Vue 挂载完成之后，通过 document.getElementsByTagName('video') 去拿到首页的所有视频元素，再依次触发播放事件，如此就能够在切换路由再切回首页时，视频仍能够保持自动播放。

尽管如此可以简单的解决问题，但感觉这并不是最终的解决方案，其问题核心应该还是出现在框架上，希望能够有大佬能深入研究一下，也能给我指点一二。

Node.js 新官网已正式发布了 Beta 预览版本，现正积极招募测试志愿者，以收集广大用户的真实体验与宝贵建议。如果你对 Node.js 新官网的设计和功能充满好奇，或者想要为 Node.js 社区的发展贡献一份力量，那么请踊跃参与，共同见证新官网的蜕变。

新官网的体验地址已经公布，你可以在浏览器中直接访问下方官网地址进行体验。同时，我们也欢迎你在 Github 仓库中提供反馈和建议，帮助 Node.js 社区不断完善新官网。

体验地址

官网地址：https://beta-node-js-org.vercel.app

项目地址：https://github.com/nodejs/nodejs.org

全新首页

在体验新官网的过程中，我感受到了其 UI 和 UX 设计的显著提升。全新设计的首页给人一种焕然一新的感觉。从视觉效果到页面布局，再到内容的展示，都展现出了更加专业和精致的风格。Node.js 的介绍也更加突出和全面，让人一眼就能领略到它的魅力。

特别值得一提的是，新官网在搜索框功能上进行了优化，提供了全站检索的功能。无论你想要查找文档、博客还是下载资源，都能通过搜索框轻松找到。这一改进大大提升了用户的检索效率，让使用体验更加便捷。

在体验过程中，我也发现了一些需要改进的地方，例如首页的 Node.js LTS 下载按钮的箭头设计可能需要调整，以更符合用户的认知习惯；此外，右侧代码块在切换时造成的页面闪动也需要进一步优化，以提升用户体验。

学习页面

学习页面进行了全新改版，从两列布局升级为三列布局，左侧导航菜单采用树型目录形式，便于用户快速定位所需内容。右侧新增阅读时长、反馈入库及文档目录等功能，为用户带来更为便捷的学习体验。

在使用过程中也发现了一些可以优化的地方，比如当滚动左侧导航目录时，点击菜单后目录会自动滚回顶部，这影响了用户的浏览体验。此外，建议考虑在文档顶部加入面包屑导航，以便用户更好地了解当前位置。

关于页面

关于页面的设计延续了学习页面的风格，采用了相似的布局结构，确保用户在切换页面时能够保持一致的浏览体验。

值得一提的是，在介绍页的顶部新增了一处引人注目的 Node.js 吉祥物「火箭龟」的图片，这不仅为页面增添了几分趣味性，同时也作为品牌元素，加深了用户对 Node.js 的认知和记忆。

下载页面

下载页面在交互方式上进行了优化，采用下拉选择组件的形式供用户选择历史版本、操作系统以及系统架构，使操作更为简便快捷。这一改进特别适用于需要下载特定历史版本的用户，提高了他们的操作效率。

博客页面

博客页面的布局变化较大，内容也更加丰富多样。除了最新的 Node.js 新闻、案例研究、教程和资源外，还增加了多个 Tab 筛选功能，方便用户快速找到感兴趣的内容。

然而在体验过程中，发现点击 Events Tab 时出现了 404 错误页面，这可能需要进一步修复。

文档页面

文档和 Certification 页面目前没有明显变化，仍然保持了现有的 API 文档页面和对应站点的跳转，这可能是因为这两个页面的内容相对稳定，不需要进行大规模的调整。

总结

Node.js 新官网的 Beta 预览版本在设计和功能上都有了显著的提升，为用户提供了便捷和舒适的体验，在细节方面仍有一些需要改进的地方。期待广大测试志愿者能够积极参与体验，并提供宝贵的反馈和建议，共同推动新官网的完善和优化。

感谢你的关注与支持！让我们一起期待 Node.js 新官网的正式发布，为 Node.js 社区的发展注入新的活力！

往期回顾

1. Node.js 特别吉祥物：「火箭龟」引领新篇章！
2. Bun v1.0.30 正式发布，即将提供 Windows 稳定版本！
3. Hello World！你好，微信公众号！

前言

我一直有个强迫症，看着 WordPress 的文章中有个字段 post_name 如果不设置的话，就会默认使用标题 title 作为 post_name，导致使用 post_name 作为文章 url 的时候会出现中文，看着很不协调。

然而我又不想手动去设置 post_name，于是乎想着能不能将 post_name 默认设置成与 ID 相同。

批量替换现有数据

首先将已经发布的文章给全部替换掉，直接用 sql 语句

UPDATE wp_posts SET post_name = ID;

这里的 wp_posts 是 WordPress 数据库中的文章表

发布文章自动修改

要在 WordPress 中每次发布或更新文章时，默认将 post_name 设置为与 ID 相同，可以通过添加自定义功能来实现此功能

打开 WordPress 主题文件夹中的 functions.php 文件，在文件的末尾添加以下代码：

function set_postname_as_id( $post_id ) {
    $post = get_post( $post_id );
    $post_name = $post->post_name;
    $post_id = $post->ID;

    if ( $post_name != $post_id ) {
        $args = array(
            'ID' => $post_id,
            'post_name' => $post_id,
        );
        wp_update_post( $args );
    }
}
add_action( 'save_post', 'set_postname_as_id' );

保存并上传 functions.php 文件到您的 WordPress 主题文件夹

每当发布或更新文章时，WordPress 将检查文章的 post_name 是否与 ID 相同。如果不同，它将自动更新 post_name 为 ID。请注意，这将影响所有类型的文章，包括页面和自定义文章类型。如果只想应用于特定类型的文章，可以在 set_postname_as_id 函数内添加适当的条件检查。

比如我用的是 b2 主题，我想替换所有的文章类型，除了 page 页面，可以改成下面这样

function set_postname_as_id( $post_id ) {
    // 获取文章对象
    $post = get_post( $post_id );

    // 获取当前文章的 post_name 和 ID
    $post_name = $post->post_name;
    $post_id = $post->ID;

    // 检查文章类型是否为 page，如果是则返回
    if ( $post->post_type == 'page' ) {
        return;
    }

    // 检查 post_name 是否与 ID 不同
    if ( $post_name != $post_id ) {
        // 准备要更新的文章参数
        $args = array(
            'ID' => $post_id,
            'post_name' => $post_id,
        );

        // 更新文章的 post_name 为 ID
        wp_update_post( $args );
    }
}

// 在保存文章时触发自定义功能
add_action( 'save_post', 'set_postname_as_id' );

前言

在 KonvaJS 中，事件冒泡是默认启用的，这意味着当在子元素上触发事件时，该事件将向上传播到父元素。因此，如果在图层上注册了 click 事件并在其上创建了一个组，那么单击该组也将触发该事件。

KonvaJS 并没有 stopPropagation() 方法来防止事件冒泡。相反，KonvaJS 使用了自己的事件系统来管理事件，事件传递和事件监听器。

在 KonvaJS 中，可以使用事件对象的 stopPropagation() 方法来阻止事件传播到上级元素。在 KonvaJS 中，事件对象是一个 Konva.Collection 类的实例，它是事件发生时所有相关节点的集合。可以使用它来访问事件目标节点和其他相关节点。

例子

以下代码演示了如何使用 KonvaJS 事件系统来防止父级元素的 click 事件触发：

const stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500,
});

const layer = new Konva.Layer();
stage.add(layer);

const group = new Konva.Group();
group.on('click', (event) => {
  // 阻止事件传播到父级元素
  event.cancelBubble = true;
  
  // 处理组的click事件
  // ...
});

layer.on('click', (event) => {
  // 在此处理父级元素的click事件
  // ...
});

在这个例子中，当单击组时，事件对象的 cancelBubble 属性被设置为 true，以防止事件继续传播到父级元素。这样，父级元素的 click 事件就不会触发了。

需要注意的是，由于 KonvaJS 的事件系统与浏览器的事件系统不同，因此它的用法也略有不同。具体来说，事件对象没有 stopPropagation() 方法，而是使用 cancelBubble 属性来实现相同的效果。

Vue.js 中的 v-model 和 model-value 都是用于实现表单数据的双向绑定的指令。

v-model 是 Vue.js 提供的一个语法糖，可以让开发者在模板中更方便地实现表单数据的双向绑定。当在一个表单元素上使用 v-model 时，它会自动监听元素的 input 或 change 事件，并将表单元素的值同步到相应的 Vue 组件数据中，反之亦然。例如：

<input v-model="message" />

这会将表单元素的值和 Vue 实例中的 message 数据双向绑定。如果用户在表单元素中输入了值，那么 message 数据会自动更新；如果 message 数据发生了变化，表单元素中的值也会自动更新。

model-value 是在 Vue 3 中新增的一个属性，用于在自定义组件中实现表单数据的双向绑定。与 v-model 不同的是，model-value 不是一个指令，而是一个属性，需要在自定义组件的选项中进行配置。例如：

app.component('my-component', {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  `
})

这里定义了一个名为 my-component 的自定义组件，并在其 props 中定义了一个名为 modelValue 的属性。组件的模板中使用了这个属性来实现表单元素的值绑定，同时在表单元素的 input 事件中触发了一个名为 update:modelValue 的自定义事件，将输入的值作为参数传递给父组件。在使用这个自定义组件时，可以像下面这样使用 v-model 来实现表单数据的双向绑定：

<my-component v-model="message" />

总的来说，v-model 是 Vue.js 中用于实现表单数据双向绑定的常用指令，而 model-value 是在自定义组件中实现表单数据双向绑定的一种新的方式。

前言

上个月公司来了位前端大佬，给我们团队制订了一些技术方面的规范，其中有一项是关于在Git上提交代码写Commit Message的一些规范，开始我还觉得多此一举，看了许多大型项目的commit记录之后，才知道这个规范算是行业里的标准。

先来看看我的CodeStudy项目里是写的什么Commit Message

再看看尤雨溪大佬的作品Vue框架的Commit Message

果然一个规范的Commit Message真的能让人眼前一亮，可以快速了解到该commit的内容和涉及的功能模块，下面说说规范化Commit Message能带来什么好处。

规范化的好处

• 便于程序员对提交历史进行追溯，了解发生了什么情况。
• 一旦约束了 Commit Message，意味着我们将慎重的进行每一次提交，不能再一股脑的把各种各样的改动都放在一个 git commit里面，这样一来整个代码改动的历史也将更加清晰
• 格式化的 Commit Message才可以用于自动化输出 Change log

Git提交规范

<type>(<scope>):<subject>
<body>
<footer>

插件推荐

在VS Code上面强烈推荐Commit Message Editor插件，可以快速生成Git Commit Message