Entry.css文档


概述

Entry.css提供一种可配置的、更适合阅读中文文章样式,满足一般的博客文章展示需求。它使用了Less css。推荐使用markdown来书写文章,然后转换成HTML。它有如下优点:

它分为左、右和居中三种排版方式。默认为居中,通过在less的配置中修改@layout值来使用不同的排版布局(左中右)。它还提供了可选的多栏模式(multi-column),不过此特性还在开发中,且各个主流浏览器支持不够好。故不推荐使用。

块级元素

段落和换行

段落的HTML只使用divp。它们的行高、行首是否缩近两个中文字都可以自定义。换行也可以使用br标签实现。每行默认宽度可容纳40中文字左右,确保一行之内断句较少,适宜阅读。

当然也有这种没有用标签包裹起来的文字。

文章内部标题共分为四种,使用h1标签作为一级标题,h2作为二级标题,h3标签作为三级标题,h4h5h6标签作为四级标题。并支持标题的自动编号!

样例

样例样例

样例样例样例

样例样例样例样例

样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例样例

列表

列表样式分为有序列表ol和无序列表ul两种,这两种可以相互嵌套。没有对列表样式做过多的修改,还是使用浏览器默认样式。

列表的嵌套样式如下:

  1. 第一层有序列表
    1. 第二层有序列表
      1. 第三层有序列表
      2. 第三层有序列表
    2. 第二层有序列表
  2. 第一层有序列表

区块引用

区块引用只使用blockquote标签。它们的样式没有过多地修饰,只是使用了不同于主文字体的字体,默认为楷体。并且左侧加了颜色比字体颜色稍淡的边框。区块引用的样例如下:

人生不过是一个行走的影子,一个在舞台上指手划脚的笨拙的怜人,登场片刻,便在无声无息中悄然退去,这是一个愚人所讲的故事,充满了喧哗和骚动,却一无所指。 麦克白

代码区块

代码区块样式使用pre标签作为容器,且内部可选地嵌入code标签。这里使用了prism来实现代码高亮。

<link rel="stylesheet" href="assets/prism.css" />
<pre><code class="language-javascript">
console.log('Test');
</code></pre>
<script src="assets/prism.css"></script>

分割线

分割线样式只能使用hr标签。分割线样式在边缘部分使用CSS3的linear-gradient样式做了渐变处理,所以部分浏览器会不支持。

表格

表格的样式如下:

Entry.css 支持的浏览器
浏览器型号 版本号
IE 9+
Chrome 14+
Firefox 4+
Safari 5+
Opera 11+
Mobile Safari iOS 6+

行内元素

连接的样式可以自定义链接颜色,且鼠标hover之后下划线不会和中文粘连在一起。例如:普通链接

强调

强调的样式可以使用strongubem标签,strong表示语义与样式双重强调,后两者表示样式上的强调。bbold标签是加粗的样式,em标签则有着重号u标签的样式是直线下划线,相邻之间也有0.125em的间隔

代码

代码的行内样式使用code标签,你也可以自定义字体和颜色。

图片及视频

图片样式对img标签没有特别设置,但是对figure标签做了设置。样例如下:

这里是一段话
这里是一段话

img标签做了(不超过容器的)限宽,如下:

这里是一段话

同时也支持video标签,如下:

其他行内样式

  1. 书名号使用cite标签,例如:

    冰与火之歌是一部很棒的魔幻小说!
    Hamlet也是一部很棒的小说!
  2. 缩写使用abbr标签,例如:

    js 的全称是javascript,鼠标放上去看看title值。
  3. 定义使用dfn标签,例如:

    HTML 是超文本标记语言
  4. 标记使用mark标签,例如:

    在这句话里面把这几个字高亮下吧~
  5. 行内引用使用q标签,例如:

    在这句话里面把这几个字引用下吧~
  6. 旁注使用small标签,例如:

    单人间 399 元 含早餐,不含税
  7. 上下标使用sup标签作下标、sub标签作上标,例如:

    105 与 a12

外部内容

行内iframe按钮

例如github的非官方按钮:

codepen.io

因为codepen.io的iframe宽度为100%,所以会根据父元素的宽度自适应iframe的宽度,且忽略掉iframe的max-width设置。所以必须使用一个div包裹它的embed代码。

jsfiddle

Speaker Deck

因为speaker deck会根据父元素的宽度自适应iframe的宽度,且忽略掉iframe的max-width设置,所以必须使用一个div包裹它的embed代码。

配置及使用

Entry.css是基于less css开发的,提供了些基本配置项。首先安装nodejsnpm。然后运行如下命令安装less

npm install less -g

配置文件在src目录下的config.less文件中。

自定义步骤:

  1. 配置文件位于src目录下,文件名以config.less结尾。打开默认的配置文件default.config.less然后修改,或者新建一个配置文件my.config.less
  2. 自定义文章容器的CSS选择器。如当HTML结构如下时:
    <article class="post">
        <!-- 内容 -->
    </article>
    则自定义选择器为.post,如下:
    @import "entry.less";
    // 自定义文章容器的CSS选择器
    .post{
        .ext-entry;
    }
  3. 自定义配置:布局、大小、颜色、字体等等,config.less文件中有详细的描述。
  4. 运行命令lessc src/my.config.less > bin/my.css,生成my.css文件就可以被用到你的博客样式中。如果你设计了不错的配色,欢迎pull request
  5. 「可选」如果你希望外部资源(例如图片)也保持合理高度(vertical rhythm),那么可以想这份文档一样使用src目录下的baseline.js

感谢

Entry.css参考、使用很多其他库和工具:

comments powered by Disqus