本期教程我将带你注册免费的二级域名！

小介绍：什么是DNS？

DNS 是互联网的域名系统，作用是把好记的网址翻译成电脑能识别的 IP 地址。像 Cloudflare 这类专业 DNS 服务，不仅解析速度快，还采用全球节点就近响应，让网页加载更流畅。同时它具备加密解析、防劫持、防 DDoS 攻击等安全能力，能保护上网隐私和域名安全，既适合个人用来提升上网体验，也能为网站提供稳定可靠的解析与防护，是现代网络中重要的基础服务。

为什么要绑定到Cloudflare？因为这样子你可以设置很多记录。拿我的mc-sep.top举例，本来只能用MC-Sep.top，但是托管后，就可以添加记录了，比如blog.mc-sep.top，可以添加分支。

好了，现在开始正片吧！

提示：如何将域名绑定到其他DNS代理商

你懂的就直接跳过就行，这里以Cloudflare为例。

1. 注册Cloudflare账号。（https://dash.cloudflare.com/）

2. 在Dashboard选择添加->连接域。

3. 输入你刚注册的域名。点击下一步。

提示：如果出现报错：Please ensure you are providing the root domain and not any subdomains (e.g., example.com, not subdomain.example.com) 这就意味着你注册的 这个根域名 已经在cloudflare被注册了，你需要换一家DNS代理商。

4. 选择FREE计划，下一步。

5. 在添加记录那个页面直接点下一步，后续再添加记录，前往激活。

6. 下个页面，你会看到他给你的两个ns服务器，是类似长这样的：

ns1.example.com

ns2.example.com

7. 回到你注册域名的地方，点击“DNS服务器”（或NS服务器等类似的按钮），把其他NS服务器全部删掉，粘贴Cloudflare给你的两个ns服务器，点击应用。

8. 现在可以耐心等待了。不出意外的话，等待几分钟你就会看到域名已经被Cloudflare托管。

9. 如果后续你的域名出现访问时”重定向次数过多“的问题，请前往Cloudflare->你注册的域名的管理->SSL/TLS中，把“灵活”改为其他的（完全/完全严格/关闭）

其他优秀的DNS：

Google Public DNS | https://developers.google.com/speed/public-dns
Quad9 | https://www.quad9.net/
OpenDNS (Cisco) | https://www.opendns.com/
AdGuard DNS | https://adguard-dns.io/
NextDNS | https://nextdns.io/

1. DNSHE

官网：https://www.dnshe.com/

可注册的域名（有时候会变）：cc.cd/cn.mt(需要邀请码，不可绑CF)/ccwu.cc/bbroot.com(需要邀请码)

注册方法：

1. 访问DNSHE官网，选择免费注册。
2. 在下一个页面里填写个人信息。

Tips: 现在他们只支持Google, Microsoft, Tencent(QQ), NetEase(163,126), Apple, Yahoo, Sina, Sohu, and others注册商的邮箱

3. 收取验证码验证账号，登录
4. 登陆后在上面的图标那里换成中文。
5. 在左侧选择“免费域名”。

6. 进入新的界面（https://my.dnshe.com/index.php?m=domain_hub），选择“注册新域名”。

7. 输入你想注册的域名。

8. 更改DNS解析商。

9. 如果你觉得5个不够，填写我的邀请码，可以增加1个！（位置：免费域名->邀请好友解锁额度->使用他人邀请码，填写ZU9EF99929。（域名注册那个我就不给了，怕有人乱搞）

续费方法：可用日期<=180天时，访问https://my.dnshe.com/index.php?m=domain_hub续费。

Tips: 有些域名是可以注册3650天的！

到这里你已经有4个选择了，别急，还有！

2. Stackryze

官网：https://domain.stackryze.com/

可注册：indevs.in/sryze.cc

注册方式是差不多的。只不过他最多可以注册3个域名（2个免费+1个Github加Star）

3. Digitalplat

官网：https://dash.domain.digitalplat.org/

可注册：us.kg(要3$)/xx.kg(也要3$)/qzz.io/qd.je/dpdns.org

Tips: us.kg和xx.kg因为被滥用了，很多非法网站用这个域名，损坏了他们的声誉，所以现在要钱了...

注意：

• 这个网站对人物身份比较严格，所以你可以访问这个网站来生成假的身份绕过检测：https://www.fakepersongenerator.com/

• 这个网站最多创建一个免费域名，建议换多个邮箱来注册。

4. Willin Domains

官网：https://js.cool/

可注册域名：js.cool/憨憨.我爱你/v0.chat/css.fund/kaiyuan.fund（都不可以托管到CF，要更改ns服务器要提issue，可参考上面提到的其他dns代理商）

普通用户可以注册0个，Follow可以注册5个，VIP可以注册20个。

5.其他小众的！

Cloudns

官网：https://cloudns.net

可注册：abrdns.com /cloud-ip.cc

是否可以托管到cloudflare：不可以

Zabc

官网：zoneabc.net

可注册：webm.cc / zabc.net / sylu.cc / sylu.net / acg.rest / vvvv.ee / ctrl.li

是否可以托管到cloudflare：不可以

FreeDNS

官网：https://freedns.afraid.org/

可注册：bot.nu / ftp.sh / soon.it / v0x.eu 等

是否可以托管到cloudflare：不可以

总结

一：使用无障碍

无障碍权限对于一个手表来说至关重要。但是我们的设置…

原有的设置(com.android.settings)被换成了这个：com.huawei.kidwatch.watchsettings。按正常的方法应该行不通了。这时候我们要用这个
工具：

这个软件可以在小桃应用商店找到。

初次使用需要授权（可用Root、Shizuku和ADB），重启后照样生效。所以我们可以看到授权的权限：

Tips:旁边的小锁是保活功能，保证这个无障碍不被某些东西卡没。

二、安装优化应用

可以安装这些应用提升体验：

1. 流体手势导航

可以完美复刻高版本安卓的手势导航。只需要无障碍和悬浮窗授权。

这里说明一下，我们需要使用adb shell appops set命令授权。

一、adb shell appops set 核心用法

appops set 是 Android 中用于设置应用操作权限的底层命令，核心语法极简：

1

adb shell appops set <应用包名> <操作码> <权限状态>

• 应用包名：如 com.tombayley.statusbar、com.android.settings；
• 操作码：对应具体权限的系统标识（如下方清单）；
• 权限状态：仅 3 种可选值
  allow：允许
  deny：拒绝
  ignore：忽略（部分权限生效）

二、常用 appops 操作码清单（通用版）

补充说明：

1. 可通过 adb shell appops list 查看当前设备支持的所有操作码；
2. 部分厂商定制系统（小米 / 华为等）会新增专属操作码，以上为通用核心清单；
3. 高版本 Android（11+）部分权限（如存储）已被 MANAGE_EXTERNAL_STORAGE 替代。

回到正题。开启后的效果：

2. Next锁屏+Mi Control Center

帮助恢复锁屏和下拉通知栏。

效果：

1. 锁屏：

2. 下拉通知栏：

3. Button Mapper

可以修改FUN键的功能（电源键改不了）：

可以按照我这么设置：

三：完成！

你的手表肯定比之前耐用！

你是否在为系统自带的搜索太慢而烦恼？又或者找不到你保存的文件？没关系，Everything会出手！Everything是一款小巧便携的搜索工具，占用小但是速度明显提升！

官图：

下载地址：https://cloud.mc-sep.top/s/BkFW

密码：1145

2. Geek

流氓软件的克星！在Geek里，你可以快速解除软件占用，强力卸载软件，系统软件也可！

官图：

