这是怎样一个博客生成器

本文介绍了你正在访问的网页是如何生成

哪点与众不同?

本博客生成器用的是 Makefile、Perl 和 Pandoc,还有一点点 CSS 和 JavaScript,没有用其他工具和语言,不用担心自己的博客生成器更新、或者自己换了一台电脑或者操作系统就不能码字1。安装起来很方便,因为 1)如果你用 Windows 操作系统还使用 Git,perl 就已经包含在 git for windows 里了,额外你只要安装 Pandoc;2)如果你使用 Linux 操作系统,只要安装 Pandoc(官方源里的太旧)。如何生成这个“网站”,具体参考 district10/blog#Build one / 从 Markdown 源码生成

当然其它的博客工具通常都很酷炫,如果你要的是那种,可以用 HexoJekyll。本博客生成器比他们简单得多,而且不是 responsive design,在手机上或许惨不忍睹2。但好处是兼容性好、稳定、也不太难看。字体的选择和配色我也是拼了老命改了很久3,不然怎么能像现在一样动人。

建议快速看一下博客的特性,再到 我要来一个 章节看如何在 Windows/Linux 上安装使用,备份在 GitHub,托管到七牛云盘。

支持的特性

增强的 Mardown

强调
强调

:   * **加粗**、*斜体*,或者***一起用***
    * ~~2^^10^^ = 2014~~ ==> 2^^10^^ = 1024, H~2~O 和 $H_2O$ 都是生命之源[^water]
    * 三种连字符:1 - 1,1 -- 8,1 --- one(hyphen, en-dash,em-dash)
    * <span style="font-variant:small-caps;">Small caps</span>
    * <kbd>c-x</kbd> 在 Emacs 里指的是 Control-X

[^water]: 看上去不一样,其实都是“水”。
列表

有序列表

  1. Stay hungry
  2. Stay foolish

无序列表

一起用

  1. one
  2. two
    • two-one
    • two-two
  3. three
    1. three-one
    2. three-two
表格

这部分的 CSS 我还没有调好,只是勉强能用。

Right Left Default Center
12 12 12 12
123 123 123 123
1 1 1 1
引用

下面这段来自Terminator 2(终结者)

The future has not been written. There is no fate but what we make for ourselves. I wish I could believe that. My name is John Connor, they tried to murder me before I was born, when I was 13 they tried again. Machines from the future. Terminators…

章节

header 1–6

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
Markdown 中使用 HTML

下面是一个 <div style="background-color=violet"> 的 HTML 标记:

一个“黑纸白字”的段落

你可以用 HTML 标记来加粗斜体或者改变文字的 颜色字号font family 还可使用 Markdown,如下:

:这些文字在一个 <div markdown="1" style="background-color:yellow;margin:10px;"> 中用 Markdown 写成

可以 加粗 也可以 斜体

甚至可以使用 Pandoc Markdown 的上下标(以及列表):

  • 210 = 2014
  • 210 = 1024
  • H2O 是生命之源
Key Value Notes
Foo fool 第一列居中
Bar barbaric 第二列右对齐
Cup cap cup c u dummy 第三列左对齐
页内引用

点我 回到“与众不同”小节(这是定制的 tag)

点我 回到“支持的特性”小节(这是自动生成的 tag),具体看 源码

列表自动编号
  1. one
  2. two
  1. Ninth
  2. Tenth
  3. Eleventh
    1. subone
    2. subtwo
    3. subthree

    4. one
    5. two

    1. Ninth
    2. Tenth
    3. Eleventh
      1. subone
      2. subtwo
      3. subthree

上面列举特性用的都是“名词解释”这一特性,“名词解释”的基本写法是:

Term 1

:   Definition 1

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

        Third paragraph of definition 2.

(@)  My first example will be numbered (1).
(@)  My second example will be numbered (2).

Explanation of examples.

(@逗你玩)  My third example will be numbered (3).
Numbered examples can be labeled and referred to elsewhere in the document:

(@)  This is a good example.

As (@逗你玩) illustrates, ...

写出来就是:

Term 1

Definition 1

Term 2 with inline markup

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.
  1. My first example will be numbered (1).
  2. My second example will be numbered (2).

Explanation of examples.

  1. My third example will be numbered (3). Numbered examples can be labeled and referred to elsewhere in the document:

  2. This is a good example.

