Fixie.js：基于HTML5语义的自动内容填充工具

Fixie.js 工具简介

Fixie.js 是一款用于自动填充 HTML 文档内容的开源工具。

官方网址地址：http://fixiejs.com/

Fixie.js 下载地址 fixie_jb51.rar

在网站设计过程中，由于最终内容尚未确定，开发者常需向页面插入 Lorem ipsum 占位文本以预览展示效果。

然而，添加大量无意义的文本会导致 HTML 文档体积臃肿，并使开发者陷入复制、粘贴及手工编辑的繁琐循环中。

Fixie.js 旨在解决这一问题，它通过解析语义化的 HTML5 标签，自动为匹配标签类型的元素填充相应内容，从而保持 HTML 文档简洁并提高测试效率。

安装与使用方法

使用说明：

第一步：添加 fixie.js 到文档中

在 body 结束标签之前添加

<script type="text/javascript" src="fixie.js"></script>

第二步：这里有两种方法：

1，任何需要填充内容的位置，设置 class="fixie" 就行了，

比如，如果先填充 p 标签的内容，直接设置 <p class="fixie"></p> 就行了，over，就这么简单。

2，通过 fixie.init 填充内容

通过 CSS 选择器选择待填充的元素，在 console（控制台啊，亲）或者 script 标签里面执行

fixie.init([".array", "#of > .selectors", ".that", ".should", "#be > .populated", ".with", ".lorem"])

或者

fixie.init(".string, #of > .comma, .separated, .selectors, .that, .should, #be > .populated, .with, .lorem")

命令，就可以自动填充了

另外，执行

fixie.init(':empty')

可以填充文档里所有的空元素；

支持的元素类型

支持的元素

Fixie 是通过标签类型来决定填充的内容的，这里有几类是需要了解的。

- <h1 class="fixie"></h1> - 添加几个单词的文本，h2 - h6 亦然。

- <p class="fixie"></p> - 填充一段文字

- <article class="fixie"></article> - 填充几段文本（几个段落）

- <section class="fixie"></section> - 同上

- <img class="fixie"></img> - 填充一张注明了尺寸的图片

- <a class="fixie"></a> - 填充一个随机的链接（做广告嫌疑？）

高级配置与技巧

提示

修改默认的图片填充

执行 fixie.setImagePlaceholder(source).

比如，如果你想从 Flickr 下载图片来填充，可以执行

fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();

给容器添加 class="fixie"

容器内部所有的非空后代元素（注意后代与子代的区别）都会受到影响

看下面的说明

 
<div class="fixie">
<p>Hello <a></a></p>
</div>

Fixie 会保留 P 标签里面的 "Hello" 文本，但是会填充 a 标签里面的内容

Rails 集成与授权

### Fixie for Rails

[fixie-rails](https://github.com/csexton/fixie-rails)

突出填充内容

可以添加

.fixie{ border:4px solid red; }

到 CSS 里面，以便区分填充内容与真实内容。

## 授权

废话，不翻译了。

完整示例代码

示例说明：

 
<!DOCTYPE html>
<html>
<head>
<title>Fixie.js Sample</title>
<style>
body{
font-family: Helvetica, arial, sans-serif;
width:800px;
margin:150px auto;
} 
img{
width:400px;
height:300px;
float:right;
margin:20px;
} 
.fixie{ color: red;}
</style>
</head>
<body>
<article>
<h1 class="fixie"></h1><!--这里会填充标题-->
<p> Check us out at <a class="fixie"></a>,<!--这里会填充连接，但是外部的P标签因为非空，所以不会受影响-->
and don't forget to view source.</p>
<section class="fixie"><!--section的后代元素都会填充-->
<p></p>
<img/>
<ul></ul>
<p></p>
<ol></ol>
</section>
<h2 class="fixie"></h2>
<section class="fixie"></section>
</article>
<script type="text/javascript" src="fixie.js"></script>
<script>
// Changes default image source to Flickr
fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/fixie').init();
</script>
</body>
</html>

显示效果

作者：西山