网站大书

谢谢你继续读了下来哈哈. 这个页面主要是介绍一下我设计这个网站的思路. 虽然这个网站并不一定是我所有项目里体量最大的, 但是它是最重要的, 把我剩下的所有努力和心血集中在一起展示的平台.

如何阅读

当我设计这个网站的时候, 我有两个主要的问题需要思考, (一)是如何去处理, 整理, 和记录源源不断地去增长的内容, 设计呢. 我想, 我不光希望能够按照时间顺序像日记一样去记录, 同时又希望有机会能把不同的题目和类型分类整理, 让读者可以像使用工具书一样快速的查找, 希望可以在两者之间保持一个平衡. (二)是我该如何在文字中丝滑地加入各种可视化呢? 它应该除了可以让读者方便地阅读和理解, 与文字紧密地结合, 还应该让作者, 虽然大概率只有我, 也可以丝滑地, 像正常书写文字一样创作, 而不是被HTML, 或者JSX的左尖括号和右尖括号的海洋淹没.

我感觉逐渐写着写着就不是人话了哈哈哈.

为了解决第一个问题, 我设计了树的结构去表达内容之间的层次和深度. 在左边, 您可以看到有一些标题是带有三角标志的, 这个标志代表这个标题是一个"encapsulate", 封装的内容. 它里面有更多的内容, 但是为了简洁和流畅度的考虑被我隐藏了. 就好像是一个文件夹. 在菜单里, 那些带有三角标志的页面都是有更多隐藏内容的, 目前可以通过页面最底下的导航栏进入.

目标

我一直在思考, 什么方式可以去更好的表达自己的想法, 性格, 或者就是随笔. 我从大一就开始思考这个问题. 现在两年多过去了, 我想我是在逐渐接近答案. 其实这并不是一个技术问题, 而更像是一种人生问题. 我觉得什么东西是人生中比较重要的, 我该以什么形式去呈现, 去表达. 往小了说可能是照片, 视频, 往大了说可能是论文, 证书, 比赛. 每个人都有不同的关注点. 我想一种比较常见的选择是社交媒体, Instagram 或者微信朋友圈中的图片, 毕竟人眼可以看到的, 就可以化成图片. 但是或许还有更复杂的, 比如说学习本身, 或许只能通过游戏, 或者某种交互的形式去传达一系列的信息去模拟世界的反馈.

不知道为什么, 我感觉可能是我英文不好, 感觉写英文的部分反而简单. 可能某种角度读的英文少反而不会太理解读者的感受. 而且很多名词, 本来大概挺平易近人的, 一但用中文说出来就怪怪的. 可以想见有很多地方大概都不是人话. 我想确实所有的内容最好都落实到我实际干了什么, 和相关的随笔, 并不是说奇怪的技术名词堆在一起, 它们又不是我设计的.

关于技术部分的想法

在设计了若干次自己的网站并推倒重来之后, 我想, 搭一个我可以真正一直往上面添加新东西的结构是很重要的. 这样才能减少推倒重来的痛苦程度.

• 我希望我的网站既可以交互式的展示技术, 又可以记录文字. 目标是用网站介绍我的想法, 实践, 和技术, 而网站排版或者网站设计本身是相对次要, 应该是很次要的. 我希望读者可以关注在内容上, 而不是形式. 我希望我的网站可以可持续发展, 我未来所思考的, 设想的, 想展示的, 也可以漂亮地被加到之前的结构上.

• 我希望我的网站可以透明, 也就是说我尽可能要亲自设计每一步, 尽可能平衡便利和个性化. 这一方面便于未来的迁移, 一方面也不会受限于人, 更加灵活.

• 最后, 我希望网站是内容主导而不是技术主导, 我希望大块的时间可以放到内容上, 而不是技术的设计或者排版一类. 写作和表达的形式也要人性化, 最好不要有各种方便机器阅读的尖括号花括号, 或者任何起到相同作用的设计 (比如说你拿 A 当左括号 B 当右括号).

这样一来, 很多现成的社交媒体就不太符合我的标准, 首先是不够透明, 也不能让我自定义代码去展示我想展示的东西, 比如说算法, 可视化, 和 3D 显示的内容.

设计

为了实现内容主导和技术灵活, 比如说我未来想转成别的框架, 我用文件夹自带的结构和 Markdown 文件去作为内容的中间形态. 同时, 我把整个网站设计成了一本书的样子, 最直观, 某种角度上兼具线性和树状结构的优点.

更新: 现在都是用我自己做的简单的 Static Website Renderer 了.

为了模块化和相对快速的实现, 我暂时使用的是 NextJS. 我感觉用 React 的方式去设计模块相对来说还蛮清楚的. NextJS 也支持导出成 html 的静态形式, 蛮方便的.