PanCheck 是一个功能强大的网盘链接有效性检测系统，支持批量检测多种主流网盘平台的分享链接是否有效。

以前看别人搞的各种docker应用，甚是羡慕，奈何自己水平有限，总是无法完成docker应用的安装。 现在我用好几个机器练习安装docker，已经有了一点眉目，虽然还很生涩，但是总比不会要强，我自己的数据我自己做主。 下面就是我部署的docker应用: mtab mTab是一款完全免费、无广告的浏览器书签助手。它的设计理念就是要让我们这些每天都要和浏览器打交道的人，能够更加轻松地管理自己的网页收藏。说白了，就是要帮我们把乱糟糟的书签变得井井有条，让我们找起东西来不再抓瞎！   lsky_pro Lsky Pro+ 是一个使用 PHP 语言，采用 Laravel 框架开发的一款 Web […]

Virola Messenger 是一款自托管的沟通与协作工具，旨在为企业和个人提供安全、轻量级的即时消息和集成功能。

Glean（拾灵）是一款自托管的 RSS 阅读器和个人知识管理工具，帮助重度信息消费者通过智能 RSS 聚合高效管理阅读。

Bichon是一个轻量级、高性能的 Rust 电子邮件归档系统，自带 WebUI，支持全文搜索和多账户管理。

在去年的博客年度更新日志中，我提到本站的评论框功能过于单薄，只能输入纯文本，我一直希望能为它加入更丰富的交互体验——比如支持加粗、斜体、删除线，能上传图片、添加 Emoji 符号等。

一年后的这个国庆假期，我终于抽时间把它完善了。最终实现的效果比我最初设想的更优雅，也更具可维护性、可扩展性。本文将记录我为 WordPress 评论框增加 Emoji 弹层、以及利用 Cloudflare R2 + Pages 搭建免费图床并无缝集成到评论系统 的完整过程。

当然，除了这两个主要功能，我还在前台增加了评论的删除、编辑和点赞功能。点赞其实更像是“排序工具”——当一些文章下的评论数量过多、质量参差时，我可以通过点赞将优质评论手动置顶。至于这一部分的实现细节，后面再说~

1. 最终效果展示

各位可以先看看下面这个视频的实际展示。当然，如果你愿意的话，也推荐直接在评论区亲手试一试，并欢迎提出建议或改进意见。这次改造，我把 Emoji 弹层 和 图床上传功能 所依赖的 JavaScript 脚本全部拆分成了一个独立模块文件。
这样做的好处是：页面在初始加载时几乎不受任何额外脚本影响，保持简洁与快速。

当访客点击评论框上方的表情按钮 [ 阅读全文 ]

建站不息，折腾不止。最近我搞了umami、Vaultwarden、AllinSSL。这三个全部都是Docker部署的。 umami 先说umami，去年的时候折腾过一个PHP的统计，加载速度过于缓慢，用了几个月只能放弃。当时也看到过umami，怕麻烦懒得折腾，推迟到了现在。按道理CloudFlare的统计也是不错的，我这纯属“爱好”了。   Vaultwarden Vaultwarden的话以前就玩过，Bitwarden单纯的创建成功，从来没有投入使用。现在懒得记那么多密码了，自建Vaultwarden省心省力也安全。   AllinSSL AllinSSL完全是看着还不错 […]

天气热了，我就完全没有心情更新，烦躁的心情、湿透的衣服，都让我无法专心做某一件事…… 睡不着起来折腾网站环境，nginx、php、redis等等升级到了最新版，运行也没啥问题，但是对于老一点的程序来说还是不兼容。discuz、typecho就会报错懒得解决果断又安装了低版本的php，目前php有两个版本在使用，就这样了。 今天收到一张vps待付账单，果断不续费了。因为手里还有其他机器，目前的配置是2核2G 100GB硬盘价格贵，新的配置（买了好几个月）是2核3G 300GB硬盘。这彻底解决了我的硬盘恐惧症。 再说说SSL，目前免费证书是90天有效期，后面会越来越短，真是造孽！感觉在割韭菜，还好 […]

最近几年的天气真是变化莫测，还不到四月就已经开启了空调！网上有消息说本世纪冰川会全部融化… 生活 上次只是带妞宝在市内玩玩，想换一个环境。 一直想着天气温暖可以带妞宝出去玩，现在的情况不容许我这么做。妞宝上学、老婆和我都在上班，这个出游计划不知何时才能成行。 我的脚痛原因找到了，原来是骨刺！真想不到我也会出现这样的情况。医生开了一点药，如果吃完还没效果那就需要打针，不知道打那个针会不会有后遗症… 经济 2025现在找工作、失业的人都很多，经济不景气。裁员、压缩工时、放假等等… 疫情期少之又少事，现在却成为了“常态”。过完年到现在我的经济压力也倍增，咬牙坚持！ 不知什么时候才能转好，得做长久打算 […]

百忙之中，突然有个一个想法，既然用AI写代码很强，那就上个有难度的，于是就有了这一款阅读器“RssX”，至于为什么叫RssX，那就是随便起的，没有特殊意义。

首先，看上面那张图，就很科幻，当然上面的那张图也是用AI生成的，简简单单。

当然我也博客上部署了，点击这里RssX

简单介绍下这款阅读器：

功能

1. 包含基本的功能，登录，添加订阅、编辑订阅、订阅采集、订阅浏览，以及可能最需要的api接口；
2. 程序采用了php语言(博客是php的，当然这个也是用php)，程序在php 8.4的环境下写的，低于8.4版本php环境没有测试，应该没问题吧？
3. 采用了mysql数据库形式存储订阅内容，因为博客也才用的Mysql，效率高；当前博客Mysql数据库版本为MariaDB版10.1.47，导入数据的时候提示报错，主要是KEY值超了，问题不大，已修复，本地数据库版本为9.3.0，没啥问题
4. 超级轻量级，代码通俗易懂有注释；
5. 可以配合linux的crontab定时任务刷新，或者用宝塔或者青龙面板，当然我我推荐自己点刷新，更新订阅不需要登录，游客也可点击更新；

安装方式

1. 解压文件，程序想放哪里放哪里，注意：里面有个文件create_tables0.sql为数据库建表脚本，用数据库管理软件找到SQL命令的地方，粘贴create_tables0.sql内的代码执行。(Ps：如果执行命令时出错，那就试试create_tables1.sql中的命令，最后安装完成后建议删除这两个SQL文件)
2. 基础配置，用代码编辑器打开config.php，找到数据库配置信息（有完整注释），配置数据库信息，同时有配置管理员账号密码的地方，一定要改用户名和密码哦。
3. 接下来就是浏览器访问安装的网址和路径，添加订阅源，一些列操作，非简简单。

其他说明