下载地址：https://cloud.mc-sep.top/s/aZsx

密码：9178

3. SpaceSniffer

利用这个软件你可以便携的找到电脑里的大文件，找到占用多的源头！

官图：

下载地址：Click

(这是汉化版的，网上没有别的版本了…)

4. Bongocat

一个会在桌面上生成小猫的工具！小猫的动作和你使用鼠标、键盘的动作一样！主播必用！

官图：

下载地址：https://cloud.mc-sep.top/s/dyCG

密码：6666

有一段时间没有更新了。学业问题，好久才能更新一次。对不起大家！

回到正题。今天，我偶然发现了家里的老古董：

是的，一个特别古老的手表，而今天，我尝试破解这个手表。

实操

破解目标

1. 打开并成功进入adb调试
2. 自由安装软件
3. 解除BL锁，Root

材料

• 一个脑子
• 一个华为儿童手表3X
• 安卓手表ADB实用工具箱（或者WearOS）
• 一根数据线（注意，是带数据传输的，而不是充电线）
• 手机上安装MT管理器

开始肘击

1. 老样子看看手表的CPU品牌和安卓版本
   

2. 这个CPU已经很老了，3700多岁了（口误）
   

3. 打开设置，连续点击版本号，进入开发者模式。
   
   

4. 打开安卓手表ADB实用工具箱（后简称ADB工具），在手表上选择PTP模式，允许USB调试，出现这个页面就成功了
   
   至此，我们的目标1：打开并成功进入adb调试已经顺利完成了，开始我们的下一个目标。

5. 打开ADB工具，修改一下DPI，以后方便操作。（我建议改成200)
   

6. 打开你的浏览器，打开Wear应用库网页版来下载应用（这里下载过了，不在演示）

7. 我们选择安装自定义APK，选择文件后安装。
   
   

8. Oh man!失败了！！！
   

9. 为什么会失败呢？我让你们装的MT管理器不就来了？来看看安装包！
   
   这就是问题。HW的工程师对V1的安装包做了限制。我们只需要改成V2,V3,V2+V3任选一个就可以了。

10. 重新安装
    

11. 打开手表确认
    
    APP测试
    
    
    至此，我们的目标2：安装自定义软件已经顺利:check_mark:了，开始我们的下一个目标。

12. adb重启到fastboot模式

1

adb reboot fastboot

很可惜，他失败了。BL锁无法解锁，我还要再花时间研究。。。

终于复活了！！！

最近blog经常发癫，我还要考试，就停更了好久。

今天我来讲一讲一个Windows的实用小工具：PowerToys

安装、使用

安装的话直接去Microsoft Store就可以：

推荐的功能：

1. 唤醒：这个功能可以调整你的计算机睡眠状态，如永不睡眠，隔一段时间在睡眠等：

2. 命令面板：快捷的公式计算、指令运行：

3. 颜色选择器：如果你对颜色的HEX值特别苦恼，就用这个一件取色！

4. 文本提取器：顾名思义，截图读取文字。

建议使用截图工具而不是 TextExtractor 模块。（文本提取实例）

5. 始终置顶：激活后会在窗口旁出现蓝色框，代表完全置顶
   

其余的自己可以探索，这5个最好用！

随着博客文章数量的增多，我们的博客可能会变得十分缓慢（比如前段时间的我），今天的教程可以让你的博客提速90%！

实操

整改1 扔掉Github Pages

Github Pages真垃圾很慢，看看对比：

还不把Github Pages扔了！Vercel他不香吗！参考：

也可以使用 CF Workers反代，参考：利用Cloudflare Workers搭建镜像网站 | Minecraft-Sep (mc-sep.top)

整改2 域名

参考（有几个提别好的）：

整改3 CDN

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

通俗易懂的解释： 通过IP访问实际资源时，如果CDN上并没有缓存资源，则会到源站请求资源，并缓存到CDN节点上，这样，用户下一次访问时，该CDN节点就会有对应资源的缓存了。

Vercel CDN的优化

• 使用他人的Vercel CDN（自动使用节点）：Vercel CDN:利用CNAME负载均衡实现的Vercel加速CDN (yt-blog.top)
• 在Vercel里使用Hong Kong节点

CF的优化

• 优化选项卡里的能开就开

整改4 图片问题

最拖慢速度二巨头：图片过大，图片源不同一（特别是butterfly系列主题深有体会）

建议统一使用一个图床，或者上传到自己的图床，这里提供两个教程

• CF+Telegraph（维护中）
• Vercel+Bulb

实用教程

免费小型数据库——Vercel Blob初体验

Vercel图床

其次，图片过大可以使用TinyPNG – 智能压缩您的WebP、JPEG和PNG图片 (tinify.cn)或者TinyPNG – Compress WebP, PNG and JPEG images intelligently压缩，是无损压缩，也可以转换为png,jpeg和webp格式。

或者使用Jsdelivr (jsdelivr.net)加速访问托管在github 的图片：

1. 将图片上传到github

2. 在网址栏输入：

   1	https://cdn.jsdelivr.net/npm/你的github用户名/你保存图片的repo/[图片路径]

3. 如果出现图片就代表成功！

整改5 Gulp

Gulp是一个hexo插件，用于压缩js和css文件。

1. 安装：

   1	npm install gulp compress gulp-clean-css gulp-html-minifier-terser gulp-htmlclean gulp-terser --save-dev

2. 创建 gulpfile.js 文件：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

   var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var htmlmin = require('gulp-html-minifier-terser'); var htmlclean = require('gulp-htmlclean'); var terser = require('gulp-terser'); // 压缩js gulp.task('compress', () => gulp.src(['./public/**/*.js', '!./public/**/*.min.js']) .pipe(terser()) .pipe(gulp.dest('./public')) ) //压缩css gulp.task('minify-css', () => { return gulp.src(['./public/**/*.css']) .pipe(cleanCSS({ compatibility: 'ie11' })) .pipe(gulp.dest('./public')); }); //压缩html gulp.task('minify-html', () => { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, //清除html注释 collapseWhitespace: true, //压缩html collapseBooleanAttributes: true, //省略布尔属性的值，例如：<input checked="true"/> ==> <input /> removeEmptyAttributes: true, //删除所有空格作属性值，例如：<input id="" /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的 type="text/css" minifyJS: true, //压缩页面 JS minifyCSS: true, //压缩页面 CSS minifyURLs: true //压缩页面URL })) .pipe(gulp.dest('./public')) }); // 运行gulp命令时依次执行以下任务 gulp.task('default', gulp.parallel( 'compress', 'minify-css', 'minify-html' ))

3. 运行gulp：

   1	hexo g&&gulp

加速你也做的差不多了

结束！

版权所有©MC-Sep.

之前那个Vercel Blob图床太LAJI了，这次换一个新的Cloudflare Pages+Telegraph搭建简易图床！

总今天开始，本站的所有照片都会被托管到我的图床！

本站的图床出现了点小问题，所以图床从今天开始维护，开放时间暂定。

实践

1. 准备好域名，绑定到Cloudflare（后称cf）上，当然你不绑也行，毕竟.pages.dev域名还没有被ban。。。

   

2. fork这个仓库：

3. 进入 CF 的 Workers和 pages页面，点击创建

   

   4. （这里用Pages不是Workers！）选择刚才的仓库，点击部署

   5. 部署完成后进入设置 -> 变量和机密，添加两个值：

      BASIC_USER	后台管理员的用户名
      BASIC_PASS	后台的登陆密码

      后台在 https://你在cf pages的域名/admin (有点丑。。。)

      当然你也可以不设置（个容易被制裁）

   6. 回到 Workers和Pages，选择 KV ，创建命名空间，名字填 img_url （我这里已经搞了）

      

   7. 回到刚才的Pages，进入设置 -> 绑定，添加一个，名字还是img_url，选择刚才的KV

      

   8. 重新部署一下就完成了！可以测试一下，效果还可以awa

   9. （可选）自定义域名的绑定：

      

