Hello World: Testing Tufte-like Styles

这是博客的第一篇文章。本文将展示的基本排版元素。

中英文混排

Good typography is invisible. 好的排版是无形的——它让读者专注于内容本身，而非排版设计。这是 Tufte 设计哲学的核心。 Edward Tufte 的设计哲学强调信息密度与视觉清晰度的平衡。

边注示例

在 Tufte 的设计中，边注（margin notes）是一个重要元素。 + 边注不带编号，适合用于补充说明或引用来源。 它们可以在不打断正文阅读流程的情况下，提供额外的上下文信息。

引用

This is an example of an epigraph with some math $\mathbb N \subseteq \mathbb R$ to start the beginning of a section.

这个博客支持上面这种特殊的”epigraph”引用。当需要为每个大章节点缀一首诗，那么这种样式最合适不过。 另外博客中也支持行内引用，当正文中的某一句话需要表现出引用的效果，又不想打断整体的阅读体验时，只需要用 <Cite> 把要引用的文字框起来就可以了：This is between cite tags and has math: $e^x$

单独的引用块也可以，只要按照 markdown 的语法 > 就可以轻松实现。

The purpose of visualization is insight, not pictures.

— Edward Tufte

但像这种需要标注出作者、来源、以及网址之类的引用，就需要使用 <Blockquote>。

This is a blockquote with two paragraphs, that employs the theme’s blockquote shortcode. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

列表

• 清晰的层次结构
• 合理的留白
• 优雅的字体选择
• 恰当的行高

这些都是 Tufte 设计风格的核心要素。 这些原则源自 Edward Tufte 的著作《The Visual Display of Quantitative Information》。

A Bit About Mathematics 来一点数学

Some inline math: $e^{i \pi} = -1$ and $\sqrt{-1} = i$ and $a_2 = 3$.

Currently, certain $\LaTeX$ environments need to be escaped so that the markdown processor does not override Katex. Currently, display environments should be enclosed in <p> tags and blank lines. For instance:

$$\begin{aligned} \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y) = \int_I \left( \int_I \chi_A (x,y) \ dx\right) dy = \int_I 0 \ dy= 0 \quad \text{and} \\ \mu(A) &=\iint_{I^2} \chi_A (x,y) \ d(x,y) = \int_I \left( \int_I \chi_A (x,y) \ dy \right) dx =\int_I dx = 1, \end{aligned}$$

is produced from

$$
\begin{aligned}
  \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y)
  = \int_I \left( \int_I  \chi_A (x,y) \ dx\right) dy
  = \int_I 0 \ dy= 0 \quad \text{and} \\
  \mu(A) &=\iint_{I^2}  \chi_A (x,y) \ d(x,y)
  = \int_I \left(  \int_I \chi_A (x,y) \ dy \right) dx
  =\int_I dx = 1,
\end{aligned}
$$

Code 代码块

As an example of some inline code: go test -v -short. And this is some block-code:

package main

import "log"

func add(x int, y int) int {
  log.Println("We are going to take the sum of two numbers, and leave a long comment.")
  return x + y
}

func main() {
  y := add(1, 2)
  log.Println(y)
}

Here’s an example without line numbers.

package main

import "log"

func add(x int, y int) int {
  log.Println("We are going to take the sum of two numbers, and leave a very very very long comment.")
  return x + y
}

func main() {
  y := add(1, 2)
  log.Println(y)
}

Figure 图片

Below we have an example of a regular width figure.

□ Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice (London, 1953)

But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate.

在图片的文件格式上并没有特殊要求，从普通的 png、jpg 到 webp 都可以正常显示。包括 svg 图片也没有问题：

Table 表格

Tables	Are	Cool
col 1 is	left-aligned	$1600
col 2 is	centered	$12
col 3 is	right-aligned	$1

Ruby ( <ruby/> ) Annotation 文字注音

Another very important feature is a <Ruby/> mark. It supports not only latin but also CJK character sets.

The Word ( Pronunciation ) <Ruby mark="Pronunciation">The Word</Ruby>

中文 ( zhōng wén ) 可以注音，日本語の文字に 振り仮名 ( ふりがな ) をつけることも可能である。

A Story About Cats

Climb a tree, wait for a fireman jump to fireman then scratch his face sleep on dog bed, force dog to sleep on floor cat snacks, and eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap climb a tree, wait for a fireman jump to fireman then scratch his face put toy mouse in food bowl run out of litter box at full speed . See owner, run in terror chase mice, so thinking longingly about tuna brine for eat a plant, kill a hand for wake up human for food at 4am. Human is washing you why halp oh the horror flee scratch hiss bite scratch the furniture and rub face on owner. Loves cheeseburgers see owner, run in terror chew on cable. Thug cat ignore the squirrels, you’ll never catch them anyway. Eat a plant, kill a hand find empty spot in cupboard and sleep all day so hide head under blanket so no one can see yet love to play with owner’s hair tie rub face on everything i like big cats and i can not lie. Wake up human for food at 4am stare at the wall, play with food and get confused by dust yet then cats take over the world scamper. Inspect anything brought into the house get video posted to internet for chasing red dot. Brown cats with pink ears chew foot spit up on light gray carpet instead of adjacent linoleum. I am the best wake up human for food at 4am, meow spread kitty litter all over house, for meow. Knock dish off table head butt cant eat out of my own dish jump off balcony, onto stranger’s head, chase ball of string scream at teh bath but climb leg, so unwrap toilet paper but destroy couch. Climb a tree, wait for a fireman jump to fireman then scratch his face. Leave hair everywhere swat turds around the house eat grass, throw it back up, and eat grass, throw it back up. Chase after silly colored fish toys around the house.

We really like cats.

Yes, they are fluffy and happy.