1. 软件开源，随便改，随便使用，当然也可以一起参与维护，让程序变得更美好
2. 几个功能模块是是独立运行，功能访问也是访问php文件实现，不过自己可以按需写伪静态，这样看路径就觉得很高级；
3. 页面的设计和样式非常简单，当然自己有动手能力，可以美化美化；

其他说明
下载地址：RssX_V1.0.0.zip(32KB)
项目地址：https://github.com/yefengs/RssX

演播室配了俩提词器，题词软件不太好用，于是去年在网上魔改的一个提词器用了一年多，我们的主持人说用着还可以，但是看着臃肿和逻辑混乱的代码，心痒痒，要不我重新写个，顺便挑战下自己。

最近一直在使用 Trae 来淘汰 vscode，要不挑战下，看看 AI 能不能帮我写一个比较实用的工具软件。

经过好几天的研究和迭代，共改进了 40 多个版本，一步一步的实现出来了，当然中间还需要在 Ai 写代码的基础上帮 Ai 改代码，尤其是优化和逻辑的控制。比起之前用的那个上几千行代码的提词器，这个提词器仅仅就不到 600 多行的代码。

目前，基础功能已经完善，后续的话，打算做个快捷键配置界面，用于配置快捷键，比如有些题词的无线遥控器，需要映射对应的按键，才能正常工作。

主打的就是离线使用，当然也可以上传到自己的网站上。

目前版本是 0.1，后续随着功能的叠加，逐步升级吧，当然这个小工具是免费开源的。

以后的更新全部放在这里，同时也同步到 Github 上，项目地址不出意外的话是 https://github.com/yefengs/CoCoTeleprompter/

使用说明：键盘空格为播放/暂停，方向键翻页速度。

版本更新及下载地址

ver 0.1

• 基础功能完善。
• 2025-06-03
• 点击下载0.1版本

ver 0.4.2

• 此版本改动较大，直接从0.1升级到0.4，结合日常使用中以及同事使用反馈的意见，改进了非常多的内容
• 新增快捷键设置，可以映射键盘的任意常规键来指定功能
• 优化滚动逻辑，内容滚动更丝滑
• 新增滚动进度条，稿件进度一目了然
• 依据日常使用优化显示方式，更自然更漂亮
• 还有非常多的改进，非常多！非常多！
• 源码纯原生
• 点击下载0.4.2版本
• 2025-10-20

上一个博客主题《Memorable-lit》，缝缝补补也将就用了六七年，况且，博客也是将近一年多没有更新，好多篇博文静静地躺在了草稿箱里……

这次呢，想着借机写一款主题，形式依然是我喜欢单栏。由于很久不写代码，看到代码很生疏了，外加当前前端技术迭代太快了，好多HTML、css3的新特性和js的ES5、ES6，我处于完全看不懂的状态，这个主题的由来是我平时浏览网站的时候，看到别人好看的风格样式，就扒拉扒拉下来了，有的懒得动脑子，就直接参考和借鉴过来。整个主题是使用字节推出的 Trae CN 编辑器，本地电脑搭建环境，外加用上Trae 的 Ai 来写代码，效率是离谱的高，在这个主题绝大部分代码是使用 Ai 的写的。开发效率是有点高，尤其是在解决一些很复杂的逻辑时，你只需告诉 Ai 程序的基本逻辑，它便生成可用的代码，在前端库的选择， 当然我选择的是 jQuery，其实前端JS可以用原生来实现，但是用着jQuery很顺手，代码简单，一行代码就能搞定的，没必要绕弯。别人都在用高级的Hexo、Hugo 等高级，而我依然选择的是 wordpress，可能懒得折腾、懒得写作时用Markdown，也可能是保持了习惯和旧状态，新特性对我没有吸引力吧。

年初一段时间博客感觉被黑了，博客的插件里出现了一些奇奇怪怪的代码，感觉是木马后门之类的代码，之前博客的版本为4.8，也是年久失修的状态，可能存在能利用的漏洞，导致的博客沦陷，当前，wordpress 最新的版本为 6.8.1，借机新主题就在最新的版本上测试开发，前前后后感觉写了近两个月，部分代码也是参考了大佬们的代码，修修补补，也算是正常跑了起来。

当前博客跑在Nginx + Mysql + php 8.1 下，对于 2 核2G 的云主机来说够用，甚至剩余的算力可以跑跑 docker 里的小应用，整体相对比较顺畅。

这次换主题也顺便修修花、剪剪草和施施肥，对于改造博客我也是下了很大的决心，好在一点点雏形出现到基本能用的状态，也是可喜可贺。当然主题若有问题，欢迎评论区提出，当然这个主题足够完善并且很有必要的话，可能也会开源哦。

博客我加个视频播放器、音乐播放器和全景播放器，想着给博友们分享一些我外出拍摄的一些照片和内容吧。

不知道这个月怎么了，从月初开始先是倒腾 cloud flare的CDN，然后是更换企业邮箱，接着是搞旅行地图，最后再是RSS聚合页，前前后后搞了近20天，几乎精力都放在这些优化上，有几次晚上搞到凌晨！！！回头想想真的有意义么？也许是有的，但...

最近博客频繁出现不可访问的问题，但因为最近没怎么在写文章，所以倒没怎么管，直到收到博友圈发来的邮件：

登上去一看，发现服务器的磁盘居然满了（之前出现过内存满的情况，重启一下 Halo 的服务就能解决）。因为这台机器上都是用 Docker/Docker Compose 启动的服务，所以自然只需要去考虑 Docker 的问题。

当然，在这之前也是先用 df -h 看了一下，全都指向 /var/lib/docker/overlay2/xxx 和 overlay 这样的东西，所以能确定是 Docker 的问题。如果占用大的在其他目录，那就稍微复杂一点，可以用 du -h --max-depth=1 一点点去排查。

overlay          79G   57G   20G  75% /var/lib/docker/overlay2/89ed74e70d3e59b7c5de6e53522eece539a74e013c9c03c76fc7ac4d73045ed7/merged

其实到这里我就懵逼了，这些服务都没什么会落盘的，不应该一下产生很大的数据才是，所以找了 AI 帮忙，它建议我先运行：

docker system df -v

这里提醒了我两个问题，一个是我有很多镜像没有清理，二是有些卷没有清理，于是先执行了下面两条命令，先释放一点空间。这两条命令都只会清除没有使用的镜像和卷，所以是比较安全的。这一步清理掉了几个 G，但是磁盘还是很满。

docker image prune -a
docker volume prune

于是让 AI 帮忙写了个脚本，查一下到底是哪个容器的卷占用空间大：

