%E5%BC%80%E5%8F%91%E6%97%A5%E5%BF%97 - Winterreisender/mochahub GitHub Wiki

2023-4-9

最初订立的目标基本完成了,可以着手发布第一个版本了。接下来要在易用性上下功夫。

2023-3-29

开发遇到了一些困难。首先是没有找到用于CSS的模板引擎,无法让用户通过配置文件自定义一些样式(字体,颜色等等)。 其次是尝试添加内置音乐播放器的尝试失败了。很难用纯HTML+CSS来实现。
另外搜索引擎和查询资料的体验真的非常糟糕。

2023-3-20

用HTML5标准的<a>替换了最后一行JS代码。<a>标签中添加块级元素是完全符合HTML5标准的
关于不用JS来设计网站的想法有很多,比如youmightnotneedjs.com。JS本来的目的是处理复杂的交互和效果,只要保持简单纯粹就可以避免用JS。
这个过程中也遇到了<a>的样式和普通链接重合的问题。解决方法是给包含块元素的添加下面的样式

.no-style,
.no-style:hover {
  all: unset;
}

然后在h3中添加class="link",补充原有动画。

.link,
a {
  ...
}

另外可以看到site-card的样式因此变得混乱,需要尝试用web componet解耦。

2023-3-19

最近比较忙,这里重新记录一下本项目的目标。

  1. 简洁美观: 要有背景图片和UI设计。同时不要复杂的视觉元素。
  2. 小巧克制: 控制代码体积和项目总体积。慎重增加新功能。尽量减少JS代码,要在NoScript下能够使用基本功能。不做旧浏览器的Pollify,交给用户来做。
  3. 易用: 没有任何IT经验的稍微懂些电脑的普通人可以使用本项目的基本功能。有Web经验的可以轻松定制样式。
  4. 充分使用现代Web标准

2023-3-18

我们仍在打磨一些细节,比如背景图片问题。在选用背景图片时要充分考虑不同设备的屏幕尺寸,最好选择有明确方向的图片,比如这张,它在裁剪时应当优先保留左下部分。

body {
  background-attachment: fixed;
  background-size: cover;
  background-position: bottom left; /* 优先保留右下部分 */
}

但是很遗憾,没有方法让任何图片都能在任何设备上正常显示,最实用的方法是去掉背景图片,然后推行所谓的“极简”设计,这是很多大公司的做法。但网页的背景图片对本项目来说是必要的。我们会想很多办法来改进背景图片的效果。

2023-3-15

我们不得不在易用性上做出一些妥协,以换取Vite更完整的检测和打包功能。具体的做法是把文件从public文件夹移动到外部。 另外这也导致GitHub Pages因URL区分大小写无法正常显示。在涉及URL的字符串中,应当尽量避免驼峰命名。 我们的目标是小巧、美观、易用目前来看,在易用方面还需要很多工作要做。

⚠️ **GitHub.com Fallback** ⚠️