我用 Rust 写了个 WASM Blog

[zzhbbdbbd]

• 项目地址： https://github.com/zzhack-stack/zzhack
• 线上地址： https://zzhack.fun

（部署在 Vercel ，国内节点可能有点稀缺，挂上梯子访问更加喔）

上线没有多久，也欢迎各位 V 友像素眼勘查 bug

https://github.com/zzhack-stack/zzhack/issues

也欢迎各位 V 友交流技术心得，换友链的原贴在这里

[d29107d]

牛逼

[wsph123]

妙啊

[jazzg62]

感觉好顺畅啊，如果能再多点动画就更好了。然后不知道是不是我显示器色域的问题，我看你的文章字体有点太暗了，累眼睛

[zzhbbdbbd]

@jazzg62 动画后面会慢慢完善 :D

[zzhbbdbbd]

@jazzg62 第一次自己设计 UI ，所以有些地方设计的颜色啊啥的确实不太好，后面我再改一下

[jazzg62]

@zzhbbdbbd 哈哈，我先 star 了

[zzhbbdbbd]

@jazzg62 thxxxxxxxx

[weimo383]

不要用绿色，感觉 vuepress 一样，太单调

[lscho]

@jazzg62 进去第一眼就发现这个问题了，感觉是背景色与字体颜色对比度不够高，看字体比较累

[kele999]

美

[zzhbbdbbd]

@lscho 看起来比较严重，我再看看有没有其他合适的颜色

[wzzzx]

挺好看的，很棒！

[zzhbbdbbd]

@wzzzx thx ，也是第一次画 UI ，还有很多地方需要改进

[none]

看了下网页源码，这是一次性把多个网页的内容加载到本地了吗？ 如果这样的话，感觉对搜索引擎收录不友好，适合做后台应用

[zzhbbdbbd]

@none SEO 应该还好吧，是纯静态应用，在 compile-time 通过 CLI 把所有 markdown 的文章都一起打进 wasm 包里了，比较影响 SEO 的应该是这个应用是个 SPA ，但现在搜索引擎爬虫对 SPA 的支持应该不错了

[Leviathann]

yew 是 react 那种响应式模型吗？半自动响应式 + vdom ，整的闭包得一层套一层，useEffect 还不够又来个 useEvent
react 搞成这样是历史原因，如果是新的框架建议只考虑类似 solidjs 的

[codingBug]

我怎么觉得访问速度有点慢啊

[zzhbbdbbd]

需要挂梯子🪜

[AEDaydreamer]

请问你 UI 的学习过程是什么样的啊？我一直只会模仿同类 UI 照抄。

[zzhbbdbbd]

@AEDaydreamer 我也没有学习方法，我连 UI 的设计方法也没学明白，只是觉得怎样好看怎样设计了😂

[bs10081]

不知道為啥，在 macOS 上 Edge 沒辦法加載畫面，Safari 和 Chrome 則正常

網頁很流暢，速度很快！

[zzhbbdbbd]

@bs10081 可能跟 wasm 的支持有关，这个网站是一个 wasm 应用，渲染计算是 wasm 来做的，只有跟 DOM 有关（ commit 部分）的部分是 js

[codehz]

（看标题我还以为是说在 rust 里用 webgl/webgpu 渲染画面呢（
个人认为这里应该没啥性能优势——有的话就是原本 js 做的太烂（主要是 wasm 传输文本内容方面涉及多次复制，加上这部分本来也不会加速多少）

[zzhbbdbbd]

@codehz 如果不遇到瓶颈业务（计算密集），比如高帧刷新动画，复杂渲染交互等，是没有多少性能优势的，至少从用户体验上是感受不到的。用 rust 来编译 wasm 应用的目的不是这个，而是多一种可能性，原来浏览器只能跑 JS ，现在能跑第二种语言（ wasm ）来作为编译目标了，这是好玩的，是值得探索的。

所以你能感受到这并不是在替代 js 的路上，而只是因为好玩，好多有趣的事情如果突然严肃起来去跟业务扯上关系不就不再有趣了吗 :D

[v2defy]