echo "VOLUME_NAME                              SIZE       CONTAINER(S)" && docker volume ls -q | while read vol; do size=$(docker volume inspect $vol --format '{{.Mountpoint}}' | xargs du -sh 2>/dev/null | cut -f1); containers=$(docker ps -a --filter volume=$vol --format '{{.Names}}' | tr '\n' ',' | sed 's/,$//'); [ -z "$containers" ] && containers="<unused>"; printf "%-40s %-10s %s\n" "$vol" "$size" "$containers"; done

最终找出来是 Halo 的容器。AI 建议我先考虑是容器日志的问题，用下面一条命令发现确实，于是又重启了一下容器，果然空间就被释放了。

find /var/lib/docker/containers/ -name "*.log" -exec ls -lh {} \; | sort -k5 -hr | head -10

但是这个方法治标不治本，它还顺便给我提出了限制日志大小的方法：

Docker

# 启动时添加日志选项
docker run -d \
  --log-opt max-size=100m \
  --log-opt max-file=3 \
  [其他原有参数...]

Docker Compose

version: '3'
services:
  your-service:
    image: your-image
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"

全局设置（针对所有新容器生效）

# 编辑 /etc/docker/daemon.json
cat > /etc/docker/daemon.json <<EOF
{
  "log-driver": "json-file",
  "log-opts": {
    "max-size": "100m",
    "max-file": "3"
  }
}
EOF

# 重启 Docker
systemctl restart docker

至此，这次磁盘爆满的问题就解决了。

番外

因为 Halo 老是出现 OOM，所以其实这次日志把磁盘写爆是因为 Halo 的问题。一看有一个新版本 Release，说是解决了潜在的内存泄漏问题，更新完好像就再没出现 OOM 的问题了。

我在关于页面里说过，选择 Halo 是因为它丰富的插件生态，完善的主题，还可以的性能，以及部署和发布的便利，现在我倒有了一些微词：

• 专业版发布之后，不能再付费购买插件，必须购买专业版（现在也不能买断了，只能订阅）
• 性能方面真的一塌糊涂，Java 的技术栈导致一个博客就吃掉了 0.5 G 的内存（之前有问题的时候甚至飙到了 1G+），这对内存寸土寸金的服务器来说简直是噩梦
• 版本发布后经常有严重的恶性 bug，这完全不像是一个开源转商业项目该有的稳定性
• 很多插件经常一连几个月都不维护，一般主程序改了点什么才会顺带维护一下；新出的插件也不怎么感兴趣，有点花里胡哨的

最近也看了不少设计优秀的独立博客，自由度高很多，也更方便发挥，更多东西可以折腾，再做一个自己的博客的念头也慢慢浮现，也许呢。

折腾的心真的停不下来，作为每一位博主，估计都能折腾。每个人手里都会有不少的域名、VPS。曾经我在《将博客减法进行到底！》要告诫自己，需要对博客做减法了，那个时候也确实有点效果，手里的域名和VPS真的减少了不少，可是，现在又折腾的域名和VPS越来越多了!

大佬论坛有一次搞了个抽奖活动，是兰空图床的商业版授权，十份奖那么多人在抽，结果可想而知了。那个时候是魔怔了，一心想着兰空图床商业版，便从中奖人的手里花了180块钱买了商业版的授权码。商业版有了，但是没有域名呀！天天的想着能搞个合适的域名，先后注册了pic.ge和imgbed.net，都不是太满意，最后注册到了img.ma，给图床起名曰“图妈”。兰空商业版有了，域名也有了，但是还是没有找到合适的存储空间，又怕被人刷流量，现在还一直用着cloudflare的R2存储呢。R2有时会抽风，图片还会开裂！唉！麻烦！

假期的时间，博友们都在折腾着长毛像，那我也不能闲着呀！为了在联邦宇宙里装X，找了韩老板花了500块钱买了域名suo.si单独配给长毛像用。所思suo.si，看上去就高大尚呀！折腾GoToSocial还不过瘾，又折腾起了Mastodon，但是Mastodon太吃VPS内存了，又在论坛上溢价150块钱收了cloudcone家的4C4G配置的一台VPS专门安装Mastodon。这几天热乎劲过去了，每天也难发一篇嘟文！

拿急的心就不断，怎么着魔怔了在西部数据上天天盯过期域名看，还“抢”注了一个CC后辍的域名，ICK.CC，我以为会有很多人和我抢，结果就我一个傻X。还TM是花了148块钱抢的！哈哈！

搬瓦工发售megabox pro的时候，小胡同学还在群里广播了下。那个时候我想着反正我的CC机器用着还不错，不是刚需就没有买。后来才发现搬瓦工的megabox pro真的是好鸡，魔怔又犯了，天天泡论坛里收，又是溢价150块钱收了一台原邮的！搬瓦工限制CPU真TM有点变态了，用宝塔面板编译个网站环境CPU高了点就给我限制了！

兜兜转转，现在手里又七个域名七台VPS了！续费的时候一定又是肉疼了！现在手里的私房钱快要吃不消了！不行，还是得要做减法，有哪位看中pic.ge、imgbed.net、suo.si、ICK.CC的，就带走吧！！

“筷子小手”走南闯北这么些年，见识不多但经验教训不少，今年6月初的时候去了趟西安，没想到在从西安回重庆的G3739高铁上丢了iPad电脑一台，想知道如何在高铁上找回失物，请听我细细道来。

丢失经过

旅行途中，我们一般是会提前下载好电影或者一两集电视剧的，坐在车上无聊的时候看看剧。因为这次在车上还在处理手头事情，拿出了iPad结果没有时间看，就将其竖着放在了座椅中间。因其套着黑色的壳子且竖置目标很小，下车的时候竟没有看到它而将其遗失。 G3739经停重庆后继续前往终点站南宁，我们在重庆下车后也没能立即发觉。

那天正好是周一，中午到达重庆后我便去上班了，直到晚上回家收拾行李的时候，我们才发觉遗失了平板电脑，此时列车到达南宁已有一小时有余。

寻找过程

因为是在高铁上遗失，我们立马拨打了12306官方客服电话，转人工接听后报失。对方需要我们提供当时乘坐的车次和座位号，核验无误后12306接受了报失。大约过了半小时后，G3739列车组当班工作人员就与我们取得联系，反馈说他们到达南宁（终点站）后清理了列车，未发现有遗落的平板电脑，也未有旅客上交失物。听此消息后我们心就凉了半截，这下肯定不好找到了。电话未挂，我们反问列车工作人员，能否帮查看那列车厢的监控？工作人员说他们无权查看，并建议我们报铁路公安，立案后可调取。