什么是 Vercel ? Vercel，是一家软件服务企业，掌门人是Guillermo Rauch，2023年4月18日，以170亿人民币的企业估值入选《2023·胡润全球独角兽榜》，排名404。2024年4月9日，Vercel以180亿人民币的企业估值入选《2024·胡润全球独角兽榜》，排名422名。

那么，今天我就叫你如何使用 Vercel 快速上线你的个人网站！

实践

Part1. 导入博客Repo

1. 进入 Vercel ，先注册账号（建议使用Github注册）。

2. 进入Dashboard，点击Add New->Project

3. 进入选择界面，找到你的博客所在的Github仓库，点击一旁的Import，例如我的mc-sep.github.io

4. 进入到配置界面，如果你是Hexo博客（只上传public文件夹内文件的），请不要修改Build and Output Settings和Framework Preset，如果是Hexo（在线部署的），请在Framework Preset中选择Hexo，其他不用动。其余博客的方法可自行查阅。最后点击Deploy

5. 等待部署完成。完成后，点击Continue to Dashboard

Part2. 绑定域名

请在你的域名托管商内添加一个CNAME记录：cname-china.vercel-dns.com或者A记录：76.76.21.21或76.76.21.98，如图：

接着去到你创建好的Project，点击Settings->Domains，再上面输入你的域名！

如果你配置错了，可能就会：

你也可以使用Vercel的自带域名（被ban了）：

1

你喜欢的名字.vercel.app

Part3. 安全系统

1. 进入Settings->Security

2. 可以将Attack Challenge Mode打开（通过向每位访客显示验证质询来防止恶意流量），效果就不展示了。

3. 下面的都可以打开。

Part4. 优化

可以提出建议！我可能会采纳！

• 进入Settings->Functions，可将服务器改为香港的（好像小日子的更快），如：

总结

Vercel挺好用的。

版权所有©MC-Sep 2023~2024.

最近我在查Vercel的Usage的时候，发现了这个东西：

由于影响不是很大，为了他人隐私（也不能不给他机会改正吧），就不“公开处刑”了。

那么，什么是DDos？它会对博客造成什么威胁？今天我就讲讲DDos攻击原理与防护方法。

原理

DDoS全称Distributed Denial of Service，意思为“分布式拒绝服务”，即利用大量合法的分布式服务器对目标发送请求，从而导致正常合法用户无法获得服务。

就比如，一个健身房生意十分火爆，那些“壮汉”看不下去了，就召集n个人进到他店，但是就是不健身，又堵住健身器材。这个商家看似很忙很火爆，其实啥也不是，同时，真正想要健身的顾客也没得到接待，因为店里挤得进不去。

现在的DDoS让服务不仅可以直接阻断，还能够通过影响服务的客户体验实现攻击。他又这些特点：

1. 造成“供不应求”现象。通过控制大量攻击主机同时连接网站端口，制造大流量无用数据，造成通往被攻击主机的网络拥塞，使被攻击主机无法正常和外界通信。
2. 傀儡攻击。傀儡就是可以被黑客操控的机器，经常被用为DDos攻击，但是傀儡数量十分多，使后端无法准确辨识。
3. 网络层攻击。通过发送伪造源IP的TCP数据包发送SYN或ACK包、发送包含错误设置的地址值等攻击方式，耗尽服务器资源，导致服务器拒绝访问。
4. CC攻击。黑客借助代理服务器生成指向受害主机的合法网页请求，实现DDoS和伪装就叫CC（全名Challenge Collapsar）。傀儡CC攻击是黑客使用CC攻击软件，控制大量傀儡发动攻击，模拟正常用户访问网站的请求，伪造成合法数据包。

DDos攻击原理如下：

抵御

要抵御DDos攻击，可限制同时间访问量，如：

Cloudflare里可以设置。

总结

老是有人棍去攻击你的网站，很正常，但是“不怕一万，只怕万一”，赶紧学起来！！

版权所有©MC-Sep 2024.

统计截止于 2024.9.30 15:00:00

你好，朋友！

导语

2024.9.1，我们正式愉快的开学了！（艹）在这愉快的一个月，我们的好朋友们都在干嘛呢？让我们一起看看吧！

博客9月统计

博客基础信息

因为开学了，全部虚了！

博客排名

“话痨”

在本月评论最多的是谁呢？？

本月精选文章

科技类博客

生活类博客

其他文章

本月 Top 3

结语

这一个月下来，我们要以最热烈的掌声欢迎本月明星——Cquitra！

不过他的博客还在建设，所以你们就看不了了（我教的awa）

MC-Sep 博客月报 | 总第一期 | 萌ICP备 20249023 号 | Sep ICP备20110104 号 | 总主编/责任编辑：MC-Sep

版权所有©MC-Sep 2023~2024.

亲爱的访问者们：

你们好！
2024年9月2日下午，Deta Space发出声明，Deta Space将于2024年10月17日的日落时分关闭，下面是具体的信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Dear Deta Community,

After an incredible run, we've made the difficult decision to shut down Deta Space. You can continue to login until sunset on October 17, 2024, at which point we will start deleting all Horizons, apps (hosted or installed) and data in Collections.

We've built tools for exporting your data (and code for developers), with tutorials available in the docs.

We wanted to thank you for joining the journey so far. Everything we've done wouldn't have been possible without our community, mods, investors, and friends. We hope you'll stick around for what's next.

What's next for Deta?
The team is working on what we think is our most exciting product yet: Deta Surf. We can't wait to onboard people in the very near future. If you were a fan of Deta's past products, we'd love if you popped by.

Why are we sunsetting Space?
As a team, we want computing on the web to be more personal, powerful and fun. Space (& our earlier products) were built in this vein. But they didn't really hit enough for us to continue. We're a startup and at some point, we have to move on from good (& bad) products in search of really great ones.

We're still searching, and the team is working on Deta Surf. We've been pretty quiet about it, but it takes learnings from everything we've built. We'd love if you checked it out.

What about my account?
You can export all your code and data. You can decide if you want to delete your account entirely or be kept in the loop about Deta Surf .

How long will the service be available?
The service will be available until October 17, 2024. After that, all Horizons, apps (hosted or installed) and data in Collections will be deleted.

由于本人的 Waline 评论系统部署在 Deta Space，所以从2024.9.12开始，本人开始通过Netlify和MongoDB搭建Twikoo评论系统。本人同样尝试过使用Vercel、Netlify+Leancloud搭建Waline评论系统，评论系统搭建成功，但是导入数据时发生了错误：

1

500: Class or object doesn't exists. [404 GET https://*********.api.lncldglobal.com/1.1/classes/Counter]

故此博客将从Waline改为Twikoo为主要系统，对于之前的评论数据，我们别无选择。
对此，请所有人于2024.10.17日前转至Twikoo评论系统，10.17日后将更换全新数据库！

这几天我不是搞了一个图床吗？

他的配置还不错的：

今天就teach你怎么搞！

实践

1. 准备一个Vercel账号，可以直接用Github登录

2. 创建存储库（点击快速创建）：Create

3. 在接下来的页面中，名字自己填，然后 Add 一个 Blob Store，确定即可

4. 直到满屏烟花，点击 Continue to Dashboard。