我用 dioxus 写过一个小页面，感觉还是挺好的，不知道以后会不会出现 rust 前端开发 这种职位，哈哈

[zzhbbdbbd]

@v2defy 🤔我觉得应该不会，但可能会出现专门解决特定问题的 wasm lib 编写的职位

[boneyao]

自己做设计，自己开发吗？

[boneyao]

@boneyao 忽略我😂。https://www.zzhack.fun/about

[ragnaroks]

似乎没有搜索功能？

[zzhbbdbbd]

@ragnaroks 是的！搜索功能之前有设计但还没有时间来加上，后面会慢慢的完善起来

[ragnaroks]

@zzhbbdbbd 事实上我也正在实现一个完全静态的个人网站，正好也在处理搜索这里，我的做法是用 TS 写了个前端简易数据库，和 hexo 类似，最终产生一个巨大的 database.js 导入用于全文检索

[zzhbbdbbd]

@ragnaroks 我的做法和你类似，我是自己写了个 CLI ，在编译时把所有 markdown 的文章文件都打进一个 rust 文件（类似你的 database.js ），但我的存储结构在内存里只是一张线性表，对外暴露 service 来对这张线性表做查询。

```rust
pub static POSTS: [PostFile; 2] = [
PostFile {
content: include_str!("../../posts/build_blog.md"),
modified_time: 1654609915763,
filename: "build_blog"
},
PostFile {
content: include_str!("../../posts/add_links.md"),
modified_time: 1654855511389,
filename: "add_links"
},

];
```

不过线性表对查询并不是太友好，后面准备简单处理改成 hash 好了。
之前本想先落地到 indexedDB ，然后依赖 indexedDB 的 API 来做 CURD ，但后来想好像没啥必要。

[ragnaroks]

@zzhbbdbbd 可以，百花齐放，我的站是 http://www.ragnaroks.site/ ，目前还没加上搜索和标签，最近参加完美的 CSGO 比赛有点累

[zzhbbdbbd]

@ragnaroks 有兴趣交换友链吗 :)

[ragnaroks]

@zzhbbdbbd 可以，但是现在还没有做到友链模块，而且是内链（即首页 HTML 结构中没有），可以的话我在完善后娶你的仓库 PR

[zzhbbdbbd]

@ragnaroks 没问题，你也可以现在在我的 blog 上添加你的站点友链，后面你站点做了友链模块再加上我的也可以。

[Ixizi]

WASM 不一定要用 rust 写吧

[zzhbbdbbd]

@Ixizi 不一定，wasm 只是一个编译目标，任何实现了编译到 wasm 的编译的语言都可以。具体可以参见 https://webassembly.org/getting-started/developers-guide/

[aitaii]

blog_cover.svg 咋这么大

[zzhbbdbbd]

@aitaii sketch 直接做完导出的没有做压缩，图片资源不会阻塞渲染，只是看到一个加载的空框框会难受一点，压缩图片，移到国内的 cdn 后面可以慢慢优化

[luojianxhlxt]

edge 最新版本打开一个从未访问过的新网站，会“已增强安全性”，默认禁止 wasm

[zzhbbdbbd]

@luojianxhlxt 感谢反馈，现在 wasm 肯定还处于 unstable 的状态没有那么快要稳定

[maryshaw]

[FTX7-WIUa-UAMfohm.jpg]( https://postimg.cc/JDm4RV11)

[maryshaw]

github 被 尤雨溪 Sponsoring 了？

[shenyangno1]

很漂亮我很喜欢

[WebKit]

灰常好看，这个是参考了 ghost 的主题吗，非常奇怪，我挂了梯子打不开，不挂梯子打开很快

[zzhbbdbbd]

@WebKit 谢谢你的好评啊，设计没有参照其他的主题设计，都是自己设计的，如果有需要我可以开源设计稿 hhhh 。挂梯子和不挂梯子速度的快慢估计得看你挂梯子的代理服务器位置和你不挂梯子的位置对 Vercel 它自己的边缘节点的响应速度快慢了，可能你挂梯子的节点还是比较远 :D