然后我们就果断拨打了110，接电话的自然是重庆的公安部门。我们说明了经过后，110接警人员首先给了我们重庆铁路公安部门的一个座机电话，我们打过去之后他解释这种案件不属于居住地铁路公安管辖范围，属于该趟列车所在地铁路公安管辖。他帮我们查询得知，G3739趟列车当日执勤的是柳州铁路公安某支队，并将其电话告知我们。第三个电话我们就打到了柳州铁路公安，报警说明经过后成功立案。柳州铁路公安接警的小哥哥说一口“柳普”，听起来很是稚嫩，问我们了解了一些基本情况确认报警立案。

这时我想到苹果设备都有一个“丢失”模式，我们赶紧登录我的 Apple ID 后台，将此平板电脑设为“已丢失”，此时平板电脑会利用周围苹果设备进行模糊定位，不必链接网络也能知道其大概位置。此时我们看到该设备1小时前位于遵义市附近。设置好“已丢失”后，我们还给捡到的人留了一段话，希望TA能寄回。

报警后过了5、6天左右，有个柳州的民警回电询问细节，但都是报警时就讲过的东西，但是是觉得可能找回的希望不大了。后来我们又致电询问调查进展，收到的答复都比较是耐心等待之类的。我们心想，高铁都是实名购票，且车厢都有监控，公安应该很容易可以找到我们下车后接着坐在这个位置上的旅客。

到了六月底，柳州公安还是没有什么消息，我们也都快把这个事情忘记了。我们就看了看平板的定位，发现此时竟然出现在了天津！我们立马打通了柳州的电话，为其提供新的线索，定位还是比较准确的，哪个小区哪栋楼都能看清楚。此时我们心想，是不是要报此小区当地派出所才能上门拿回平板，但想着铁路公安这边已经立案，就不要再占用其他警力了。又等了几天，柳州公安终于来电话了。

好消息是找到那个人并且他也承认了他“拾”到了我们的平板，坏消息是TA把这个平板也遗失了！

警察从中协调说他愿意赔偿一个同型号同品牌的给我，问我是否接受此方案，沟通几番后，我们确定按照此处理。这样，平板电脑算是失而复得了。在此感谢柳州铁路公安覃警官和12306，虽然不能当面道谢，但我们也远程送上了锦旗，第一次特别经历以中国速度结束。

经验教训

1. 丢失后要第一时间打开丢失模式，防止丢失设备被刷机；
2. 高铁上丢失后马上查询车次所属哪个铁路局，快速报案；
3. 小心保管自己的财物，尽量不给警察叔叔添麻烦。

此时此刻台风依然在袭击上海，而这也算的上这个月最大的一次台风了。公司的应用终于上架Google play，也算进入了正常的工作节奏。小朋友进入暑假，老家的亲戚过来了，但是因为台风，高温，人多一辆车拉不下等等因素，这个月竟然没有出行。同时这个月书看的也少，以下是详细内容。

送外卖

月初的某一个周末晚间，陪着小朋友在外面与同伴玩耍，因为没啥事，突发奇想去试试送外卖。于是下载了达达，骑上电驴可是去送外卖。花了接近两个小时，送了四单，扣掉3块钱的保险费，纯收入19块钱。

作为一个新手，这真不是一件容易的事情，不少卖家的位置比较难找，四单中的两单花了我很久很久才找到店铺，因此就导致送的时间不够。另外因为达达的体验和定位比较差，导致有一单送错了，多亏了人家给我送出来不然估计就要被平台处罚了，这也导致了最后一单超时。

达达软件体验差，导航难用，定位不准，因此同时接两单比较难以接顺路单。而送达之后，需要拍摄门牌号和小票两张照片才能送达确认。众包单价低，新手不熟悉，接近两个小时才够买一杯奶茶，让人没有动力再次尝试送外卖了。

折腾

之前使用Sun-Panel搭建过一个个人导航页面，最近在少数派看到网友分享的使用Glance打造Home仪表盘有被种草，于是也搞了一个。通过Glance不仅仅可以展示网页链接，还支持服务器状态展示，RSS订阅，股票，自定义组件等等。除了使用rss，股票之外，我还做了自己博客的统计数据展示和最新评论，以下是截图，感兴趣的也可以去参考Glance的文章搞一个。

看

这个月书看的很少，一方面是工作忙起来没时间，另外就是懒。

首先看完的是，上个月拿到的《读库2503》，这本中的主题是香烟，通过这本书才知道，原来香烟是在哥伦布到达美洲之后才走出美洲，风靡世界。从第一篇文章中，我们可以知道香烟的发展，如何发展出卷烟，以及最后让大家产生共识吸烟有害健康。第二篇文章，这是讲述一个文科生如何使用贝叶斯算法击败香烟广告，也让我了解了被广泛应用于人工智能领域的贝叶斯算法是怎么被提出的，它的具体原理是什么。这里也来说一下，贝叶斯算法就是用先验概率来计算一件事情的概率，比如说肺癌发病率，肺癌患者中吸烟的概率，吸烟者的概率，可以算出吸烟者患肺癌的概率，因此可以使用已有的数据来计算出想要的数据。

另外则是看了一本去年购买的《经济学原理漫画版》中的国民经济原理这一本，这套书买了好久了，但是到目前位置才看了三本，还有四本没拆封。这一本中主要讲解了GDP，CPI等名词，金融工具，金融市场，通货膨胀等，这些名词虽然之前都知道是什么，但是详细的都还是不了解，他们之间的关联更是不知道。通过这本书，对于相关概念的详细信息，对于他们如何计算的也有所了解，漫画风格比较好读，值得推荐看一下。

电视剧的话，台剧出了《我们与恶的距离2》，第一部是备受好评的，第二部网上的评分要低一点，但是我感觉还是挺不错的。10集的长度，讨论了台湾的选举政治，精神病人杀人等话题，插叙倒叙等叙事方法也很不错，感觉比国内动辄三四十集的爽剧好多了。

另外还看了《鱿鱼游戏3》，这个感觉是越来越差了，警察到最后所有的同伴都丧生才找到小岛，但是什么也没能做。贵宾们都是傻逼，游戏方面也没有新意，男主也没能拯救谁，自己还丧生了。结尾在美国打卡片，这是还要去美国的节奏吗。

最近才知道，原来《小王子》还有电影版，书之前看过但是感觉看不太懂，这个动画电影看起来倒是挺不错的，画面很美，故事来源于书，但是有不仅仅是书中的故事。故事的主角小女孩，既是小王子故事的观众，也是另一个小王子，强烈推荐。

游戏

微信有很多游戏的广告，有一天不小心玩了一个小游戏，然后这个小游戏比较难过关，后面看广告才能玩下去。后面里面推荐的另一个三国题材的游戏，感觉还不错，就去完了一下。然而这个游戏，不充钱是真的玩不下去，稍微氪了一下，加入了一个同盟，贡献了不少元宝和资源给同盟，等到了10级之后，结果被踢出同盟了。除此之外，这个游戏很费时间，一整个周末都浪费进去了。在查攻略的时候，发现这个游戏的评价很差，很多官方的托，同时内游戏里面也是各种东西都要花钱，抽卡要钱，装备要钱，升级技能也要钱，购买资源还要钱，然后等到晚上，官方大号一下过来把你打到解放前。