5. 点击 Settings -> Environment Variables，最下面找到名为 BLOB_READ_WRITE_TOKEN 的环境变量，点击复制，格式是这样的：

1

vercel_blob_rw_*************************************

6. 回到 Settings -> Functions，将区域改为 Hong Kong (East) – hkg1 或 Tokyo, Japan (Northeast) – hnd1

7. 回到 Dashboard 主页面，点击这个进入创建的Github Repo:

8. 打开文件 .env.example，将复制的内容粘贴在末尾，格式如下：

1

BLOB_READ_WRITE_TOKEN=vercel_blob_rw_*******************************

9. 打开 [Main Blob Storage] / app / page.tsx，修改里面的内容为中文（建议保留原站链接），可参照我的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

import Image from 'next/image'
import Link from 'next/link'
import ExpandingArrow from '@/components/expanding-arrow'
import Uploader from '@/components/uploader'
import { Toaster } from '@/components/toaster'

export default function Home() {
  return (
    <main className="relative flex min-h-screen flex-col items-center justify-center">
      <Toaster />
      <Link
        href="https://vercel.com/templates/next.js/blob-starter"
        className="group mt-20 sm:mt-0 rounded-full flex space-x-1 bg-white/30 shadow-sm ring-1 ring-gray-900/5 text-gray-600 text-sm font-medium px-10 py-2 hover:shadow-lg active:shadow-sm transition-all"
      >
        <p>🎉使用Vercel免费搭建🎉</p>
        <ExpandingArrow />
      </Link>
      <h1 className="pt-4 pb-8 bg-gradient-to-br from-black via-[#171717] to-[#575757] bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl">
        MC-Sep 免费网盘
      </h1>
      <div className="bg-white/30 p-12 shadow-xl ring-1 ring-gray-900/5 rounded-lg backdrop-blur-lg max-w-xl mx-auto w-full">
        <Uploader />
      </div>
      <p className="font-light text-gray-600 w-full max-w-lg text-center mt-6">
        <Link
          href="https://vercel.com/blob"
          className="font-medium underline underline-offset-4 hover:text-black transition-colors"
        >
          Vercel Blob
        </Link>{' '}
        Web. Built with{' '}
        <Link
          href="https://nextjs.org/docs"
          className="font-medium underline underline-offset-4 hover:text-black transition-colors"
        >
          Next.js App Router
        </Link>
        .
      </p>
      <div className="sm:absolute sm:bottom-0 w-full px-20 py-10 flex justify-between">
        <Link href="https://vercel.com">
          <Image
            src="/vercel.svg"
            alt="Vercel Logo"
            width={100}
            height={24}
            priority
          />
        </Link>
        <Link
          href="https://github.com/vercel/examples/tree/main/storage/blob-starter"
          className="flex items-center space-x-2"
        >
          <Image
            src="/github.svg"
            alt="GitHub Logo"
            width={24}
            height={24}
            priority
          />
          <p className="font-light">Github</p>
        </Link>
      </div>
    </main>
  )
}

10. 保存后，系统会重新部署一次，回到 Settings -> Domains，添加你的域名（确保你的域名托管商已经添加记录为A:76.76.21.98 的记录，Add 即可。

11. 完工！

总结

Vercel Blob是一个不错的存储系统，对Hobby计划用户很友好。

如果你的 hexo 博客只是普通的搭建完成，那么也会缺少一些新意。下面是一些实用的hexo插件。

hexo插件集

hexo-abbrlink

1. 安装：

1

npm install hexo-abbrlink --save

2. 当你hexo g时，这个插件会对未生成abbrlink的文章中的front matter里添加这个东西（据说此种格式有利于SEO优化）：

1

abbrlink: *****（随机数字）

3. 也可以自定义，尽量使用字母和数字，空格用-替代，提升链接可读性。

1

abbrlink: 我的文章-my-post-*****

hexo-encrypt

1. 安装

1

npm install --save hexo-blog-encrypt

2. 在front matter里输入password: 你的密码，如：

1

password: hello

3. 那么在hexo中就是这样的画面：

4. 可以添加更多，如：

1
2
3
4
5
6
7
8
9
10

---
title: Hello World
date: 2016-03-30 21:12:21
password: 114514
abstract: 有东西被加密了, 请输入密码查看. //系统信息
message: 您好, 这里需要密码. //展示的信息
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试. //密码错误
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容. //hash解密错误
---
 

或者在_config.yml里添加这些东西：

1
2
3
4
5
6
7
8

# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  theme: xray
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
 

hexo-generator

1. 安装（先第一个后第二个）

1

npm uninstall hexo-generator-index --save

1

npm install hexo-generator-index-pin-top --save

2. 在front matter里添加top: ***数字越大文章越靠前

1

top: 114514

hexo-hide-posts

1. 安装

1

npm install hexo-hide-posts --save

2. 默认 hidden: true 用于隐藏，可以修改成false

hexo-generator-feed

1. 安装

1

npm install hexo-generator-feed --save

2. 当你hexo d时会生成用于rss订阅，默认只获取文章摘要或者前140个字符

hexo-filter-nofollow

1. 安装

1

npm i hexo-filter-nofollow --save

2. 可排除自定义域名。

hexo-submit-urls-to-search-engine

1. 安装

1

npm install --save hexo-submit-urls-to-search-engine

2. hexo d时自动提交链接到搜索引擎。提交效果不错，但百度放出页面的速度依旧感人，谷歌、必应、雅虎的收录速度很快。

markdown-it-ruby 与 hexo-pinyin-ruby-marks

1. 安装

1

npm install markdown-it-ruby --save

1

npm install hexo-pinyin-ruby-marks

2. 在_config.yml中输入以下内容：

1
2
3

markdown:
  plugins:
    - markdown-it-ruby

3. 在文章中输入以下内容：

1

{% pinyin 初音未来|chu1 yin1 wei4 lai2 %} 

4. 即可看到文字上的拼音注音效果

hexo-pangu

1. 安装

1

npm install hexo-pangu

2. 送给所有中英混输必须加空格的强迫症患者。（但愿跟其它插件不存在冲突）

hexo-broken-links-checker

1. 安装

1

npm install hexo-broken-links-checker --save-dev

2. 检查

1

npx hexo check-links

3. 等待一会就会出现：

1
2

WARN  The following links are broken:
   - https://

hexo-tag-qrcode

1. 安装

1

npm i hexo-tag-qrcode

2. 在文章中输入：

1

{% qrcode "自定义内容" %}

后记

文章中的插件可以评论提示我你喜欢的插件，我可能会采纳！

版权所有©MC-Sep 2024.

Part1.框架Hexo

2023年的一天，我的好基友serverdream找到我说：“有兴趣搭建一个blog吗？我告诉你！”于是我便跟着他学起来Hexo，这也是我的博客始发站。

Part 2.第一代个人博客：Fluid

2023年10月，我找到了一个看着不错的hexo主题：Fluid：

我使用了Github Pages，域名仍是有效的：

1

https://sepiatruck34735.github.io/

Part3.Serpblog的建设

同月，serverdream提出一个想法：“我们一起做一个C++的博客，让更多人学把”，我也答应了，历时三个月，也是把Serpblog建设好了：

之后我们也搞了交流群，也有人加入了学习，但在2024年2月，群员 Crewwhite 发现来来去去就那几个人看，我便有了想放弃的想法。

2024年同月，因学业问题，Serpblog迎来“大休假”。现在的Serpblog已超2000次访问，链接仍有效：

1

https://serpblog.github.io/

Part4.第二代个人博客：Aurora

这是最没人气的一次更新，才用了2天就不用了（悲）