As (3) illustrates, …

Here’s the caption. It, too, may span multiple lines.
Centered Header Default Aligned Right Aligned Left Aligned
First row 12.0 Example of a row that spans multiple lines.
Second row 5.0 Here’s another one. Note the blank line between rows.
-------------------------------------------------------------
 Centered   Default           Right Left
  Header    Aligned         Aligned Aligned
----------- ------- --------------- -------------------------
   First    row                12.0 Example of a row that
                                    spans multiple lines.

  Second    row                 5.0 Here's another one. Note
                                    the blank line between
                                    rows.
-------------------------------------------------------------

Table: Here's the caption. It, too, may span
multiple lines.

四种链接的方式:

one, and two and three and four

(代码的最大宽度超过了 80 chars,就超了边界,这个我觉得不是本博客生成器的 bug。Keep the rule!)

[one][my label 1], and [two][my label 2] and [three][my label 3] and [four][my label 4]

[my label 1]: /foo/bar.html  "My title, optional"
[my label 2]: /foo
[my label 3]: http://fsf.org (The free software foundation)
[my label 4]: /bar#special  'A title in single quotes'

my website is good, even my website is good, even this.

Hash Tag5

[my website][]  is good, even [my website] is good, even [this].

Hash Tag^[其实在 weibo/twitter 上才叫 hash tag,这里或许应该叫 section ref link。]