这种垃圾游戏当然不能继续玩，费钱又费时间。因为是在微信里面，也没法使用手机的时间管理来控制，通过搜索发现可以通过微信成长守护这个小程序来设置，可以在其中设置每个小游戏的消费和使用时长限制。在这里，我又发现了这个小游戏的少操作，为了避免被家长给小孩限制消费，给它充值的是另一款同名的小游戏，也就是说我限制了同名的A小程序，用户还是可以用同名的B小程序消费。

无良游戏，坚决抵制。这款游戏叫作三国：冰河时代，强烈建议大家不要玩，同时查了一下还有另一个叫无尽冬日的游戏也是同样的套路，建议不要玩。

而EPIC上最近在限免《文明6》白金版本，这个游戏就很不错，同样的是建造类的游戏，这个上面的设计就很合理，虽然是好几年前的游戏了，画面也还不错。希望国内有更多这种好游戏，而不是冰河时代这种垃圾氪金游戏。

总结

这样看这样也还算充实吧，对于前面的读库文章感兴趣的找我，分享给你。这个月另外还更新了两篇博客，也还算不错。现在是暑假起见，竟然没有能够出去旅行放风太不应该了，下个月一定要出去走走。

看完评论一下吧

今年的六月，连绵的下雨天和高温天，因为后半个月公司高强度线下办公，每天工作很忙，出行和看书都减少了很多。这是一个繁忙的月份，对于上班的我如此，那些促销的商家如此，即将毕业的学子如此，无论是幼儿园的小朋友还是参加高考的学子。以下是正文。

博客折腾

看到很多人的博客切换页面都很顺滑，因此也想把自己的搞一搞，查了一下可以加一下页面跳转的动画，只需添加如下的CSS即可：

1
2
3

 @view-transition {
 navigation: auto;
}

当然这样的效果和Astro比还是差不少，想要更好的效果看来只能换博客框架了。

另外看到椒盐豆豉的文章介绍的基于cloudflare实现的文章点赞功能，于是照葫芦画瓢也弄了个，欢迎来玩。

买买买

又是一年的六一八，但是现在持续的时间特别长，也没有那种节日的气氛了。

手里的相机只有一个套头28-60和35定，平时拍照也没啥特色，广角和人像反而手机拍的更好。看到不少博主的文章和视频，也是种草了腾龙的28200镜头，正好天猫国际上面近期3700块就能买到，于是剁手。长焦就是好啊，月底娃的毕业典礼上面就咔咔咔的拍了很多照片，虽然照片拍的不好，但是长焦舞台上的小朋友们都能拍得清清楚楚哈。

家里的九号电动车用了差不多四年了，座椅传感器有问题经常骑不了，龙头锁有有问题，经常启动报错，去点了老板一顿吹，最近有国补，又有旧车抵扣差不多不到3000的价格就能买到新车，于是有换新了一辆小电驴。九号虽然偶尔也会出问题，但是智能感应这一块还是挺不错的，我还是挺喜欢的。

行

月初是端午节，预报几天都有雨，但想着还是要出去，于是选择了去安吉躺着。第一天和第二天都在下雨只好在民宿躺着，当时一直躺着是躺不下的，第二天就在附近转了转，中午吃完饭还是决定开车去转转，于是开车去了江南天池，然而山上大雾基本上啥也没看到。

山上下来之后又去附近知名的余村转了转，听说这里以前很穷，后来因为习近平一句话开始搞生态，搞旅游，这里就发展起来了。这边环境确实不错，四面环山，建设的也挺好，很适合过来度假。

第三天预报是有小雨，但是看天气还可以，还是去了杭宣古道进行徒步，因为刚下过雨，上山的时候路上还有一些水在往下流，路边的小溪中水流也很湍急， 后面的路上一些路段也有点滑，整个路程有11公里多，但是总体难度还好，还是带着小朋友一起走完了全程。山上有个寺庙釜脱寺，有咖啡有住宿，如果有几日清闲过来修养打坐应该是挺好的。

端午后面的周末因为下雨就呆在家没有出门了，而月中的周末，因为想到后面两周要线下办公周末也要加班，还是决定出去露个营。找了个浦江郊野公园旁边的地方，然而黄浦江边围起来在施工，因此看不到江，只能在树林中烧烤了。朋友新买的炭炉花了许久才烧起来，之后大家便是一顿美餐，下午赶在雨下大前返回家中。

后半个月线下办公，也重启了每天挤地铁的日子，重新光顾了需求未曾前往的市区，趁着每天吃饭的时间和午休，逛了逛延中绿地。

看

这个月因为工作很忙，书影看的都很少。书只看完了《洞穴奇案》，这本书之前罗翔推荐过，最近上架了微信读书，看到了便把他读完了。书上有不少关于法学专业的东西是看不太懂，但是如果不从法学角度看，我们可以从14为法官的观点，加上自己的辩证，对于提高自我的思辨能力还是很有帮助的。

电视方面，看完了《长安的荔枝》电视剧版本，剧集的场景是挺好看的，但是能够看出明显的棚拍和打光。剧情和原著比改了很多，不评价好坏吧，我更喜欢原著一点。原本几万字改成了35集，看的很累，期待一下后面要出的电影版。

总结

忙碌的六月结束了，产品也终于发布到了Google Play，可以想象到的是接下来一段时间依然会很忙碌，就像现在的高温天一样，但忙碌总归还是好的。如此一来，就需要更加高效的利用时间，这样才能有时间做一点自己的事情。

同时小朋友已经放暑假了，可以想象到接下来的日子每天要被影响工作效率，也要想想法子应对。就这样，下个月再写。

看完评论一下吧

最近淘了一台洋垃圾Chromebook，折腾了一段时间，目前已经基本在日常使用了。在折腾过程中查找了许多的网上资料，解决了不少中文环境使用ChromeOS的问题，这里就分享一下Chromebook的选购和软件安装。

ChromeOS是什么

ChromeOS是Google从2009年开始开发的项目，可以简单理解为在Linux内核上运行的，以Chrome浏览器作为桌面环境，主要功能也是运行Web应用程序的一个操作系统。在之后，该系统也支持了运行Android应用程序，以及通过容器运行Linux程序，这样一套组合下来，我们就获得了一个原生支持运行Android应用，Linux应用和Web应用的系统，这比在Windows下面折腾Linux子系统，Android子系统要流畅得多。

