logo of Shuibaco

模板测试文本 Markdown

2017. / 994字 / 1,595阅 / 0评

这是一篇主题样式测试文章,涵盖 header/link/img/footnotes/hr/code/pre code/blockquote/bold/italic/table/list/toc 的样式。这篇文章的作者是水八口,一个根正苗红的好人

这是二级标题

二级标题通常用于文章内部的结构梳理,除此之外还有三级至六级标题1。而一级标题一般情况下会是文章标题,所以文章内部最好不要使用一级标题,以防与文章标题重叠,产生不美观的结构。

这是三级标题

二级标题所描述的内容中,若还需要细分,可以使用三级标题,甚至四级标题。

这是四级标题

一般来说我只使用二级和三级标题,能用到四级标题的情况非常少,更别说五级和六级标题了。如果开启了 TOC 功能,这些级别的标题就会自动生成目录,显示在页面的某处,方便读者快速掌握文章脉络和跳步阅读。

图片

如果说博客中最常见的是文字(段落),那么第二重要的应该要数图片了。成语里有个词叫做“图文并茂”,看来非常有必要测试一下图片的显示样式了。

通常写法

![这是 alt](https://i.imgur.com/ob1lPK4.jpg '这是可写可不写的 title')

这是 alt
这是 alt

figure 写法

<figure>
    <img src="https://i.imgur.com/ob1lPK4.jpg" alt="这是 alt" />
    <figcaption>这是可写可不写的 figcaption</figcaption>
</figure>
这是 alt
这是可写可不写的 figcaption

来看看 w3schools 是如何定义 figurefigcaption 的。

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
 
The <figcaption> tag defines a caption for a <figure> element.
-- w3school

由于 figure 写法在 css 上更有发挥空间,加上 figcaption 的助攻,让图片显示更加友好,所以再很早之前我就全部统一为这种写法2

表格

标题一 标题二 标题三
1.1 我是一个粉刷匠,粉刷本领强 1.2 1.3 我是一只来自北方的狼
2.1 come on be my baby come on 2.2
3.1 我是一个兵,爱着老百姓 3.3 baby baby baby oh my baby lalalalla
4.1 thiswordisveryveryloooooooooooooooooooooooooooooooooooooooooooong

列表

这是一个无序列表


这是一个有序列表

  1. 项目一
    • 子项目
  2. 项目二
  3. 项目三
    1. 子项目

这是一个 to-do list

代码块

代码无行数:

extends index

block title
    title= '搜索 - ' + site.title

block content
    h2 搜索
    // 请出搜索框
    #search
        +posts.search_in_html(placeholder='搜索', base_url='/search')
    // 如果有搜索结果
    if request.args.s
        #result
            // 定义搜索结果文章列表,取30篇,后面调用了分页,所以这里表示每页显示30篇
            search_posts = posts.search(keywords=request.args.s, limit=30)
            for post in search_posts
                h2: a(href=post.url)= post.title
                .content= post.content.limit(150)
            // 别忘了调用分页
            +h.paginator()

代码有行数:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
extends index

block title
    title= '搜索 - ' + site.title

block content
    h2 搜索
    // 请出搜索框
    #search
        +posts.search_in_html(placeholder='搜索', base_url='/search')
    // 如果有搜索结果
    if request.args.s
        #result
            // 定义搜索结果文章列表,取30篇,后面调用了分页,所以这里表示每页显示30篇
            search_posts = posts.search(keywords=request.args.s, limit=30)
            for post in search_posts
                h2: a(href=post.url)= post.title
                .content= post.content.limit(150)
            // 别忘了调用分页
            +h.paginator()

  1. 五级标题和六级标题并不常用。
  2. 由于 title="" 可写可不写,所以在有 figcaption 的情况下完全被我省略了。如果写了 title="",默认样式是鼠标悬停图片时看到的说明。
1,812°
日本的住民税
Comments
Write a Comment
点击加载Disqus