* See [above]
* See [table](#table)
* See [codetag](#codetag)

[my website]: /shit
[good]: /bar/baz <good>
[this]: /baz
[above]: #good

段落内的图片,caption 不显示:inline-pic-without-showing-this-text

单独一段的图片,显示 caption:

standalone-pic-small-one

standalone-pic-small-one

当然,也可以不显示:

段落内的图片,caption 不显示: ![inline-pic-without-showing-this-text]

单独一段的图片,显示 caption:

![standalone-pic-small-one]

当然,也可以不显示:

![][standalone-pic-big-one]

[inline-pic-without-showing-this-text]: http://gnat-tang-shared-image.qiniudn.com/emoji/11.gif
[standalone-pic-small-one]: http://gnat.qiniudn.com/dexter.jpg
[standalone-pic-big-one]: http://gnat.qiniudn.com/jodie-foster-math.png "本来想用 Gatsby 挥拳打 Tom 的图片"

代码高亮

行内高亮特别赞。比如一点 Bash 脚本:echo -e "hello\nworld" | sort,或者一点 HTML:<h1 id="hello-pandoc">HTML code</h1>

还有 C++

void Twin::flipLeftRight()
{
    if ( !valid ) { return; }
    oxo();
    cv::flip( m[src()], m[dst()], 1 );
    log += "-flipLeftRight";
}

可以有行号:

100
101
102
103
def widthHeightDividedBy(image, divisor):
    """Return an image's dimensions, divided by a value."""
    h, w = image.shape[:2]
    return (w/divisor, h/divisor)

这段代码 高亮得多好啊!

数学公式

不管用了多少年的 M$ Word,总有一天写论文你要用 \(\LaTeX\),那就从 MathJax 开始练习吧。

\[ \begin{matrix} 1 & x & x^2 \\ 1 & y & y^2 \\ 1 & z & z^2 \\ \end{matrix} \]

\[ f(n) = \begin{cases} n/2, & \text{if $n$ is even} \\ 3n+1, & \text{if $n$ is odd} \end{cases} \]

访问 MathJax 参考更多使用方法。

如果你要手工给 HTML 添加 MathJax 功能,需要在页面中加入

<script type="text/javascript"
         src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

我要来一个

因为我的博客生成器还在不断完善中,这部分先隐藏了。详见 district10/blog

致谢

感谢我喜欢的一些网站如 简书 - 交流故事,沟通想法LOFTER(乐乎) - 每个人的理想国,我从上面扣了一些 CSS,感谢 七牛云存储 - 移动时代的云存储服务商,感谢 Pandoc,感谢 GNU Make 以及 Git,感谢 GitHub、 MathJax。我们这个时代真是太牛逼了,开源社区有这么多好用的工具。

其它

Pandoc 的引用功能这里没有介绍。本博客支持用 bib 文件(可以从 Mendeley 导出)引用参考文献。


Refs

  1. Pandoc Markdown Official Site
  2. The pandoc-siteproc package
  3. Art of Problem Solving - LaTeX: Symbols
  4. Art of Problem Solving - LaTeX: Commands
  5. 我以前的博客(已经下线)

Notes
Emojis

👍, 👎, 💯, 🔢, 🎱, 🅰️, 🆎, 🔤, 🔡, 🉑, 🚡, ✈️, ⏰, 👽, 🚑, ⚓, 👼, 💢, 😠, 😧, 🐜, 🍎, ♒, ♈, ◀️, ⏬, ⏫, ⬇️, 🔽, ▶️, ⤵️, ⤴️, ⬅️, ↙️, ↘️, ➡️, ↪️, ⬆️, ↕️, 🔼, ↖️, ↗️, 🔃, 🔄, 🎨, 🚛, 😲, 👟, 🏧, 🅱️, 👶, 🍼, 🐤, 🚼, 🔙, 🛄, 🎈, ☑️, 🎍, 🍌, ‼️, 🏦, 📊, 💈, ⚾️, 🏀, 🛀, 🛁, 🔋, 🐻, 🐝, 🍺, 🍻, 🐞, 🔰, 🔔, 🍱, 🚴, 🚲, 👙, 🐦, 🎂, ⚫, 🃏, ⬛, ◾, ◼️, ✒️, ▪️, 🔲, 🌼, 🐡, 📘, 🚙, 💙, 😊, 🐗, ⛵, 💣, 📖, 🔖, 📑, 📚, 💥, 👢, 💐, 🙇, 🎳, 👦, 🍞, 👰, 🌉, 💼, 💔, 🐛, 💡, 🚅, 🚄, 🚌, 🚏, 👤, 👥, 🌵, 🍰, 📆, 📲, 🐫, 📷, ♋, 🍬, 🔠, ♑, 🚗, 📇, 🎠, 🐱, 🐈, 💿, 💹, 📉, 📈, 🏁, 🍒, 🌸, 🌰, 🐔, 🚸, 🍫, 🎄, ⛪, 🎦, 🎪, 🌇, 🌆, 🆑, 👏, 🎬, 📋, 🕐, 🕙, 🕥, 🕚, 🕦, 🕛, 🕧, 🕜, 🕑, 🕝, 🕒, 🕞, 🕓, 🕟, 🕔, 🕠, 🕕, 🕡, 🕖, 🕢, 🕗, 🕣, 🕘, 🕤, 📕, 🔐, 🌂, ☁️, ♣️, 🇨🇳, 🍸, ☕, 😰, 💥, 💻, 🎊, 😖, 😕, ㊗️, 🚧, 👷, 🏪, 🍪, 🆒, 👮, ©️, 🌽, 👫, 💑, 💏, 🐮, 🐄, 💳, 🌙, 🐊, 🎌, 👑, 😢, 😿, 🔮, 💘, ➰, 💱, 🍛, 🍮, 🛃, 🌀, 💃, 👯, 🍡, 🎯, 💨, 📅, 🇩🇪, 🌳, 🏬, 💠, ♦️, 😞, 😥, 💫, 😵, 🚯, 🐶, 🐕, 💵, 🎎, 🐬, 🚪, 🍩, 🐉, 🐲, 👗, 🐪, 💧, 📀, 📧, 👂, 🌾, 🌍, 🌎, 🌏, 🍳, 🍆, 8️⃣, ✴️, ✳️, 🔌, 🐘, ✉️, 🔚, ✉️, 📩, 🇪🇸, 💶, 🏰, 🏤, 🌲, ❗, 😑, 👓, 👀, 👊, 🏭, 🍂, 👪, ⏩, 📠, 😨, 🐾, 🎡, 📁, 🔥, 🚒, 🎆, 🌓, 🌛, 🐟, 🍥, 🎣, ✊, 5️⃣, 🎏, 🔦, 🐬, 💾, 🎴, 😳, 🌁, 🏈, 👣, 🍴, ⛲, 4️⃣, 🍀, 🇫🇷, 🆓, 🍤, 🍟, 🐸, 😦, ⛽, 🌕, 🌝, 🎲, 🇬🇧, 💎, ♊, 👻, 🎁, 💝, 👧, 🌐, 🐐, ⛳, 🍇, 🍏, 📗, 💚, ❕, ❔, 😬, 😁, 😀, 💂, 🎸, 🔫, 💇, 🍔, 🔨, 🐹, ✋, 👜, 💩, #️⃣, 🐥, 🐣, 🎧, 🙉, ❤️, 💟, 😍, 😻, 💓, 💗, ♥️, ✔️, ➗, 💲, ❗, ➖, ✖️, ➕, 🚁, 🌿, 🌺, 🔆, 👠, 🔪, 🍯, 🐝, 🐴, 🏇, 🏥, 🏨, ♨️, ⌛, ⏳, 🏠, 🏡, 😯, 🍨, 🍦, 🆔, 🉐, 👿, 📥, 📨, 💁, ℹ️, 😇, ⁉️, 📱, 🇮🇹, 🏮, 🎃, 🗾, 🏯, 👺, 👹, 👖, 😂, 😹, 🇯🇵, 🔑, 🔟, 👘, 💋, 😗, 😽, 😚, 😘, 😙, 🔪, 🐨, 🈁, 🇰🇷, 🏮, 🔵, 🔷, 🔶, 🌗, 🌜, 😆, 🍃, 📒, 🛅, ↔️, ↩️, 🍋, ♌, 🐆, ♎, 🚈, 🔗, 👄, 💄, 🔒, 🔏, 🍭, ➿, 🔊, 📢, 🏩, 💌, 🔅, Ⓜ️, 🔍, 🔎, 🀄, 📫, 📪, 📬, 📭, 👨, 👲, 👳, 👞, 🍁, 😷, 💆, 🍖, 📣, 🍈, 📝, 🚹, 🚇, 🎤, 🔬, 🌌, 🚐, 💽, 📴, 💸, 💰, 🐒, 🐵, 🚝, 🌔, 🎓, 🗻, 🚵, 🚠, 🚞, 🐭, 🐁, 🎥, 🗿, 💪, 🍄, 🎹, 🎵, 🎼, 🔇, 💅, 📛, 👔, ❎, 😐, 🆕, 🌑, 🌚, 📰, 🆖, 🌃, 9️⃣, 🔕, 🚳, ⛔, 🚫, 🙅, 📵, 😶, 🚷, 🚭, 🚱, 👃, 📓, 📔, 🎶, 🔩, ⭕, 🅾️, 🌊, 🐙, 🍢, 🏢, 🆗, 👌, 🙆, 👴, 👵, 🔛, 🚘, 🚍, 🚔, 🚖, 1️⃣, 📖, 📂, 👐, 😮, ⛎, 📙, 📤, 🐂, 📦, 📄, 📃, 📟, 🌴, 🐼, 📎, 🅿️, 〽️, ⛅, 🛂, 🐾, 🍑, 🍐, 📝, ✏️, 🐧, 😔, 🎭, 😣, 🙍, 👱, 🙎, ☎️, 🐷, 🐖, 🐽, 💊, 🍍, ♓, 🍕, 👇, 👈, 👉, ☝️, 👆, 🚓, 🐩, 💩, 🏣, 📯, 📮, 🚰, 👝, 🍗, 💷, 😾, 🙏, 👸, 👊, 💜, 👛, 📌, 🚮, ❓, 🐰, 🐇, 🐎, 📻, 🔘, 😡, 🚃, 🌈, ✋, 🙌, 🙋, 🐏, 🍜, 🐀, ♻️, 🚗, 🔴, ®️, ☺️, 😌, 🔁, 🔂, 🚻, 💞, ⏪, 🎀, 🍚, 🍙, 🍘, 🎑, 💍, 🚀, 🎢, 🐓, 🌹, 🚨, 📍, 🚣, 🇷🇺, 🏉, 🏃, 🏃, 🎽, 🈂️, ♐, ⛵, 🍶, 👡, 🎅, 📡, 😆, 🎷, 🏫, 🎒, ✂️, ♏, 😱, 🙀, 📜, 💺, ㊙️, 🙈, 🌱, 7️⃣, 🍧, 🐑, 🐚, 🚢, 👕, 💩, 👞, 🚿, 📶, 6️⃣, 🔯, 🎿, 💀, 😴, 😪, 🎰, 🔹, 🔸, 🔺, 🔻, 😄, 😸, 😃, 😺, 😈, 😏, 😼, 🚬, 🐌, 🐍, 🏂, ❄️, ⛄, 😭, ⚽, 🔜, 🆘, 🔉, 👾, ♠️, 🍝, ❇️, 🎇, ✨, 💖, 🙊, 🔈, 💬, 🚤, ⭐, 🌟, 🌠, 🚉, 🗽, 🚂, 🍲, 📏, 🍓, 😛, 😝, 😜, 🌞, 🌻, 😎, ☀️, 🌅, 🌄, 🏄, 🍣, 🚟, 😓, 💦, 😅, 🍠, 🏊, 🔣, 💉, 🎉, 🎋, 🍊, ♉, 🚕, 🍵, ☎️, 📞, 🔭, 🎾, ⛺, 💭, 3️⃣, 👎, 👍, 🎫, 🐯, 🐅, 😫, ™️, 🚽, 🗼, 🍅, 👅, 🔝, 🎩, 🚜, 🚥, 🚋, 🚆, 🚊, 🚩, 📐, 🔱, 😤, 🚎, 🏆, 🍹, 🐠, 🚚, 🎺, 👕, 🌷, 🐢, 📺, 🔀, 2️⃣, 💕, 👬, 👭, 🈹, 🈴, 🈺, 🈯, 🈷️, 🈶, 🈵, 🈚, 🈸, 🈲, 🈳, 🇬🇧, ☔, 😒, 🔞, 🔓, 🆙, 🇺🇸, ✌️, 🚦, 📼, 📳, 📹, 🎮, 🎻, ♍, 🌋, 🆚, 🚶, 🌘, 🌖, ⚠️, ⌚, 🐃, 🍉, 👋, 〰️, 🌒, 🌔, 🚾, 😩, 💒, 🐳, 🐋, ♿, ✅, ⚪, 💮, ⬜, ◽, ◻️, ▫️, 🔳, 🎐, 🍷, 😉, 🐺, 👩, 👚, 👒, 🚺, 😟, 🔧, ❌, 💛, 💴, 😋, ⚡, 0️⃣, 💤

line_blocks

The limerick packs laughs anatomical
In space that is quite economical.
   But the good ones I’ve seen
   So seldom are clean
And the clean ones so seldom are comical

200 Main St.
Berkeley, CA 94718

#extension-simple_tables, #extension-multiline_tables, #extension-grid_tables, #extension-pipe_tables

Tables

Demonstration of simple table syntax.
Right Left Center Default
12 12 12 12
123 123 123 123
1 1 1 1
12 12 12 12
123 123 123 123
1 1 1 1
Here’s the caption. It, too, may span multiple lines.
Centered Header Default Aligned Right Aligned Left Aligned
First row 12.0 Example of a row that spans multiple lines.
Second row 5.0 Here’s another one. Note the blank line between rows.
Here’s a multiline table without headers.
First row 12.0 Example of a row that spans multiple lines.
Second row 5.0 Here’s another one. Note the blank line between rows.
Sample grid table.
Fruit Price Advantages

Bananas

$1.34

  • built-in wrapper
  • bright color

Oranges

$2.10

  • cures scurvy
  • tasty
Demonstration of pipe table syntax.
Right Left Default Center
12 12 12 12
123 123 123 123
1 1 1 1
fruit price
apple 2.05
pear 1.37
orange 3.09
One Two
my table
is nice
009
LaTeX

tabular

\begin{tabular}{|l|l|}\hline Age & Frequency \\ \hline 18--25 & 15 \\ 26--35 & 33 \\ 36--45 & 22 \\ \hline \end{tabular}
#latex-macros
\newcommand{\tuple}[1]{\langle #1 \rangle}

$\tuple{a, b, c}$

\(\tuple{a, b, c}\)

#custom-writers


  1. 就是因为 Hexo3 出来后我原来的博客死了,我才想到得自己弄这个初级而原始的工具。

  2. CSS 都是我手写,以及各种从网站扣。没有用任何 CSS 库,当然做不到响应式(不过我也不 indent to)。

  3. 看过《西文字体 1》和《西文字体 2》,但是你想用的字体网页里又不一定能显示,what a pity。

  4. 看上去不一样,其实都是“水”。

  5. 其实在 weibo/twitter 上才叫 hash tag,这里或许应该叫 section ref link。


「Load Disqus | 加载评论」