目前为止，想要运行ChromeOS有两种方式，第一种就是购买ChromeBook，也就是搭载了ChromeOS的笔记本电脑或者触屏电脑。第二种方式，Google在2022年发布了ChromeOS Flex，让用户可以在经过认证的设备上安装ChromeOS Flex，包括一些Mac电脑也是支持的。

而想要激活ChromeOS，你需要有可以顺畅访问Google服务的网络。如果你没有这个条件，来自中国的fydeOS它是一个本地化的ChromeOS，内置了本地化定制和国内可以使用的网络服务，感兴趣可以去他们的官网看看。

Chromebook适合谁

ChromeOS最初设计出来也主要是方便云端办公，提供简单、快速、安全的环境，因此它更适合于对于性能没有要求，而希望简单吗体验的人。比如说：使用在线文档的文字工作者，得益于Google doc，飞书文档，语雀等文字和表格类在线工具，Chromebook简单的功能以及比较长的续航是一个性价比比较高的选择。除此之外，对于性能没有要求的开发者和数码极客或许也会考虑由于一台自己的Chromebook。

最新的Chromebook有两档标准，普通的Chromebook，以及Chromebook Plus，普通的Chromebook可能只搭载Intel Celeron处理器以及4GB的ROM， Plus也只是它性能的两到三倍。目前Chromebook在国内没有销售，通过天猫国际等平台平台购买的新机器一般也都比较贵没有性价比。对于普通用户国内平台在销售的平板电脑或者笔记本都比它有性价比的多。

而对于我所说的极客用户来说，在闲鱼淘一台洋垃圾Chromebook可能是一个比较有性价比的选择。比如我这台Lenovo Duet5，骁龙7C，8GB内存，256GB存储，13寸的OLED屏幕，搭配触控笔加键盘，支持平板模式和桌面模式，只要不到1500块钱，相比于iPad，看起来还是有点性价比的。

Chromebook选购指南

再次强调一下选择Chromebook需要保证有能够激活Google服务的网络环境。不具备的可以考虑fydeos，以及他们的Fydetab Duo设备。

在淘设备的时候，因为我们可能买到的是2019年或者更早发布的设备，我们需要关注设备的自动更新到期时间（简称AUE），所有ChromeOS设备都能够借助于Chrome浏览器几乎同步的更新节奏收到Google的定期更新。因此决定购买之前可以在Google的这个页面看一下该产品型号的AUE日期。

其次，电池健康度也是选择二手Chromebook产品时候值得关注的信息。本身购买Chromebook就是为了优秀的能耗和续航体验，电池不行这些就没办法完全达成了。购买前最好和商家沟通让对方打开「关于 ChromeOS > 诊断」界面并提供截图，可以在这个界面中清楚地看到当前设备的电池寿命、循环计数等信息。从这里可以大概预估该设备之前的运行时长，并且电池寿命高于90%应该是比较好的。我在这里就踩到了坑，因为是专门的二手商家，说了是库存设备，并且说没法激活设备不愿意提供截图导致我收到的设备实际上电池已经循环过了300多次，电池寿命只有86%，同时因为运行时间过长oled屏幕也有一点烧屏了。

最后，屏幕这块OLE屏幕可以让卖家把屏幕亮度跳到最低拍照这样也能看到一部分屏幕的缺陷，以及全白页面拍照测试等。关于型号的话，考虑到Android应用的兼容性，我选择的是ARM芯片的Duet设备，如果更加关注Linux应用的兼容性或许可以考虑X86芯片的设备。设备的型号这块，除了我提到的Duet，Google推出的Pixelbook Go， Pixelbook也是可以考虑的型号。

最后的最后，实际购买之前可以考虑使用现有设备刷如ChromeOS Flex或者fydeOS体验一下再做决定。

ChromeOS 初始化

ChromeOS本身的内核是Linux，但是为了安全，我们是没办法在上面安装Linux应用的，同时Android应用的安装也必须通过Play store才能安装，因此如果想要获得系统的完全控制权是需要开启开发者模式的。开启开发者模式后可以直接安装Android APK文件，同时也拥有了Root权限，可以在系统做修改，比如安装类似Mac下面homebrew的chromebrew工具等。但是代价是，每次启动电脑都会先跳出一个60s的警告页面（可以跳过），而在普通模式和开发者模式之间切换，所有的系统数据都会被清除，需要提前做好备份。

在我体验完开发者模式之后，决定还是回到安全模式。对于大部分人也都不需要开发者模式，我们通过Linux子系统开启Linux子系统的开发者模式，也就可以通过ADB来安装Android应用。因此如果想要开启开发者模式可以查看网上的资料。 初始化，可以通过家庭的软路由，或者手机上面开启Clash作为代理服务，在连接完网络后，修改网络中的代理服务，把手机或者软路由作为Chromebook的代理服务器，从而可以激活服务。同时要系统更新和安装Linux子系统需要稳定的翻墙服务，不然可能会失败。

ChromeOS初体验

ChromeOS内已经内置了一部分Web应用，包括了Google全家桶和一些工具应用。在未连接键盘鼠标前是平板模式，连接了之后为桌面模式。

很多场景也可以通过浏览器进行，对于一些提供了PWA的网站，可以点击地址栏的安装按钮，这样就会生成一个桌面图标方便下次使用。也可以在Chrome应用商店安装扩展程序。

因为登录了Google账号，Chrome浏览器上安装的扩展程序，一些设置，书签等也都会同步过来。

同时ChromeOS还支持与Android手机连接，能够对手机进行简单的控制，包括手机的静音，地理位置权限开关，控制手机的热点并连接上网，查看手机最近的照片，打开的Chrome标签页等，如下图所示。

对于中文输入，Chrome内置了拼音输入法，如果使用双拼的话可以考虑使用fydeos提供的真文韵输入法，不过真文韵输入法没有软键盘，在平板模式还是没法使用，另外真文韵在Linux应用也无法使用，解决方法后面再说。

配置Linux子系统

Linux系统模式是未开启的，需要首先到「关于 ChromeOS 」中开发者部分开启，最新版本默认安装的是Debian 12，因为需要到Google的服务器上下载Linux镜像文件，这个过程可能非常慢，我这里差不多半个小时才完成。

有了Linux系统，我们首先需要安装中文环境，执行如下命令安装中文字体：

1

sudo apt install fonts-wqy-microhei fonts-wqy-zenhei fonts-noto-cjk

Linux上面是没法使用系统的输入法的，我们需要安装Linux的中文输入法，我这里就是安装的fcitx5，可以使用如下命令安装：

1

sudo apt install zenity fcitx5 fcitx5-rime

安装之后在 /etc/environment.d/ 文件中创建一个im.conf文件，并且写入如下内容：

1
2
3
4