Part5.第三代个人博客：Anzhiyu

从Serpblog受到启发，开始自己搭建anzhiyu主题。

2024年3月，我完成了我的主题，并开始了三个月不间断的更新：

2024年4月，面对慢成Dog的Github Pages，我也发现了Gitee Pages、Cloudflare Pages和Codeberg Pages，注册了三个域名。

直到2024年6月，我发现了一个新主题：Solitude

对比官方已经停更的Anzhiyu，Solitude主题更有发展性。犹豫几天，也是放弃了Anzhiyu，把博客数据全部转移了。

1
2

https://minecraftsep.pages.dev
https://minecraftsep.github.io

Part6.第四代个人博客：Solitude

2024年6月底，我完成了这个博客的建设，也就是你们现在看到的。

托管方我换成了Vercel，域名更换为mc-sep.js.cool，详见换线界面

Part7.总结

这一年博客磕磕绊绊，终于算是稳定了。

这是我第一次写年度总结，希望这不是最后一次！

版权所有©MC-Sep 2024.

要开学了！你们的作业怎么样了？反正我没写完

回归正题，有些人是没有自己的域名的（比如我），所以想让网站访问速度快就不行了……

今天我就整理了常见的免费域名，分享给大家。

举几个栗子

1. Freenom

这个在2023年就停止使用了，原因是部分免费域名被用来做#$网站，这还是很可惜的，因为这个网站可以注册顶级域名，如.tk，已经注册过的网站也无法访问了。

地址：https://www.freenom.com/zh/index.html?lang=zh

2. Willin Wang Free Domains

这个我在我的部分文章里出现过，也挺不错的。

可注册域名：

1

***.js.cool（墙裂推荐）、***.sh.gg、***.log.lu、***.css.fund、***.kaiyuan.fund、***.v0.chat、***.憨憨.我爱你

优点：访问快，使用方便
缺点：要审核，多次因为重复用途而注册会被拒绝（拒绝后就浪费了一次注册机会），比如：

地址：https://domain.willin.wang/

方法：

1. 打开链接，点击右上角用户图标
2. 点击使用Github登录，在Github里完成授权
3. 进入控制台，会发现一个都不能创建，我们要进入 https://github.com/willin 后，点击Follow
4. 返回控制台刷新后会发现可以创建了
5. 点击创建，输入名字，填写好域名记录，要部署到哪里就按照部署商的提示填，注意CDN Proxy开不开都行，同意隐私条款，创建即可
6. 等待审核，通过后会有这个画面：

3. Namecheap

不太行，因为这是为外国学生开放的（免费），要验证外国邮箱，有的可以逝世看。

可注册域名：

1

***.me（Free）、***.com、***.io、***.tech、***.website

优点：免费好用
缺点：没外国邮箱用不了

地址：https://nc.me/

4. CO.UK

英国的免费域名，首年免费，但是进去很慢。

可注册域名：

1

***.co.uk、***.uk

有点：免费顶级域名
缺点：仅首年免费

地址：https://www.names.co.uk/

5. PP.UA

可注册域名：

1

***.pp.ua

优点：长期免费
缺点：No

地址：https://nic.ua/en/domains

6. EU.ORG

由 United Kingdom 的黑客组织运营，提供免费域名注册，虽然界面简陋，但能注册且真正免费，人工审核时间相对长。

可注册域名：

1

***.eu.org

优点：长期免费
缺点：审核时间长

地址：https://nic.eu.org

7. JS.ORG

不提供自定义。只解析运行于Github Pages上的内容（也可以是自己的链接）

可注册域名：

1

***.js.org

优点：长期免费
缺点：普通用户不太好注册

地址：https://js.org

8. One

one.com 针对新冠疫情，推出 one 域名第一年免费，现在也已经变成了购买主机服务后的增值附加服务了，仍旧是免费1年，不是很推荐。

可注册域名：

1

***.one

优点：顶级域名
缺点：要买主机后才有

地址：https://www.one.com

总结

这就是我推荐的几个免费域名，如果你也有更好的可以在评论区留言反馈，我也会收录的。

版权所有©MC-Sep 2024.

有时候，一些问题让我们困扰：有人刷网站流量，相加IP黑名单不知道怎么加？很讨厌日本排核污水，想要禁止国外访问？……

那么，Cloudflare Workers可以轻松解决这个问题！

实践

1. 准备你的Cloudflare账号
2. 来到主页 -> Workers 和 Pages，点击创建：

3. 选择创建Workers
4. 输入名字，其他不用管，点击部署：

5. 进入控制台，选择编辑代码（右上角）：

6. 将里面的代码全部删除，粘贴下列代码并做好修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

// 反代目标网站（修改）
const upstream = 'google.com'

// 反代目标网站的移动版（没有可不填）
const upstream_mobile = 'google.com'

// 访问区域黑名单（按需设置，使用国家简称，如CN,JP,US等）
const blocked_region = ['TK']

// IP地址黑名单（按需设置）
const blocked_ip_address = ['0.0.0.0', '127.0.0.1']

// 路径替换（你的网站）
const replace_dict = {
'$upstream': '$custom_domain',
'//archiveofourown.org': ''
}

addEventListener('fetch', event => {
event.respondWith(fetchAndApply(event.request));
})

async function fetchAndApply(request) {

const region = request.headers.get('cf-ipcountry').toUpperCase();
const ip_address = request.headers.get('cf-connecting-ip');
const user_agent = request.headers.get('user-agent');

let response = null;
let url = new URL(request.url);
let url_host = url.host;

if (url.protocol == 'http:') {
    url.protocol = 'https:'
    response = Response.redirect(url.href);
    return response;
}

if (await device_status(user_agent)) {
    var upstream_domain = upstream;
} else {
    var upstream_domain = upstream_mobile;
}

url.host = upstream_domain;

if (blocked_region.includes(region)) {
    response = new Response('Access denied: WorkersProxy is not available in your region yet.', {
        status: 403
    });
} else if(blocked_ip_address.includes(ip_address)){
    response = new Response('Access denied: Your IP address is blocked by WorkersProxy.', {
        status: 403
    });
} else{
    let method = request.method;
    let request_headers = request.headers;
    let new_request_headers = new Headers(request_headers);

    new_request_headers.set('Host', upstream_domain);
    new_request_headers.set('Referer', url.href);

    let original_response = await fetch(url.href, {
        method: method,
        headers: new_request_headers
    })

    let original_response_clone = original_response.clone();
    let original_text = null;
    let response_headers = original_response.headers;
    let new_response_headers = new Headers(response_headers);
    let status = original_response.status;

    new_response_headers.set('cache-control' ,'public, max-age=14400')
    new_response_headers.set('access-control-allow-origin', '*');
    new_response_headers.set('access-control-allow-credentials', true);
    new_response_headers.delete('content-security-policy');
    new_response_headers.delete('content-security-policy-report-only');
    new_response_headers.delete('clear-site-data');

    const content_type = new_response_headers.get('content-type');
    if (content_type.includes('text/html') && content_type.includes('UTF-8')) {
        original_text = await replace_response_text(original_response_clone, upstream_domain, url_host);
    } else {
        original_text = original_response_clone.body
    }

    response = new Response(original_text, {
        status,
        headers: new_response_headers
    })
}
return response;
}

async function replace_response_text(response, upstream_domain, host_name) {
let text = await response.text()

var i, j;
for (i in replace_dict) {
    j = replace_dict[i]
    if (i == '$upstream') {
        i = upstream_domain
    } else if (i == '$custom_domain') {
        i = host_name
    }
    
    if (j == '$upstream') {
        j = upstream_domain
    } else if (j == '$custom_domain') {
        j = host_name
    }

    let re = new RegExp(i, 'g')
    text = text.replace(re, j);
}
return text;
}


