\\nimport React from \\"react\\";\\n\\nif (process.env.NODE_ENV === \\"development\\") {\\n const whyDidYouRender = require(\\"@welldone-software/why-did-you-render\\");\\n whyDidYouRender(React, {\\n trackAllPureComponents: true,\\n });\\n}\\n\\n// 你也可以选择在需要时追踪特定的组件\\n// BigListPureComponent.whyDidYouRender = true\\n\\n
react-scan 是2024 年新出现的一个轻量级工具,主要用于可视化检测组件的重渲染情况。
\\n相比于 React DevTools 自带的 highlight 功能,react-scan 展示了更多的信息,包括组件的名称、更新次数,还能在选择组件之后展示更新的 props。
\\nReact Scan 更适合在开发阶段一直开启,帮助我们及早发现潜在的性能问题。配置非常简单,只需要在开发环境中引入即可,甚至还有 CDN 的脚本能够直接引入
\\nif (import.meta.env.DEV) {\\n const { scan } = await import(\\"react-scan\\");\\n scan({ enabled: true, log: true, showToolbar: true });\\n}\\n
\\nMillion Lint 和 React Scan 是同一个团队出品的,集成了一个实验性的编辑器扩展,在开发阶段就能随时发现应用中多次渲染的组件。
\\n但是由于这个 VSCode 扩展性能实在太差了,所以我最后还是把它关掉了。(一个性能优化工具本身性能不好,多么讽刺)
\\n解决性能问题的最好方法是预防性能问题的发生。使用合理且严格的规则并且充分理解 React 的工作机制,是避免性能问题的最好方法。
\\n以下是一份和 React 性能相关的严格 ESLint 规则,感谢 Garfield550的配置示例
\\n<details>\\n<summary>点击查看</summary>
\\nexport default [\\n {\\n files: [\\"**/*.?([cm])[jt]s?(x)\\"],\\n rules: {\\n // eslint-plugin-react-hooks\\n // https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks\\n \\"react-hooks/rules-of-hooks\\": \\"error\\",\\n \\"react-hooks/exhaustive-deps\\": \\"error\\",\\n\\n // eslint-plugin-react-compiler\\n // https://github.com/facebook/react/tree/main/compiler/packages/eslint-plugin-react-compiler\\n // \\"react-compiler/react-compiler\\": reactCompiler ? \\"error\\" : \\"off\\",\\n\\n // eslint-plugin-react-refresh\\n // https://github.com/ArnaudBarre/eslint-plugin-react-refresh\\n \\"react-refresh/only-export-components\\": \\"warn\\",\\n\\n // @eslint-react/eslint-plugin\\n // https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin\\n \\"@eslint-react/ensure-forward-ref-using-ref\\": \\"error\\",\\n \\"@eslint-react/jsx-no-duplicate-props\\": \\"error\\",\\n \\"@eslint-react/no-children-count\\": \\"error\\",\\n \\"@eslint-react/no-children-for-each\\": \\"error\\",\\n \\"@eslint-react/no-children-only\\": \\"error\\",\\n \\"@eslint-react/no-children-to-array\\": \\"error\\",\\n \\"@eslint-react/no-clone-element\\": \\"error\\",\\n \\"@eslint-react/no-comment-textnodes\\": \\"error\\",\\n \\"@eslint-react/no-implicit-key\\": \\"error\\",\\n \\"@eslint-react/no-missing-component-display-name\\": \\"error\\",\\n \\"@eslint-react/no-unstable-context-value\\": \\"error\\",\\n \\"@eslint-react/dom/no-children-in-void-dom-elements\\": \\"error\\",\\n\\n \\"@eslint-react/web-api/no-leaked-interval\\": \\"error\\",\\n \\"@eslint-react/web-api/no-leaked-resize-observer\\": \\"error\\",\\n \\"@eslint-react/web-api/no-leaked-timeout\\": \\"error\\",\\n \\"@eslint-react/hooks-extra/no-unnecessary-use-memo\\": \\"error\\",\\n \\"@eslint-react/hooks-extra/no-direct-set-state-in-use-effect\\": \\"error\\",\\n \\"@eslint-react/hooks-extra/no-direct-set-state-in-use-layout-effect\\":\\n \\"error\\",\\n },\\n },\\n];\\n
\\n</details>
\\n选择合适的工具组合可以帮助我们更好地发现和解决 React 应用中的性能问题。建议在开发过程中,将这些工具作为日常开发工具链的一部分,以便及早发现和解决性能问题。
","description":"React 是一个非常流行的前端框架,但是在使用 React 过程中,我们可能会遇到一些性能问题,比如页面卡顿、动画掉帧等问题。那么当我们遇到这些性能问题时,应该如何排查呢?本文将介绍一些常见的排查方法。 在普通的 JavaScript 应用中,我们通常使用 Chrome DevTools 的 Performance 面板来分析性能问题。但在 React 应用中,由于 React 的内部实现机制,火焰图中会出现大量 React 内部函数调用,这使得我们难以直观地定位到具体问题。\\n\\nReact 应用在 Performance 面板中的火焰图下十分细碎。因此…","guid":"https://www.waterwater.moe/posts/2025/react-performance/","author":null,"authorUrl":null,"authorAvatar":null,"publishedAt":"2025-01-01T10:55:42.151Z","media":[{"url":"https://www.waterwater.moe/assets/flame-graph.png","type":"photo"},{"url":"https://www.waterwater.moe/assets/react-flame-graph.png","type":"photo"},{"url":"https://www.waterwater.moe/assets/react-hook.png","type":"photo"},{"url":"https://github.com/welldone-software/why-did-you-render/raw/master/images/logOwnerReasons.png","type":"photo","width":1516,"height":402,"blurhash":"L9R:7[.9Ip_3~Bxtt7t6-;%LtQax"},{"url":"https://raw.githubusercontent.com/aidenybai/react-scan/refs/heads/main/.github/assets/demo.gif","type":"photo","width":768,"height":480,"blurhash":"LyLqe9Rjt8Rj00Rjt7Rj00RjofRj"}],"categories":null,"attachments":null,"extra":null,"language":null},{"title":"博客构建历程:从 Hexo 到 Astro","url":"https://waterwater.moe/posts/2024/blog-migration/","content":"\\n\\n这张封面 🍥Fuwari 主题自带的用法示例,为了参考,我选择将其保留
\\nCover image source: Source
\\n
在2016年4月,我还在念书时偶然发现了 GitHub Pages 提供的免费托管静态网站功能,于是我拉上同学一起尝试搭建自己的博客。由于对前端一窍不通,只能选择一些现成的主题,最终选择使用 Hexo 这个简单的静态博客框架。通过各种折腾文档,我成功将博客搭建起来并部署到了 GitHub Pages 上。那时候我采用的是 Hexo 自带的默认主题,部署方式是在本地构建完成后直接推送到 GitHub 仓库的 gh-pages 分支上。如果本地的 markdown 文件丢失,博客内容就很难找回了。
\\n到了2018年5月,我对前端和版本控制有了更深的理解,便重构了整个博客项目,选择了 hexo-theme-yilia 这个简约优雅的主题,并为博客添加了 Travis CI 自动部署功能。这样一来,只要在 GitHub 上提交新的文章,Travis CI 就会自动构建并部署到 GitHub Pages。这种方式不仅免除了本地文件丢失的担忧,还大大提高了部署的便捷性。
\\n不过随着时间的推移,GitHub Actions 逐渐取代了 Travis CI,我也在 2021 年的六月将博客的自动部署迁移到了 GitHub Actions 上,那个时候我还在用 Node.js v13。
\\n前端技术更新换代非常快,在使用 Hexo 期间,出现了很多新的静态网站生成器,如 Gatsby、VuePress、Astro 等等。Hexo 自身也不断更新。终于在2024年初,我找时间将博客的各种依赖升级到最新,并将 Hexo 升级到了 7.0 版本,同时更换了主题 hexo-theme-butterfly。值得一提的是,现在可以在 package.json 中直接安装主题,不再需要手动 clone 主题仓库。升级后,整个项目非常干净,仅包含 markdown 文件和配置文件,极其优雅。
\\n使用 butterfly 主题后,博客的界面焕然一新,变得更加美观和现代化。如果不是因为下面要说的静态资源管理问题,我可能会一直使用这个主题。
\\n但是在写博客过程中,静态资源(图片)的管理一直是一个问题,我要么选择将图片放在不知道能够存活多久的图床上,要么将图片全部塞进统一的资源文件夹中。即使 Hexo 提供了 post_asset_folder 功能,也只是将图片放在和 markdown 文件同名的文件夹中,和我理想的 TextBundle 模式还是有一点区别,没法将所有内容装在一个文件夹中,一个拷贝直接带走。
\\n这朵乌云一直笼罩在我的心头,导致我在写博客的时候一直不愿意添加图片。我甚至用出了将图片转为 base64 内联在 markdown 文件中的邪道。但是这样一来,markdown 文件会变得非常巨大,难以维护。
\\n在 2024 年年中的时候,我因为需要写文档站点,尝试了 Astro 这个新的网站框架,它的特点是内容驱动,框架无关,并且能自动优化网站的资源,能够大大减小网站的体积。最重要的是,我发现它的内容管理方式非常符合我的需求,不仅可以将图片和 markdown 文件放在一起,构建的时候还能自动将图片转为 webp 格式。我可以放心地为文章添加图片了。
\\n项目的迁移计划被安排在 9 月,我在两个都很好看的主题 Typography 和 🍥Fuwari 中选择了更有特点(花里胡哨)的 🍥Fuwari 主题,也就是你现在看到这个。
\\n项目的迁移过程非常顺利,我只需要将博客内容 src/content/posts/
目录下,然后更新整个网站的配置,就可以在本地预览和构建了。这个过程非常简单,我只用了不到半个晚上的时间就完成了基本的迁移工作。
只是我不得不 fork 主题仓库,把主题源码全部贴进自己仓库。如果主题更新了,我可能需要手动合并更新,这一点有点麻烦。希望随着时间的推移,这些问题能得到解决。
\\n此外,我隐藏了没有使用的 category 功能,仅保留了 tags 功能。我认为 tags 更加灵活,可以随意添加。
\\n我不知道下一次重构博客会在什么时候,也不确定会采用什么技术。但是我希望到那时,新的博客能变得更加有趣和个性化。希望你会喜欢这个全新的博客。
\\n使用 base64 内联图片的方法:
\\n![image name][image_label]\\n\\n[image_label]: data:image/png;base64,iVBORw0KXXXXXXXX\\n
\\n至于如何将图片转为 base64,我使用了 CyberChef 这个工具,只要调整好参数将图片拖进去,就可以得到 base64 字符串
\\n\\n以下内容是 Fuwari 主题自带的简单指南,我选择将其保留用于备忘和参考:
\\nThis blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.
\\n---\\ntitle: My First Blog Post\\npublished: 2023-09-09\\ndescription: This is the first post of my new Astro blog.\\nimage: ./cover.jpg\\ntags: [Foo, Bar]\\ncategory: Front-end\\ndraft: false\\n---\\n
\\nAttribute | \\nDescription | \\n
---|---|
title | \\nThe title of the post. | \\n
published | \\nThe date the post was published. | \\n
description | \\nA short description of the post. Displayed on index page. | \\n
image | \\nThe cover image path of the post.<br/>1. Start with http:// or https:// : Use web image<br/>2. Start with / : For image in public dir<br/>3. With none of the prefixes: Relative to the markdown file | \\n
tags | \\nThe tags of the post. | \\n
category | \\nThe category of the post. | \\n
draft | \\nIf this post is still a draft, which won\'t be displayed. | \\n
Your post files should be placed in src/content/posts/
directory. You can also create sub-directories to better organize your posts and assets.
src/content/posts/\\n├── post-1.md\\n└── post-2/\\n ├── cover.png\\n └── index.md\\n
\\n","description":"这张封面 🍥Fuwari 主题自带的用法示例,为了参考,我选择将其保留 Cover image source: Source\\n\\n初探 GitHub Pages\\n\\n在2016年4月,我还在念书时偶然发现了 GitHub Pages 提供的免费托管静态网站功能,于是我拉上同学一起尝试搭建自己的博客。由于对前端一窍不通,只能选择一些现成的主题,最终选择使用 Hexo 这个简单的静态博客框架。通过各种折腾文档,我成功将博客搭建起来并部署到了 GitHub Pages 上。那时候我采用的是 Hexo 自带的默认主题,部署方式是在本地构建完成后直接推送到…","guid":"https://waterwater.moe/posts/2024/blog-migration/","author":null,"authorUrl":null,"authorAvatar":null,"publishedAt":"2024-09-06T00:00:00.908Z","media":[{"url":"./butterfly-theme.png","type":"photo"},{"url":"./fuwari-theme.png","type":"photo"}],"categories":null,"attachments":null,"extra":null,"language":null},{"title":"博客构建历程:从 Hexo 到 Astro","url":"https://www.waterwater.moe/posts/2024/blog-migration/","content":"\\n\\n这张封面 Fuwari 主题自带的用法示例,为了参考,我选择将其保留
\\nCover image source: Source
\\n
在2016年4月,我还在念书时偶然发现了 GitHub Pages 提供的免费托管静态网站功能,于是我拉上同学一起尝试搭建自己的博客。由于对前端一窍不通,只能选择一些现成的主题,最终选择使用 Hexo 这个简单的静态博客框架。通过各种折腾文档,我成功将博客搭建起来并部署到了 GitHub Pages 上。那时候我采用的是 Hexo 自带的默认主题,部署方式是在本地构建完成后直接推送到 GitHub 仓库的 gh-pages 分支上。如果本地的 markdown 文件丢失,博客内容就很难找回了。
\\n到了2018年5月,我对前端和版本控制有了更深的理解,便重构了整个博客项目,选择了 hexo-theme-yilia 这个简约优雅的主题,并为博客添加了 Travis CI 自动部署功能。这样一来,只要在 GitHub 上提交新的文章,Travis CI 就会自动构建并部署到 GitHub Pages。这种方式不仅免除了本地文件丢失的担忧,还大大提高了部署的便捷性。
\\n不过随着时间的推移,GitHub Actions 逐渐取代了 Travis CI,我也在 2021 年的六月将博客的自动部署迁移到了 GitHub Actions 上,那个时候我还在用 Node.js v13。
\\n前端技术更新换代非常快,在使用 Hexo 期间,出现了很多新的静态网站生成器,如 Gatsby、VuePress、Astro 等等。Hexo 自身也不断更新。终于在2024年初,我找时间将博客的各种依赖升级到最新,并将 Hexo 升级到了 7.0 版本,同时更换了主题 hexo-theme-butterfly。值得一提的是,现在可以在 package.json 中直接安装主题,不再需要手动 clone 主题仓库。升级后,整个项目非常干净,仅包含 markdown 文件和配置文件,极其优雅。
\\n使用 butterfly 主题后,博客的界面焕然一新,变得更加美观和现代化。如果不是因为下面要说的静态资源管理问题,我可能会一直使用这个主题。
\\n但是在写博客过程中,静态资源(图片)的管理一直是一个问题,我要么选择将图片放在不知道能够存活多久的图床上,要么将图片全部塞进统一的资源文件夹中。即使 Hexo 提供了 post_asset_folder 功能,也只是将图片放在和 markdown 文件同名的文件夹中,和我理想的 TextBundle 模式还是有一点区别,没法将所有内容装在一个文件夹中,一个拷贝直接带走。
\\n这朵乌云一直笼罩在我的心头,导致我在写博客的时候一直不愿意添加图片。我甚至用出了将图片转为 base64 内联在 markdown 文件中的邪道。但是这样一来,markdown 文件会变得非常巨大,难以维护。
\\n在 2024 年年中的时候,我因为需要写文档站点,尝试了 Astro 这个新的网站框架,它的特点是内容驱动,框架无关,并且能自动优化网站的资源,能够大大减小网站的体积。最重要的是,我发现它的内容管理方式非常符合我的需求,不仅可以将图片和 markdown 文件放在一起,构建的时候还能自动将图片转为 webp 格式。我可以放心地为文章添加图片了。
\\n项目的迁移计划被安排在 9 月,我在两个都很好看的主题 Typography 和 Fuwari 中选择了更有特点(花里胡哨)的 Fuwari 主题,也就是你现在看到这个。
\\n项目的迁移过程非常顺利,我只需要将博客内容 src/content/posts/
目录下,然后更新整个网站的配置,就可以在本地预览和构建了。这个过程非常简单,我只用了不到半个晚上的时间就完成了基本的迁移工作。
只是我不得不 fork 主题仓库,把主题源码全部贴进自己仓库。如果主题更新了,我可能需要手动合并更新,这一点有点麻烦。希望随着时间的推移,这些问题能得到解决。
\\n此外,我隐藏了没有使用的 category 功能,仅保留了 tags 功能。我认为 tags 更加灵活,可以随意添加。
\\n我不知道下一次重构博客会在什么时候,也不确定会采用什么技术。但是我希望到那时,新的博客能变得更加有趣和个性化。希望你会喜欢这个全新的博客。
\\n使用 base64 内联图片的方法:
\\n![image name][image_label]\\n\\n[image_label]: data:image/png;base64,iVBORw0KXXXXXXXX\\n
\\n至于如何将图片转为 base64,我使用了 CyberChef 这个工具,只要调整好参数将图片拖进去,就可以得到 base64 字符串
\\n\\n以下内容是 Fuwari 主题自带的简单指南,我选择将其保留用于备忘和参考:
\\nThis blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.
\\n---\\ntitle: My First Blog Post\\npublished: 2023-09-09\\ndescription: This is the first post of my new Astro blog.\\nimage: ./cover.jpg\\ntags: [Foo, Bar]\\ncategory: Front-end\\ndraft: false\\n---\\n
\\nAttribute | \\nDescription | \\n
---|---|
title | \\nThe title of the post. | \\n
published | \\nThe date the post was published. | \\n
description | \\nA short description of the post. Displayed on index page. | \\n
image | \\nThe cover image path of the post.<br/>1. Start with http:// or https:// : Use web image<br/>2. Start with / : For image in public dir<br/>3. With none of the prefixes: Relative to the markdown file | \\n
tags | \\nThe tags of the post. | \\n
category | \\nThe category of the post. | \\n
draft | \\nIf this post is still a draft, which won\'t be displayed. | \\n
Your post files should be placed in src/content/posts/
directory. You can also create sub-directories to better organize your posts and assets.
src/content/posts/\\n├── post-1.md\\n└── post-2/\\n ├── cover.png\\n └── index.md\\n
","description":"这张封面 Fuwari 主题自带的用法示例,为了参考,我选择将其保留 Cover image source: Source\\n\\n初探 GitHub Pages\\n\\n在2016年4月,我还在念书时偶然发现了 GitHub Pages 提供的免费托管静态网站功能,于是我拉上同学一起尝试搭建自己的博客。由于对前端一窍不通,只能选择一些现成的主题,最终选择使用 Hexo 这个简单的静态博客框架。通过各种折腾文档,我成功将博客搭建起来并部署到了 GitHub Pages 上。那时候我采用的是 Hexo 自带的默认主题,部署方式是在本地构建完成后直接推送到 GitHub…","guid":"https://www.waterwater.moe/posts/2024/blog-migration/","author":null,"authorUrl":null,"authorAvatar":null,"publishedAt":"2024-09-06T00:00:00.426Z","media":[{"url":"https://www.waterwater.moe/butterfly-theme.png","type":"photo"},{"url":"https://www.waterwater.moe/fuwari-theme.png","type":"photo"}],"categories":null,"attachments":null,"extra":null,"language":null},{"title":"新加坡美食分享","url":"https://www.waterwater.moe/posts/2024/%E6%96%B0%E5%8A%A0%E5%9D%A1%E7%BE%8E%E9%A3%9F%E5%88%86%E4%BA%AB/","content":"这次的新加坡之行吃到了非常多的美食,而且一次都没有踩雷!因此记录一下吃过的美食,还混了一点马来西亚的。哦对了新加坡的餐馆不提供纸巾,所以请自己备足(直接在包里塞一包一百抽的
\\n亚坤咖椰吐司,最经典的新加坡老字号早餐,全坡到处都是。在这次近一周的旅途中,我一共吃了三顿,足以证明它的好吃。
\\n蛋的吃法是咖椰吐司蘸着蛋液吃,一开始还不是很习惯吃这么生的蛋,总之相信发达国家的卫生吧。
\\n下图最经典的咖椰黄油吐司+咖啡+温泉蛋套餐一共 S$6.3(大约 33RMB)
\\n大名鼎鼎的松发肉骨茶,在新加坡也有大量的连锁店,而且随时都排着长队。下图这碗经典的排骨肉骨茶一共 S$8.8(约47RMB),肉的熟度刚刚好,汤里加了胡椒,稍微有一点点咸,服务员会不断过来加汤,所以可以猛猛喝。
\\n他家的菜品并没有那种惊艳的好吃,但是找不出缺点,所以值得一试。哦新加坡的长米完全不粘,口感很差,这个感觉是通病,就不算在松发的头上了。
\\n五人吃到饱,人均 S$25(约 133RMB)。另外,油条也是可以蘸着肉骨汤吃的,然后中间两盘肉好吃(一盘是扣肉另一盘忘了),鸡爪比较普通
\\n在牛车水的 maxwell 熟食中心,只要 S$7(约 37RMB)。第一次尝试叻沙选了微辣,这个咖喱的汤底配上微甜的椰香太棒了。有点像国内的沙茶面的汤底那种感觉,但味道完全不一样。顶上加的豆制品之类的浇头味道也是完全没吃过的口感。总之非常推荐大家尝试叻沙。
\\n地址:1 Kadayanallur St, #01-04 Maxwell Food Centre, Singapore 069184
\\n还是在 maxwell 熟食中心的天天海南鸡饭,米饭是好吃的米饭,配上酱汁很好吃,但整体并不特别,不值得排那么长的队。下面这份白斩鸡 S$6(约 32RMB)。
\\n了凡油鸡饭,新加坡比较有名的米其林小店。米饭上的酱很独特,面的口感也很特别,一般的好吃。豉油鸡饭、叉烧饭一共 S$20(约107RMB)
\\n在新加坡小印度尝鲜的应该算比较正宗的印度菜,店里店员和其他顾客都是印度人。看着隔壁桌印度人点了一份咖喱然后把咖喱倒进饭里,然后用手!把米饭和咖喱拌在一起。那一刻我就觉得来对了,然后开始默默祈祷店员一会给我们餐具。
\\n总之服务员是给了餐具的(松了一口气),顶上那个馕是更像是不那么脆的薯片,边上的酱汁很辣,米饭还是那种毫无口感的难吃的长米。整体上吃的不习惯,没有吃完但是非常满意。
\\n两人一共 S$17(约 90RMB)
\\n地址:13 Veerasamy Rd, Singapore 207321
\\n马来西亚新山的西餐店,虽然是披萨招牌但是我们并没有吃披萨。各个菜都很不错,尤其是这瓶饮料,颜值太高了,甜品还巨大,而且两人竟然只吃了 MYR99.5(约 153RMB)
\\n地址:Paradigm Mall JB, 4F-45A, Skudai Hwy, Taman Bukit Mewah, 81200 Johor Bahru, Johor, Malaysia
\\n在马来西亚新山的陈旭年文化街。左边是椰浆饭,右边是老鼠粉,一共 MYR38.5(约 60RMB)。椰浆饭是难吃的米,而且椰浆味很淡,老鼠粉挺好吃。
\\n地址:11, Jalan Dhoby, Bandar Johor Bahru, 80000 Johor Bahru, Johor, Malaysia
\\n是家到处都有的椰子水店,椰子味浓厚且清新,而且底下还有椰子碎。
","description":"这次的新加坡之行吃到了非常多的美食,而且一次都没有踩雷!因此记录一下吃过的美食,还混了一点马来西亚的。哦对了新加坡的餐馆不提供纸巾,所以请自己备足(直接在包里塞一包一百抽的 亚坤咖椰吐司,最经典的新加坡老字号早餐,全坡到处都是。在这次近一周的旅途中,我一共吃了三顿,足以证明它的好吃。\\n\\n蛋的吃法是咖椰吐司蘸着蛋液吃,一开始还不是很习惯吃这么生的蛋,总之相信发达国家的卫生吧。\\n\\n下图最经典的咖椰黄油吐司+咖啡+温泉蛋套餐一共 S$6.3(大约 33RMB)\\n\\nSong Fa Bak Kut Teh\\n\\n大名鼎鼎的松发肉骨茶,在新加坡也有大量的连锁店…","guid":"https://www.waterwater.moe/posts/2024/%E6%96%B0%E5%8A%A0%E5%9D%A1%E7%BE%8E%E9%A3%9F%E5%88%86%E4%BA%AB/","author":null,"authorUrl":null,"authorAvatar":null,"publishedAt":"2024-05-06T00:00:00.085Z","media":[{"url":"https://www.waterwater.moe/assets/qWU3covF5v1_7GY3Gv1YUtMP2r2lhuYe8csU6ugoPa4=.blob.jpg","type":"photo"},{"url":"https://www.waterwater.moe/assets/CDUTwcbf4fy5U7zfnPm6ksNuFnjM1MtTZtee_ZshhFQ=.blob.jpg","type":"photo"},{"url":"https://www.waterwater.moe/assets/mMGSwberfvNuWH3EEEdTo33dpcOLD-PzTXSMytSYhUY=.blob.jpg","type":"photo"},{"url":"https://www.waterwater.moe/assets/d9WTUNyiYgLXyoV3FeEyysh1SWxzVp6J-0CEAbELbXI=.blob.jpg","type":"photo"},{"url":"https://www.waterwater.moe/assets/R25baRMYarKCJQETyG_IOM39LH_3DzL2MA29OmGYTiI=.blob.jpg","type":"photo"},{"url":"https://www.waterwater.moe/assets/eu4Z2vYHlgUXHW43QsPenZ376xytGbqNV5EyOAy0Bk4=.blob.jpg","type":"photo"},{"url":"https://www.waterwater.moe/assets/X2WtmK6ZnKVdm9a7ttyuRNQ5vApQCC1DrIRgeDRSKxw=.blob.jpg","type":"photo"},{"url":"https://www.waterwater.moe/assets/5Q5KRFtSp7cktTTsyeZb1TdgkGd5oh15kz8_Y_l0pxk=.blob.jpg","type":"photo"},{"url":"https://www.waterwater.moe/assets/V6Zx-I-EypSMK-G9hJdQxz_OxRYmZpo4vHxljW-BpLk=.blob.jpg","type":"photo"}],"categories":null,"attachments":null,"extra":null,"language":null}],"readCount":20,"subscriptionCount":7,"analytics":{"feedId":"41549370910864384","updatesPerWeek":null,"subscriptionCount":7,"latestEntryPublishedAt":null,"view":0}}')