GTK_IM_MODULE=fcitx
QT_IM_MODULE=fcitx
XMODIFIERS=@im=fcitx
SDL_IM_MODULE=fcitx

之后手动打开fcitx5，并且配置好自己的输入法选项就可以在Linux中使用应用了。

除此之外，就跟正常使用linux一样，安装的Linux应用如果是有桌面图标的也会在Chrome的应用列表中展示，同样对于deb文件，也可以直接在chrome的文件管理器中直接点击安装。

现在ChromeOS也支持了安装多个容器，也就是说可以运行多个不同的Linux，感兴趣的可以看看这位博主的这篇安装ArchLinux的文章。

安装微信

微信算是每个人都必须有的通信工具了，在ChromeOS中有两种方式可以安装，一个是安装到Android子系统，直接在Google play下载就行了，另一种则是安装Linux版本的桌面微信。

但既然有这么大的屏幕，当然是桌面版使用体验更好了。我这里介绍一下在我的Debian12下面安装arm版本的微信的过程吧，因为微信的有一些依赖系统内是没有的组件需要安装。

1

sudo apt install libatomic1 -y && wget -O libwebp6.deb https://security.debian.org/pool/updates/main/libw/libwebp/libwebp6_0.6.1-2.1+deb11u2_arm64.deb && sudo dpkg -i libwebp6.deb

除了这个之外还缺少一个libtiff5，debian12上面已经有libtiff6了，我们创建一个链接就可以了。

1

sudo ln -s /usr/lib/aarch64-linux-gnu/libtiff.so.6 /usr/lib/aarch64-linux-gnu/libtiff.so.5

之后我们应该就可以使用Linux版本的微信了。

另外还推荐在Linux子系统安装stalonetray，这样就可以展示Linux的软件的托盘，比如去查看输入法状态，和切换输入选项等。可以参考这篇文章。

对于Linux直接在Chrome点击deb文件安装的应用，虽然安装完了但是有可能点击图标打开的时候总是在转圈却打不开，这可能是因为程序出错了，可以在命令行中手动运行，这样错误日志就可以查看了。

配置安装非Google play的Android应用

如果想要安装国内的应用，可能很多都无法在Google play商店下载，一种方式是打开ChromeOS的开发者模式，但是那样每次开机就要忍受开机警告。我这里选择通过Linux子系统来安装。

首先打开「关于 ChromeOS -> Linux开发环境 -> 开发Android应用」，将其中的启用ADB调试打开。

点击启用的时候会有如下提示：

并且如果停用的话也会将Chromebook恢复出厂设置，所有数据被清空，使用这个功能需要谨慎。

再打开Linux命令行，执行如下命令安装adb工具。

1

sudo apt install adb

之后打开「设置 -> 应用 -> 管理Google Play 偏好设置 -> Android设置」，这样就进入Android系统的设置应用中了，可以在关于设备中多次点击版本号，开启Android子系统的开发者模式，在然后到系统，开发者选项中打开ADB调试。之后在linux命令行执行如下命令并显示正常就说明配置好了。

1

adb devices

之后就可以通过ADB安装程序了，当然也可以选择使用adb安装一个国内的应用商店，之后通过应用商店安装应用。

ChromeOS的体验介绍

使用了一段时间之后来说，作为一个轻量化的Linux 本来说，这台设备还是符合期望的。Linux，Android子系统都和宿主系统有着很好的深度绑定，使用子系统的应用也和使用宿主一样有着很好的体验。而在我这里一大缺陷为，因为Linux子系统和Android子系统都被划分到了私有网络，因此它们实际上网络是和Chromeos宿主共享的，但是和局域网的其他设备不是在同一个子网里面的，因此类似LocalSend这种工具是不能使用的。这里目前我的解决办法是使用fydeOS提供的fyDrop工具和其他局域网进行文件传输。

这个设备同时还支持通过usb typec接口连接外接显示器，chromeos有着不错的窗口管理，桌面分屏，这些功能都为使用体验加分许多。

如果只是轻办公我感觉这是一台很棒的设备，但是得益于这个性能，想要在这上面做Android开发，去编译程序那就不敢想象了。而至于要不要入坑，还是要你自己决定。

最后照例来推荐一些可以参考的资料：

1. fydeOS源于chromeOS，这边的中文资料都可以参考：https://community.fydeos.com/t/topic/40986
2. Chrome 官方的文档： https://chromeos.dev/en/linux
3. 解锁开发者模式和一些折腾，可以参考这边文章和博主的其他文章： 打造一台适合生产的Chromebook

看完评论一下吧

我的博客上面挂着一个使用Leaflet实现的足迹地图功能，最近又给他添加了一些功能并且进行了一些美化。之前也有人问题这个怎么实现的，趁着刚折腾完来分享一下。

代码库的选择

早前一直想要做一个足迹的功能，像是国内的百度地图和阿里地图都有js的sdk，但是他们的sdk使用不简单，并且他们的地图只有国内的。后来了解过google map以及mapbox，但是都没有深入研究。后来看到博主水八口记使用了leaflet还比较简单，就使用这个库来实现了我的足迹功能。

地图图层

使用leaflet的一大好处是，你可以自由使用你想要的地图图层，对于符合Leaflet的地图瓦片地址我们是可以直接使用的，通常是类似这种格式的地址： https://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png，其中的{z}/{x}/{y}是必须要支持的，leaflet会在运行的时候替换具体的值，从而请求对应的放大级别（z,zoom）, 对应坐标(x, y)的瓦片进行渲染。

一般使用cartocdn提供的openstreetmap的地图时，是可以直接使用的，但是我们如果想要使用mapbox地图或者其他地图供应商的时候，就需要借助插件了，可以在这个页面看看有没有Plugins - Leaflet - a JavaScript library for interactive maps。

对于地图图层，leaflet是支持同时加载多个图层的，比如说我可以添加一层底图再添加一层天气卫星图。

我们这里先看一下如何创建一个地图并且设置我们的地图图层. 首先需要引入leaflet的css和js文件

1
2

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<!-- js引入一定要放到css的后面 --> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

之后，在我们需要显示地图的位置放一个div元素，并且设置一个id，这样我们在后面的js代码中才能控制它：

1

<div id="footprintmap"></div>

同时我们可以通过css设置这个容器的宽度高度：

1
2
3
4

#footprintmap {
width: 100%;
 height: 180px;
}

这些做完之后就可以在javascript中去创建地图对象，并且给它添加地图图层了：

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