async function device_status (user_agent_info) {
var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v < agents.length; v++) {
    if (user_agent_info.indexOf(agents[v]) > 0) {
        flag = false;
        break;
    }
}
return flag;
}

7. 点击右上角部署，等待几分钟即可出现反代网站：

1

https://你填的名字.账户名（邮箱@前的东西）.workers.dev

总结

CloudFlare Workers相当于免费给我们多了IP保护，并且每日有10w的请求量，足够一日使用，还自带DDos防护，一举两得。

版权所有©MC-Sep 2024.

众所周知，bing的每日一图都特别beautiful，在我们的blog里也起到了很好的装饰作用。那就有人问了，HOW TO GET IT？今天我就来教你们构建属于自己的bing每日一图API！

实践

Part1. 了解bing每日一图链接规律

就拿今天的做例子：https://cn.bing.com/th?id=OHR.HoodoosBryce_ZH-CN8398575172_1920x1080.jpg

获取到的json内容如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{
    "images": [
        {
            "startdate": "20240730",
            "fullstartdate": "202407301600",
            "enddate": "20240731",
            "url": "/th?id=OHR.HoodoosBryce_ZH-CN8398575172_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp",
            "urlbase": "/th?id=OHR.HoodoosBryce_ZH-CN8398575172",
            "copyright": "石林，日落点，布莱斯峡谷国家公园，犹他州，美国 (© Tim Fitzharris/Minden Pictures)",
            "copyrightlink": "https://www.bing.com/search?q=%E5%B8%83%E8%8E%B1%E6%96%AF%E5%B3%A1%E8%B0%B7%E5%9B%BD%E5%AE%B6%E5%85%AC%E5%9B%AD&form=hpcapt&mkt=zh-cn",
            "title": "这里有“胡图”吗？",
            "quiz": "/search?q=Bing+homepage+quiz&filters=WQOskey:%22HPQuiz_20240730_HoodoosBryce%22&FORM=HPQUIZ",
            "wp": true,
            "hsh": "1cabac064d004edabc8b0d2e375052ae",
            "drk": 1,
            "top": 1,
            "bot": 1,
            "hs": []
        }
    ],
    "tooltips": {
        "loading": "正在加载...",
        "previous": "上一个图像",
        "next": "下一个图像",
        "walle": "此图片不能下载用作壁纸。",
        "walls": "下载今日美图。仅限用作桌面壁纸。"
    }
}

我们就可以猜出其中的规律了：

https://cn.bing.com + 上面的”url”，构成了该链接。

Part2. 构建API

我们使用GET方法构建我们的API，名称为bing.php，也可以从 https://mc-sep.js.cool/api/bing.php 下载！

1. 判断是否是随机调用（我们的API可以指定日期）

1
2
3

