Skip to content

Latest commit

 

History

History
66 lines (31 loc) · 3.94 KB

File metadata and controls

66 lines (31 loc) · 3.94 KB

吴乐川的 HTML 文章排版与配色之方案集

导航

Multilingual Editions of this Article

本工具之简介

本工具可方便地创造一堆 CSS 文件,可谓是一套 CSS 样式集。这些 CSS 文件用于装饰从 Markdown 内容生成的 HTML 内容,以期改善文章之观感。通俗的说,就是文章的“主题”样式或“皮肤”。

一图胜千言。如果你很清楚本工具之用途,并且急于查阅这些 CSS 之应用之视觉效果,请阅读本文的《应用效果示例》章节。

本工具存在的意义

为什么要创建这些 CSS 文件呢

开发者们和工程师们常常要和一种叫做 Markdown 的文件打交道。或许他们中不少人与我一样喜欢自定义 Markdown 文件的观感,令阅读更舒适。

更准确地说,其实是自定义由这些 Markdown 文件所产生的 HTML 内容,而非直接作用于那些 Markdown 文件本身之内容。要装饰 HTML 就要用到 CSS 文件。 故此。

CSS 文件为何不止一个

  1. 人们需要多种配色主题

    • 首先,我们可能需要多种配色主题,来满足不同环境照明条件下的阅读需求。当今无数软件,任凭其手机端的也好,桌面端的也罢,不都提供明暗两套配色任君选用么?此处我设计多款 CSS 亦是同理。

    • 二来,人人自有不同的色彩偏好。

    • 有些视力障碍者对文章的配色也有特别的需求。

    • 有些人或许还会随心情变换阅读时的配色主题。

  2. 人们使用不同的软件工具

    何况,有些事情听起来简单,实则不然。用来阅读或处理 Markdown 文件的工具和环境五花八门:

    • 有人喜欢用神奇的 Typora 来阅读或处理 Markdown 文件。
    • 有人喜欢用 Visual Studio Code 这样的代码编辑器来查看和编辑 MarkDown 文件。
    • 还有人喜欢或必须利用命令行工具批量将 Markdown 文件生成 对应的 HTML 文件,然后自行阅读或分发出去

    须知,即便是同一个 Markdown 文件,经由不同的工具,产出的 HTML 内容也不尽相同,有时可谓大相径庭。HTML 有差异,用于装点 HTML 的 CSS 自然也有不同,难以通用。

综上,不同的光照环境、个人偏好、心境、生理特征,均要求不同的配色,而不同的软件环境或软件处理工具,其产生之 HTML 内容亦有差异。如此种种,往往需要不同的 CSS 文件。

应用场景

一套排版与配色方案(可简称为“主题配色“),加上一组可选的特性(例如【文章目录】、【快捷返回顶部之按钮】),组合为一,称为一个【应用场景(scenarios)】。

换言之,一套既定之配色方案,既可以额外搭配【文章目录】之功能,亦可省略此功能而。此即两种不同的【应用场景】矣。

具体之例,如本工具所谓默认的【应用场景】,是一套浅色的配色主题,加上一个【文章目录】组件和一个【快捷返回顶部之按钮】。对应的,该默认【应用场景】的输出文件包含一个 CSS 文件和一个 Javascript 文件。其中 CSS 的文件内容包含了针对文章主体配色的 CSS 规则,还包含针装饰对【文章目录】的 CSS 规则,和针对装饰【快捷返回顶部之按钮】的 CSS 规则部分。而配套之 Javascript 文件提供的功能也是针对上述两个可选特性的。

可谓各场景须有专用之 CSS 文件。