<script type="text/javascript">

 //地图的版权声明，使用三方地图数据出于对版权的尊重最好加一下
      var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution" target="_blank">CARTO</a>';
      var map = L.map('map', {gestureHandling: true, minZoom: 1, maxZoom: 14}).setView([33.3007613,117.2345622], 4); //创建地图，设置最大最小放大级别，setView设置地图初始化时候的中心点坐标和放大级别
      map.zoomControl.setPosition('topright'); //设置放大控制按钮的位置
      map.createPane('labels');

      map.getPane('labels').style.zIndex = 650;

      map.getPane('labels').style.pointerEvents = 'none';

      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {

    attribution: cartodbAttribution

}).addTo(map); //添加地图图层到map对象当中

</script>

添加足迹点到地图中

经过以上的步骤我们就可以在网页上展示一个地图了，而我们实现足迹功能一般会给我们去过的地点打上标记。一种方法是给去过的城市做一个蒙层，一种方式是加一些点标记。这里先看加点标记的方法。

标记在Leaflet中称为Marker, 我们可以使用以下代码添加默认的Market：

1

marker = new L.marker([33.3007613,117.2345622]).bindPopup("popup text").addTo(map);

效果如下:

在上面我们通过bindPopup来设置点击Marker之后弹出的内容，其中我们是可以设置HTML元素的，因此我们就可以显示图片或者超链接之类的内容了。

如果不喜欢这个默认的蓝色Marker，也可以替换为图片。比如我用如下的代码就设置类一个svg图片作为Market标记图：

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

function colorMarker() {
  const svgTemplate = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="marker">
      <path fill-opacity=".25" d="M16 32s1.427-9.585 3.761-12.025c4.595-4.805 8.685-.99 8.685-.99s4.044 3.964-.526 8.743C25.514 30.245 16 32 16 32z"/>
      <path stroke="#fff" fill="#ff471a" d="M15.938 32S6 17.938 6 11.938C6 .125 15.938 0 15.938 0S26 .125 26 11.875C26 18.062 15.938 32 15.938 32zM16 6a4 4 0 100 8 4 4 0 000-8z"/>
    </svg>`;
  const icon = L.divIcon({
    className: "marker",
    html: svgTemplate,
    iconSize: [28, 28],
    iconAnchor: [12, 24],
    popupAnchor: [7, -16],
  });
  return icon;
}

marker = new L.marker([lat, lng], {
    icon: colorMarker(),
  }).bindPopup(popupText).addTo(map);

主要是在前面创建marker的时候传的这个icon,你也可以传普通的图片。

如果我们需要展示多个点的时候，我们可以把这些点的数据存储成一个json，并且把他作为一个JavaScript对象加载，再读取他把每个点添加到地图中。 我就创建了一个points.js的文件保存所有的点：

1
2
3

let points = [
    ["<b>北京</b><i>Beijing</i><a href='/2025-01-beijing/'><img src='https://img.isming.me/photo/IMG_20250101_133455.jpg' />北京游流水账</a>", 40.190632,116.412144],
    ["<b>广州</b><i>Guangzhou</i>", 23.1220615,113.3714803],];

内容大概如上：

1
2

<!--加载点数据，这样我们在javascript环境中就可以拿到points这个数组-->
 <script type="text/javascript" src="/points.js"></script>

以上加载了点数据，通过下面的代码来读取并且添加点：

1
2
3
4
5
6
7

for (let i = 0; i < points.length; i++) {
//循环遍历所有点，并且保存到如下三个变量中
  const [popupText, lat, lng] = points[i];
  marker = new L.marker([lat, lng], {
    icon: colorMarker(),
  }).bindPopup(popupText).addTo(map);
}

到此为止就完成了足迹点功能的开发。

去过的区域图层开发

而我们要实现去过的城市标记，这个时候就不是一个一个的点了，我们可能给去过的城市添加遮罩，这个其实就是给地图上画一个新的图层。每一个城市本质上就是许多个点围成的多边形，我们可以使用Leaflet提供的polygon方法来绘制，但是我们需要给把每个城市的多边形的各个顶点找到并且组织成一个数组，工作量真的是巨大的。

这样的难题我们不是第一个遇到的，前人已经遇到并且帮我们解决了。在2015年就有了GeoJson这种用Json描述的地理空间数据交换格式，他支持描述点，线，多边形。而Leaflet对齐也有支持。因此，我们只需要找到我们所需要的城市的geojson数据的MultiPolygon或者Polygon数据，就可以在Leaflet中进行绘制了。

对于中国的数据，我们可以在阿里云的datev平台进行下载，你可以省份数据或者按照城市甚至更小的行政单位下载数据。对于国外的数据可以到github上面去查找，这里是一份国家数据: datasets/geo-countries: Country polygons as GeoJSON in a datapackage

对于我们下载的中国的geojson数据，因为比较详细，也就比较大，我们可以使用mapshaper这个工具来对数据进行一些处理，直接使用Simplify功能，使用它减少点的数量，从而减少我们的文件的大小。

按照geojson文件格式，我们对于多个城市需要组成一个类似如下的json：

1
2
3
4
5
6

{
"type": "FeatureCollection", features: [
{"type": "Feature", "geometry": {"type": "Polygon", "coordinates": [[[88.40590939643968,22.55522906690669],[88.36498482718275,22.494854169816982],[88.28898205570562,22.51497913551355],[88.2714429545955,22.55235407180718],[88.32990662496253,22.55235407180718],[88.36498482718275,22.60410398359836],[88.35913846014606,22.62997893949395],[88.38837029532957,22.62710394439444],[88.40590939643968,22.55522906690669]]]}},
...
]
}

对于这样的一个json对象，我们就可以直接使用Leaflet的geojson文件进行加载，代码如下：

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

function onEachFeature(feature, layer) { // does this feature have a property named popupContent?
 if (feature.properties && feature.properties.popupContent) {
 layer.bindPopup(feature.properties.popupContent); //从json文件中读取属性进行popup展示
 }
}

var geojson = L.geoJSON(areas, {
 onEachFeature: onEachFeature,
  style: function (geoJsonFeature) {
    return {
      color: '#ffcc80', //设置遮罩的颜色
      fillOpacity: 0.4, //设置透明度
      stroke: false, //是否要显示边缘线
    };
  }
}).addTo(map);

对于geojson我们也可以在properties中设置弹框的内容进行展示。

总结

到这里我们就完成了基于leaflet的一个足迹地图，既包括足迹点，也包括去过的城市的遮罩。而geojson和Leaflet的功能远远不止这些，感兴趣的可以去看相关文档。另外因为我使用的地图是openstreetmap的数据，关于中国领土有争议的部分标记不正确，这个不在我的解决能力范围之内，只能暂且使用，但是不代表本人观点。

参考资料：

1. Tutorials - Leaflet - a JavaScript library for interactive maps
2. https://tomickigrzegorz.github.io/leaflet-examples/
3. GeoJSON - 维基百科，自由的百科全书
4. DataV.GeoAtlas地理小工具系列

看完评论一下吧