<?php
if ($_GET['rand']==='true') {
  $gettime = rand(-1,7);

2. 如果不是，则指定日期

1
2
3
4
5
6
7
8

else{
  $gettimebase = $_GET['day'];
  if (empty($gettimebase)) {
    $gettime = 0;
  }else{
    $gettime = $gettimebase;
  }
}

3. 获取Bing Json详细信息，转换为PHP数组，再提取基础URL

1
2
3

$json_string = file_get_contents('https://www.bing.com/HPImageArchive.aspx?format=js&idx='.$gettime.'&n=1');
$data = json_decode($json_string);
$imgurlbase = "https://www.bing.com".$data->{"images"}[0]->{"urlbase"};

4. 判断是否制定了图片大小，否则默认1920 * 1080

1
2
3
4
5

if (empty($imgsizebase)){
  $imgsize = "1920x1080";
}else{
  $imgsize = $imgsizebase;
}

5. 建立完整URL

1

$imgurl = $imgurlbase."_".$imgsize.".jpg";

6. 获取其他信息并判断是否需要

1
2
3
4
5
6

$imgtime = $data->{"images"}[0]->{"startdate"};
$imgtitle = $data->{"images"}[0]->{"copyright"};
$imglink = $data->{"images"}[0]->{"copyrightlink"};
if ($_GET['info']==='true') {
  echo "{title:".$imgtitle.",url:".$imgurl.",link:".$imglink.",time:".$imgtime."}";
}

7. 不是则直接返回

1
2
3

else{
  header("Location: $imgurl");
}

8. 完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?php
if ($_GET['rand']==='true') {
  $gettime = rand(-1,7);
}else{
  $gettimebase = $_GET['day'];
  if (empty($gettimebase)) {
    $gettime = 0;
  }else{
    $gettime = $gettimebase;
  }
}
$json_string = file_get_contents('https://www.bing.com/HPImageArchive.aspx?format=js&idx='.$gettime.'&n=1');
$data = json_decode($json_string);
$imgurlbase = "https://www.bing.com".$data->{"images"}[0]->{"urlbase"};
$imgsizebase = $_GET['size'];
if (empty($imgsizebase)){
  $imgsize = "1920x1080";
}else{
  $imgsize = $imgsizebase;
}
$imgurl = $imgurlbase."_".$imgsize.".jpg";
$imgtime = $data->{"images"}[0]->{"startdate"};
$imgtitle = $data->{"images"}[0]->{"copyright"};
$imglink = $data->{"images"}[0]->{"copyrightlink"};
if ($_GET['info']==='true') {
  echo "{title:".$imgtitle.",url:".$imgurl.",link:".$imglink.",time:".$imgtime."}";
}else{
  header("Location: $imgurl");
}

总结

可以去参考一下API接口：

• https://api.kdcc.cn
• https://api.isoyu.com/bing_images.php
• http://api.muvip.cn//api/bing/index.php?rand=false&day=0&size=1920x1080&info=false
• https://source.unsplash.com/random
• https://api.dujin.org/bing/1366.php
• https://picsum.photos/

版权所有©MC-Sep 2024.

Twikoo作为一种轻量方便的评论系统，一度被许多博客使用。此文基于原文继续添加一个评论系统，让你可以顺利装逼！(bushi)

Part1. 前端配置

1. 找到评论并配置：

1
2
3
4
5
6
7
8
9
10
11
12
13

# 评论
# comment
# getting start: 
comment:
  use: waline,twikoo # waline, twikoo, valine, artalk
  commentBarrage: true # 热评开关 / Hot comment switch
  lazyload: true # 懒加载
  count: true # 评论数展示
  pv: false # 是否使用評論統計頁面訪問
  avatar: https://cravatar.cn # Gravatar link
  newest_comment:
    enable: ture
    storage: .5 # 缓存时间 1: 1天 / .5 : 半天 / Cache time 1: 1 day .5 : half a day

2. 找到Twikoo评论信息，不要关闭，等下还要使用：

1
2
3
4
5
6
7
8

# twikoo 配置信息
# twikoo settings
twikoo:  # https://twikoo.js.org/
  envId: ************************ # url
  region:  # 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
  style: true # Use custom styles when turned on / 开启后使用自定义样式
  accessToken: # AccessToken
  option: # twikoo option

1
2
3
4
5
6
7
8
9
10
11

<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.36/dist/twikoo.all.min.js" integrity="sha384-4KfOjEinLSkv1i1J8TzlkC/RTnuiLoR1OLerVgjEKoH5djYtbf7mzEFsz9p3nfuA" crossorigin="anonymous"></script>
<script>
twikoo.init({
  envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
  el: '#tcomment', // 容器元素
  // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
  // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
  // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
})
</script>

Part2. 配置后端

①使用腾讯云服务器

1. 进入云开发CloudBase活动页面，滚动到“新用户专享”部分，选择适合的套餐，点击“立即购买”，按提示创建好环境。

2. 进入云开发控制台
3. 进入环境-登录授权，启用“匿名登录”
4. 进入环境-安全配置，将网站域名添加到“WEB安全域名”
5. 进入环境-云函数，点击“新建云函数”
6. 函数名称请填写：twikoo，创建方式请选择：空白函数，运行环境请选择：Nodejs 16.13，函数内存请选择：128MB，点击“下一步”
7. 清空输入框中的示例代码，复制以下代码、粘贴到“函数代码”输入框中，点击“确定”

1

exports.main = require('twikoo-func').main

8. 创建完成后，点击“twikoo”进入云函数详情页，进入“函数代码”标签，点击“文件 - 新建文件”，输入 package.json，回车
9. 复制以下代码、粘贴到代码框中，点击“保存并安装依赖”

1

{ "dependencies": { "twikoo-func": "1.6.36" } }

②使用Vercel

1. 申请MongoDB账号，参考https://twikoo.js.org/mongodb-atlas.html

2. 点击快速部署：

3. 输入你喜欢的名字，点击Create:

4. 满屏烟花时点击Continue to Dashboard:

5. 点击Settings->Environment Variables，变量添加MONGODB_URI，内容则是你获取到的mongodb获取接口，点击Save：

6. 点击Domains，确保你的域名已添加内容为cname-china.vercel-dns.com的CNAME记录，输入你的域名，点击Add，等待后即可访问：

7. 回到主题配置文件，修改：

1
2
3
4
5
6
7
8

# twikoo 配置信息
# twikoo settings
twikoo:  # https://twikoo.js.org/
  envId: my-twikoo.js.cool # url
  region:  # 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
  style: true # Use custom styles when turned on / 开启后使用自定义样式
  accessToken: # AccessToken
  option: # twikoo option

8. 保存，在当前目录打开cmd，输入：

1

hexo cl&&hexo g&&hexo s

9. 检查无误后即可。

③普通服务器部署

1. 服务端下载安装 Node.js
2. 安装 Twikoo server: npm i -g tkserver
3. 根据需要配置环境变量，所有的环境变量都是可选的

4. 启动 Twikoo server: tkserver
5. 访问 http://服务端IP:8080 测试服务是否启动成功
6. 配置前置代理实现 HTTPS 访问（可以用 Nginx、负载均衡或 Cloudflare 等）
7. 到博客配置文件中配置 envId 为 https:// 加域名（例如 https://twikoo.yourdomain.com）
8. 数据默认在 data 目录，请注意定期备份数据

总结

天上不会掉馅饼！！！

版权所有©MC-Sep

预计完成时间43分钟，请放心食用！

前言：

众所周知，一个博客是不能没有评论的！

2024.5.2：上线了waline评论系统

2024.5.9：关闭了匿名评论功能

2024.5.14：启动了双评论，另一个是twikoo

2024.5.18：关闭了双评论

2024.6.14：重新启动了双评论

但是很多人不知道用什么评论……

所以，今天还是老样子出教程！

实践

Part1:了解主流的评论系统

Part2:主题配置文件

1. 修改主题配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13

# 评论
# comment
# getting start: https://solitude.js.org/comments/comment
comment:
  use: waline # use
  commentBarrage: true # 热评开关 / Hot comment switch
  lazyload: true # 懒加载
  count: true # 评论数展示
  pv: false # 是否使用評論統計頁面訪問
  avatar: https://cravatar.cn # Gravatar link
  newest_comment:
    enable: ture
    storage: .5 # 缓存时间 1: 1天 / .5 : 半天 / Cache time 1: 1 day .5 : half a day

如果使用双评论，修改：

1

use: 你的评论1,你的评论2 # waline, twikoo, valine, artalk

随后修改Waline的配置：

1
2
3
4
5

# waline settings
waline: # https://waline.js.org/
  envId:  # 你的部署环境
  pageview: false # 懒加载
  option: # 更多设置，可以去官网找

Part3:配置评论

教程出自：Waline

特色：

• 轻量级与高性能：Waline优化了代码结构，确保快速加载和响应，不增加网站负担。
• 安全性：系统内置了多种安全机制，如垃圾邮件过滤（Akismet支持）、IP限制等，保护您的网站免受恶意评论的侵扰。
• Markdown 支持：全面支持Markdown语法，让用户可以方便地插入代码、链接、表情等元素，让评论更加生动。
• 多平台兼容：不仅有前端组件@waline/client，还有多种服务器端解决方案，如Vercel、Deta、CloudBase等，满足不同开发需求。

配置：

准备——配置Leancloud

1. 进入Leancloud国际版进行注册并进入控制台：

2. 点击左上角创建应用，选择开发板（免费）

3. 进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key，记录它们以便后续使用。

方式1——Vercel

点击一键部署：

1. 点击上面的按钮，输入你喜欢的名字，点击Create，等待部署：

2. 之后满屏的烟花，点击Continue to Dashboard

3. 点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。

4. 回到开头的免费域名，注册一下并关注作者，可以获得5免费域名，点击创建：

5. 输入名字，按如下填写：

6. 你就等待审核，预计1小时~2天

7. 审核完成后会显示编辑按钮，回到Vercel，点击Domains：

8. 填写你申请的域名，点击Add：

9. 等待他解析，然会就可以访问了！

方式2——Deta（已失效）

Deta 是一个可免费使用的 Serverless 部署平台。我们可以快速的将 Waline 部署到 Deta 平台上。

在 deta.space 的官网中指出：

1
2
3
4
5
6

Dear Deta Community,
After an incredible run, we've made the difficult decision to shut down Deta Space. You can continue to login until sunset on October 17, 2024, at which point we will start deleting all Horizons, apps (hosted or installed) and data in Collections.

We've built tools for exporting your data (and code for developers), with tutorials available in the docs.

We wanted to thank you for joining the journey so far. Everything we've done wouldn't have been possible without our community, mods, investors, and friends. We hope you'll stick around for what's next.

Deta Space 将于 2024.10.17 下午日落 关闭，请所有使用此方式部署的用户进入Waline控制台 -> 管理 -> 导入导出 -> 导出 导出你的数据！

方式3——Netlify

Netlify 是知名的静态网站部署服务提供商，Edge Functions 是 Netlify 平台推出的一种服务，它允许在网站的边缘节点上运行 JavaScript 代码。

1. 点击 Fork Waline的Netlify数据库。

2. 进入 https://app.netlify.com ，注册账号后登录控制台，点击Add new site -> Import an exist project，选择刚刚Fork的数据库（先绑定Github）。(不要着急Deploy ！！！)

3. 部署之前添加环境变量，以 LeanCloud 部署服务为例，我们在这里增加上 Waline 需要的数据库服务环境变量。点击底部的 Deploy 开始部署网站。

4. 部署完成，可通过一下的域名访问：

1

https://你设置的名称.netlify.app/.netlify/functions/comment

不推荐的其他方式：

1. Railway的免费额度不足以一个月连续使用……
2. Zeabur需要购买（5$每月），否则计划会在5天内被结束……

总结

Waline轻量方便，不亚于Twikoo，博客评论选择它也挺不错的！

版权所有©MC-Sep。

预计完成时间90分钟，请放心食用！

前言：

最近我收到了亿点点私信：

所以！今天我就出教程吧！！！

实践s

Part1.准备活动

1. 下载Node.js

3. 下载完毕后打开cmd，输入

1

npm install hexo-cli -g

等待下载，注意期间不要按Ctrl+C，否则会导致进度取消！

下载完毕后：

4. 打开任意一个空文件夹的cmd，分别输入（每输入一行等待）：

1
2
3

hexo init blog
cd blog
npm install

• hexo init blog：安装博客到blog文件夹里
• npm install：安装依赖

6. 到这里，你的博客已经初步成型：

Part2: 博客配置文件和主题配置文件的认识

博客配置文件是这个东西：

打开后的东西：

• title: 你的博客标题
• subtitle: 你的博客副标题
• description: 你的博客介绍
• author: 博客作者名字
• language: 语言，可以选择en，zh-CN和zh-TW
• timezone: 时区，建议填Asia/Shanghai
• url: 你的博客地址，必须填对！否则站内图片将会加载出问题
• theme: 主题名字，全部是小写

其余的可以不用配置。

主题配置文件请见你选择的主题的官方文档。

Part3: 基本命令

• hexo c:清理博客缓存
• hexo s:启动本地服务器，可以从http://localhost:4000/访问
• hexo g:生成博客主文件，保存至public文件夹内，以后上传到Github要用
• hexo d:通过git的方式上传到Github

Part4: 安装&使用主题

可以前去Hexo Themes挑选你喜欢的主题！

不懂得如何安装的可以加入我的QQ群或加我QQ3630179822或下方留言！

Part5: 上传到Github

1. 打开你的博客源文件，打开cmd，输入：

1

hexo g

等待生成博客源文件。

2. 打开github，如下图：

3. 点击，如下图：

• ：你的邮箱

• ：你的密码

• ：你的用户名（好好填！以后你的网站要用）

• ：你是否接收Github发送的活动通知

然后他们检查你的链接安全性，如下图:

情况1：直接通过

情况2：如下图

按照提示完成即可。

4. 然后就进入Github主页面了：

点击

第一步

第二步（描述）

第三步

最后点Create repository。

5. 进入仓库页面：

点Add file➡Upload files。

之后的页面：

将之前讲的public文件夹打开，把全部文件拖进去。（当然你也可以用Github Desktop）

最后点Commit Changes。

6. 等待几分钟，就可以通过下面的地址访问了！

1

https://你的用户名.github.io/

总结

Hexo是一个很不错的博客框架，适合绝大部分用户。

版权所有©Minecraft-Sep。

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

例子

Example：登录界面

项目说明

利用localstrange做一个登录、注册页面，可以立即注册和登录。

项目图片

如果你有服务器，将数据存储在服务器上是不二之选。但是没有服务器，我们也可以通过一下方法完成此操作。

思路

1. 确定临时变量：登录、注册的账号密码，状态

2. 明确如何调用。

过程

登录：

1. HTML样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
  }
  .container {
    width: 300px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  h2 {
    text-align: center;
  }
  label {
    font-weight: bold;
  }
  input[type="text"],
  input[type="password"],
  button {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    box-sizing: border-box;
  }
  button {
    background-color: #4caf50;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>

<div class="container">
  <h2>Login</h2>
  <form id="loginForm">
    <label for="loginUsername">Username:</label>
    <input type="text" id="loginUsername" name="loginUsername" required><br>
    <label for="loginPassword">Password:</label>
    <input type="password" id="loginPassword" name="loginPassword" required><br><br>
    <button type="button" onclick="login()">Login</button>
    <button type="button" onclick="window.location.href = 'reg.html';">Register</button>
  </form>
</div>
</body>
</html>

2. 定义

1
2
3
4
5
6
7

<script>
function login() {
  var username = document.getElementById("loginUsername").value;
  var password = document.getElementById("loginPassword").value;
  var storedUsername = localStorage.getItem("username");
  var storedPassword = localStorage.getItem("password");}
</script>

3. 调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
function login() {
  var username = document.getElementById("loginUsername").value;
  var password = document.getElementById("loginPassword").value;
  var storedUsername = localStorage.getItem("username");
  var storedPassword = localStorage.getItem("password");
  if (username === storedUsername && password === storedPassword) {
    alert("Login successful!");
    window.location.href = 'https://minecraftsep.github.io/';
  } else {
    alert("Invalid username or password.");
  }
}
</script>

注册：

1. HTML样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
  }
  .container {
    width: 300px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  h2 {
    text-align: center;
  }
  label {
    font-weight: bold;
  }
  input[type="text"],
  input[type="password"],
  button {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    box-sizing: border-box;
  }
  button {
    background-color: #4caf50;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>

<div class="container">
  <h2>Register</h2>
  <form id="registerForm">
    <label for="regUsername">Username:</label>
    <input type="text" id="regUsername" name="regUsername" required><br>
    <label for="regPassword">Password:</label>
    <input type="password" id="regPassword" name="regPassword" required><br><br>
    <button type="button" onclick="register()">Register</button>
  </form>
</div>
</body>
</html>

2.定义+调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
function register() {
  var username = document.getElementById("regUsername").value;
  var password = document.getElementById("regPassword").value;
  if (username && password) {
    localStorage.setItem("username", username);
    localStorage.setItem("password", password);
    alert("Registration successful!");
    window.location.href = 'index.html';
  } else {
    alert("Please enter both username and password.");
  }
}
</script>

完整代码 –>

• 登录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
  }
  .container {
    width: 300px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  h2 {
    text-align: center;
  }
  label {
    font-weight: bold;
  }
  input[type="text"],
  input[type="password"],
  button {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    box-sizing: border-box;
  }
  button {
    background-color: #4caf50;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>

<div class="container">
  <h2>Login</h2>
  <form id="loginForm">
    <label for="loginUsername">Username:</label>
    <input type="text" id="loginUsername" name="loginUsername" required><br>
    <label for="loginPassword">Password:</label>
    <input type="password" id="loginPassword" name="loginPassword" required><br><br>
    <button type="button" onclick="login()">Login</button>
    <button type="button" onclick="window.location.href = 'reg.html';">Register</button>
  </form>
</div>

<script>
function login() {
  var username = document.getElementById("loginUsername").value;
  var password = document.getElementById("loginPassword").value;
  var storedUsername = localStorage.getItem("username");
  var storedPassword = localStorage.getItem("password");
  if (username === storedUsername && password === storedPassword) {
    alert("Login successful!");
    window.location.href = 'https://minecraftsep.github.io/';
  } else {
    alert("Invalid username or password.");
  }
}
</script>

</body>
</html>

• 注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
  }
  .container {
    width: 300px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  h2 {
    text-align: center;
  }
  label {
    font-weight: bold;
  }
  input[type="text"],
  input[type="password"],
  button {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    box-sizing: border-box;
  }
  button {
    background-color: #4caf50;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>

<div class="container">
  <h2>Register</h2>
  <form id="registerForm">
    <label for="regUsername">Username:</label>
    <input type="text" id="regUsername" name="regUsername" required><br>
    <label for="regPassword">Password:</label>
    <input type="password" id="regPassword" name="regPassword" required><br><br>
    <button type="button" onclick="register()">Register</button>
  </form>
</div>

<script>
function register() {
  var username = document.getElementById("regUsername").value;
  var password = document.getElementById("regPassword").value;
  if (username && password) {
    localStorage.setItem("username", username);
    localStorage.setItem("password", password);
    alert("Registration successful!");
    window.location.href = 'index.html';
  } else {
    alert("Please enter both username and password.");
  }
}
</script>

</body>
</html>

Exercise: 图片中转站

项目图片 –>

源代码请见评论区。

总结

localstrange可以临时存放数据，但不建议长久存放。

版权所有©Minecraft-Sep。