示例填充图片_填充内容：工具，技巧和动态示例-优快云博客

本文介绍了一种利用填充内容工具和技巧的动态示例，包括如何在浏览器中构建模型，使用PHP和JavaScript动态生成填充内容，以及如何使用faker.js库生成各种类型的填充数据。

示例填充图片

随着浏览器中的设计变得越来越流行（和方便），对有用的设计工具的需求也在增加。一组非常有用的工具围绕着填料含量。当前，存在各种资源来帮助需要填充内容的设计人员，无论是文本还是图像。

由于过去许多网站设计都是在Photoshop中进行的，因此从Web上手动复制/粘贴文本是用虚假内容“填充”设计的最佳方法。但是，既然许多网站设计都在浏览器中进行，为什么不让计算机为您完成所有“填写”工作？

在本教程中，我们将介绍有关填充物内容的选项。从复制/粘贴静态文本和图像到动态生成它们，应有尽有。

关于填料的内容

有些纯粹主义者建议不惜一切代价避免使用填充剂。一种说法是填充内容使您从正在构建的网站的“真实”体验中抽象出来：

这里的目标是尽可能接近真实的客户体验。不要从真实的经验中抽象自己。去除的每一层都使您与实际的客户体验越来越远。

事实是，有时您无法模仿真实的客户体验。如果您有简单的营销网站，其中包含由内容策略师制作的静态内容，则请务必使用该内容来构建网站的设计。内容应告知设计。但是，如果您要设计一个由用户生成的内容填充的Web应用程序，则通常无法围绕真实内容进行设计，因为您自己无法生成内容。这是由您的用户完成的。另外，从隐私的角度来看，很可能不允许您使用实际的客户数据来填充模型。因此，由于法律或隐私问题，您无法获得尽可能接近的用户体验。

但是，您可以采取一些步骤来接近真实的客户体验：

如果您的站点或应用程序需要数据输入，请输入真实且相关的词并键入文本，而不仅仅是将其粘贴到其他来源。如果是名称，请输入真实名称。如果是城市，请输入真实城市。

如果您使用正确类型的填充物含量，则可能与最终用户体验非常相似。举例来说，您的设计需要一个名称列表。而不是使用：

洛普伊普森
坐阿美特
洋红色的爱神
卡林·普尔维纳（Carin Pulvinar）

您可以使用真实姓名：

约翰·斯泰特伍德
杰西卡·艾利（Jessica Alley）
斯坦·诺伍德
特雷弗·辛尼

再一次， 这里的目标是尽可能接近真实的客户体验。 如果可以使用填充剂含量做到这一点，那就去吧！

因为我们关心自己的Craft.io，所以有关工具和技术的讨论通常基于最佳实践和完美的解决方案。因为我们在乎，所以每个项目都会改善我们的工作流程和专业知识。但是，在现实世界中通常不存在完美的解决方案。这就是为什么务实的选择（例如填料含量）有助于及时完成项目的原因。我相信，只要我们不妥协我们的原则，那就很好。

样机

众所周知，初步的模型无法接近最终的真实客户体验。您的设计可能会在第一次和最后一次迭代之间发生巨大变化。填充内容仍然是查看文本如何沿页面向下流动，围绕图像以及通过断点的一种有价值的工具。它可以帮助您了解设计元素的位置，页面的平衡以及负空间的使用。

完全消除它是没有意义的。填充物内容可能是初始设计阶段中快速原型制作和设计概念迭代的关键工具。一旦您走过了设计的早期阶段，使用与用户最终看到的内容更加相似的内容将非常有帮助。

结论

使用填充物的内容由您决定。没有明确的“是的，请使用它！” 或“不，这是一个耻辱！”。答案为“我应该使用填料含量吗？” 就像通常一样，是“取决于”。有时，谈论不使用填充剂的内容更多是关于理想世界，而不是现实世界。您是专业人士，由您决定。最后，您将了解您是否做出了正确的决定，并且下次遇到“我应该使用填充剂含量？”问题时，您将更好地知道如何回答该问题。

填充图像

有许多托管解决方案可用于在HTML文档中插入图像，从而允许您通过URL指定各种图像属性。例如，要使用Placekitten，只需将所需的图像大小放在URL后面。然后，将该URL用作<img>元素的src ：

<img src="http://placekitten.com/200/300" />

如果您不喜欢Kittens（为什么要上网？），则可以通过以下类似服务提供不同的自定义设置（有关更多选择，请参阅本综述）：

填充文字

有多种原因导致您需要生成填充文本。也许您需要生成整个段落来概念化博客设计。或者，也许您需要生成文本类别，例如电子邮件和用于设计表格设计样式的名称。无论您有什么需求，都有多种解决方案可在您的设计中生成文本。

复制/粘贴文字

网络上有许多填充文本生成器。由于网页设计经常处理列表，表格和其他数据结构，因此许多生成器提供的功能远远超出了Lorem Ipsum段落填充器。以下是填充文本生成器的（小）列表。每一种都提供各种文本配置，例如生成不同的语言，将文本包含在HTML标签中，用标题/副标题加上文本，调整文本长度以及加粗或斜体字。

有关文本生成网站的更全面列表，请参考以下概述：

动态生成文本

您可以使用JavaScript库在HTML文档中动态生成填充内容，例如：

随着浏览器中的设计变得越来越流行，用于填充内容的旧复制/粘贴技术可能变得效率低下。为什么不让计算机处理这项工作呢？让我们更深入地介绍这项技术。

动态地将它们放在一起

让我们尝试通过创建设计模型，将到目前为止介绍的内容付诸实践。为了简单起见，让我们想象一下，我们的任务是创建一个基本的网站设计，该网站设计展示了整个网络上某人最喜欢的文章的摘录。我们称这个人为Franky，我们将其设计为“ Franky's Fav Five”。

这个小例子应该有助于展示在浏览器中设计模型时动态生成内容的有用性。

步骤1：基本HTML和CSS

首先，让我们概述一下基本HTML。

<html>
<head>
    <title>Franky's Fav Five</title>
    <link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

如您所见，我们在页面中包含了三个其他资源：CSS重置，自定义CSS样式表（我们将在稍后编写）和指向Google的jQuery托管版本的链接。现在，在我们的styles.css文件中，让我们为模型包含一些基本的样式规则：

/* General
============================== */
body {
    font: 1em/1.45 Georgia, serif;
    background: #e9e9e9 repeat;
    color: #222;
}
img {
    max-width: 100%;
    height: auto;
}
strong {
    font-weight: bold;
}
.wrapper {
    width: 95%;
    margin: 0 auto;
}
.content {
    padding: 0 2em;
}
a {
    color: #9c0001;
}

步骤2：建立标题并设定样式

现在让我们为页面创建一个简单的标题。同样，没有什么太复杂的，因为这只是示例样机。

<header class="header">
    <h1 class="header-title">Franky's Fav Five</h1>
</header>

现在，我们将一些简单的样式添加到标题中

/* Header
============================== */
.header {
    padding: .5em 0;
    background: #333;
    color: white;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #45484d 0%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.header-title {
    font-size: 1.25em;
    font-family: helvetica;
    font-weight: bold;
    text-shadow: 0 1px 0 #000;
}

现在，我们有了一个带有标题的简单页面，如下所示：

步骤3：主要文章

现在，让我们为文章摘录创建标记。本文的重点不是展示CSS和HTML编码技术，而是展示如何使用填充内容。因此，我们将通过简单的复制和粘贴非常快速地介绍这些步骤。首先，我们将设置包装器和主要文章。

<section class="wrapper">
    <article class="article">
    </article>
</section>

注意：我很欣赏article元素上“ article”的类名似乎有些荒谬-请记住，这纯粹是一个演示。

文章图片

我们将使用lorempixel图像占位符服务在标记中放置图像。由于我们的文章容器的最大宽度设置为600px，这就是我们将从lorempixel获取的图像大小。

<img src="http://lorempixel.com/600/200/" />

文章文字

现在，我们将所有文章文本放在div 。我们的简单模型将使用以下可重复的内容：

文章标题
有关文章的元信息
- 作者姓名
- 文章来源
文章摘录
阅读更多链接

<div class="content">
    <h2><a href="#" class="article-title">Article Title Here</a></h2>
    <ul class="article-meta">
        <li><strong>author</strong>: Author Name</li>
        <li><strong>source</strong>: <a href="#">onlinesource.com</a></li>
    </ul>
    <p class="article-paragraph">This is where all the paragraph text will go&hellip; <a href="#">read more &raquo;</a></p>

</div>

本质上，这是我们的模板，用于展示Franky最喜欢的读物的摘录。现在让我们对其进行样式设置！

设置文章样式

我们有基本的标记，因此我们将从样式化内容开始。

/* Article
============================== */
.article {
    max-width: 600px;
    padding: 0 0 2em;
    background: #fff;
    margin: 3em auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.article a {
    text-decoration: none;
}
.article a:hover {
    text-decoration: underline;
}
.article img {
    border-radius: 5px 5px 0 0;
}
.article-title {
    display: block;
    font-size: 1.125em;
    line-height: 1.2;
    color: #222;
    margin: 1em 0 0;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: capitalize; /* faker won't output the right capitlization, but CSS can handle it! */
}
.article-paragraph {
    color: #555;
    font-size: .875em;
    line-height: 1.5em;
}
.article-paragraph:first-letter {
    text-transform: uppercase;
}

/* Article Meta */
.article-meta {
    color: #777;
    font-size: .75em;
    font-family: arial;
    margin: .25em 0 1em;
    overflow: hidden;
}
.article-meta li {
    float: left;
    margin-right: 1em;
}
.article-meta li:after {
    content: '\00B7';
    margin-left: 1em;
    color: #ccc;
}
.article-meta li:last-child:after {
    display: none;
}
.article-author span {
    font-style: italic;
}

现在，您将有一个非常简单的模板来显示文章摘录，看起来像这样：

步骤4：介绍一些PHP

到目前为止，我们只有一篇文章摘录（五篇摘录，因为这是“ Franky的收藏五篇”）。与其再复制/粘贴标记四次，不如在PHP中使用for循环。这样做将在编辑时维护我们的文章摘录的单个模板，但是在浏览器中查看时将维护多个文章摘录。这样便于维护。如果我们想调整文章摘录模板，则无需多次进行。

让我们将我们的article元素包装在以下代码中：

<?php for($i=1;$i<6;$i++) { ?>
    // <article> element here
<?php } ?>

注意我们的for循环从变量$i等于1开始，一直运行到小于6为止（因此它运行5次）。

注意：如果还没有，请确保将文件重命名为扩展名为.php 。

现在，您应该具有以下内容：

请注意，我们的lorempixel图片在每篇文章中都一样吗？为了实现更逼真的模型，我们将略微修改图片的src以便为每个文章摘录获得不同的图片。

使用LoremPixel获取不同的图像

LoremPixel允许您稍微自定义要检索的图像类型。这是它们在其URL结构中允许的自定义：

http://lorempixel.com/400/200
- 要求提供400 x 200像素的随机图片
http://lorempixel.com/400/200/sports
- 索取运动类别的随机图片
http://lorempixel.com/400/200/sports/1
- 要求图片编号体育类的1/10

当前，我们正在使用URL http://lorempixel.com/600/200 。我们要做的是选择一个类别，例如体育，然后使用我们PHP计数变量$i修改URL，以便每个文章摘录都从体育类别中请求一个单独的图像。

为此，请找到<img>元素并按如下所示修改其源：

<img src="http://lorempixel.com/600/200/sports/<?php echo $i ?>" />

现在，随着php计数变量$i随着每个for循环的增加，我们的图像URL每次将请求不同的图像。 PHP所输出HTML标记现在看起来像这样：

<article class="article">
        <img src="http://lorempixel.com/600/200/sports/1" />
        .
        .
        .
    </article>
    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/2" />
        .
        .
        .
    </article>
    <article class="article">
        <img src="http://lorempixel.com/600/200/sports/3" />
        .
        .
        .
    </article>

现在，我们应该有如下所示的内容：

步骤4：动态插入填充内容

现在我们已经有了基本模板，每个摘录都有不同的图像，我们希望每个文章都有不同的填充物含量。这将帮助我们更好地可视化最终产品。

这是诸如faker.js之类的填充程序内容库派上用场的地方。使用faker.js的API和一些jQuery，我们可以在页面加载时动态填充HTML模板。使用faker.js API非常简单。您可以在faker.js github页面上找到整个API。这是用法示例：

<script src = "Faker.js" type = "text/javascript"></script>
<script>
    var randomName = Faker.Name.findName(); // Caitlyn Kerluke
    var randomEmail = Faker.Internet.email(); // Rusty@arne.info
</script>

如您所见，通过在页面中包含faker.js，我们便可以访问其API，该API可以生成填充名，电子邮件，地址，内容等。只需使用其相应方法之一调用Faker对象。

在我们自己的页面中实现Faker.js

首先，让我们将faker.js添加到我们的页面。在调用jQuery之后，将在页面底部为其添加<script> 。再次是链接： faker.js 。

<script src="faker.js"></script>

现在，让我们尝试使用faker.js和jQuery生成伪造的内容标题。如果浏览一下faker.js的API，您会注意到有一些生成Lorem Ipsum内容的句子，段落和单词的方法。由于我们想要类似于文章标题的内容，因此我们需要Lorem Ipsum的句子： Faker.Lorem.sentence() 。这将吐出一个单独的句子，例如“ praesentium est别名dolor omnis sequi voluptatibus”，这将是文章标题的良好填充内容。

注意： faker.js不会输出大写的句子。通过使用CSS规则text-transform: capitalize我们可以强制将句子大写；从而使我们更接近正确的格式。

我们将在文章标题模板中添加一类faker-sentence 。这将充当一个钩子，允许jQuery查找应该用lorem ipsum句子替换其内容的所有元素。

<h2><a href="#" class="article-title faker-sentence">Article Title Here</a></h2>

然后，使用jQuery，我们将循环浏览PHP输出的每个faker-sentence元素，并用随机生成的Lorem Ipsum句子替换我们的静态填充内容“ Article Title Here”。

$('.faker-sentence').each(function(){
    $(this).html(Faker.Lorem.sentence());
});

现在，我们应该有一些文章标题和内容的长度和长度有所变化，并且与我们网站的动态内容更加相似。

步骤5：填充整个页面

现在，我们已经替换了所有文章标题。让我们考虑一下我们要替换的页面上的其他内容。我们仍然要填写以下模板片段：

作者姓名-如约翰·威廉姆森
在线资源-例如domainname.com
段落文字-例如lorem ipsum段落

我们不会为要替换的每个模板写出jQuery，而是将内容的生成和替换抽象出来，然后简单地将要替换的内容作为参数传递。

确定将生成什么faker.js

首先，让我们找出将用于生成我们需要的填充内容的faker.js的哪些部分。如上所述，我们需要一个人的姓名，域名和段落填充内容。 Faker.js具有以下可以使用的方法：

Faker.Name.findName() -给我们起一个名字，例如John Williamson
Faker.Internet.domainName() -给我们一个域名，例如eldridge.co.uk
Faker.Lorem.paragraph() -给我们一段Lorem ipsum内容

在我们要填充内容的位置添加HTML类

现在我们知道了要生成的内容，我们需要在其中添加填充内容的元素和类。如上所述，我们将在每个类的前面加上“ faker-”前缀，这样，当我们超越创建模拟并停止使用faker.js时，我们可以轻松地找到并删除不需要的填充器类。

注意：确保填充器内容类与faker.js方法名称匹配。因此， Faker.Name.findName()将需要HTML类faker-findName Faker.Internet.domainName()而Faker.Internet.domainName()将需要类faker-domainName等。当我们在jQuery中自动查找和替换填充内容时，这将很有帮助。

首先，通过添加带有适当类的span元素来处理作者：

<li><strong>author</strong>: Author Name</li>
<!-- should become -->
<li><strong>author</strong>: <span class="faker-findName"></span></li>

现在，我们通过在源链接中添加适当的类来处理源：

<li><strong>source</strong>: <a href="#">onlinesource.com</a></li>
<!-- should become -->
<li><strong>source</strong>: <a href="#" class="faker-domainName">onlinesource.com</a></li>

最后，让我们通过添加span元素来处理文章摘录，我们的填充程序lorem ipsum将位于其中：

<p class="article-paragraph">This is where all the paragraph text will go &amp;hellip; <a href="#">read more &amp;raquo;</a>

<!-- should become -->
<p class="article-paragraph"><span class="faker-paragraphs"></span>&amp;hellip; <a href="#">read more &amp;raquo;</a>

现在，我们只写一个小jQuery，它将找到我们所有的填充物内容元素，并用faker.js生成的填充物内容填充它们。

让我们创建一个名为args的变量。这是我们定义将要使用的faker.js API方法的地方。请记住，我们HTML类映射到faker.js方法和简单前缀faker- 。

注意：我们在参数中添加了Faker.Lorem.sentence() ，因此您可以删除前面在步骤4中创建JavaScript，以查找/替换文章标题。

var args = {
    'Lorem'         :   ['paragraphs', 'sentence'], // maps to Faker.Lorem.paragraphs() and Faker.Lorem.sentence()
    'Name'          :   ['findName'],               // maps to Faker.Name.findName()
    'Internet'      :   ['domainName']              // maps to Faker.Internet.domainName()
}

现在，我们仅循环讨论每个参数。数组中的键变成了faker.js对象，而数组中的值变成了faker.js方法。数组中的值映射到HTML类，因此jQuery知道要查找的元素。

// loop over args
for (var key in args) {
   var obj = args[key];

   for (var prop in obj) {
        // jQuery finds the appropriate elements and fills them
        $('.faker-'+obj[prop]).each(function(){
            // Faker.Lorem.paragraphs()
            // Faker.Internet.domainName()
            $(this).html( Faker[key][obj[prop]]() );
        });
   }
}

而已！现在，您应该具有以下内容：

以这种方式抽象出我们的填充剂含量过程，可以非常轻松地添加/删除新型填充剂含量。现在，将来，如果您想从faker.js中添加新的填充内容类型，例如电子邮件Faker.Internet.email() ，只需将其添加到args变量中，然后使用一类faker-email ，无论你想生成一个假的电子邮件。

结论

我们在浏览器中构建了一个简单的模型，展示了五个文章摘录的设计示例。

我们每篇文章摘录的模板只有13行PHP / HTML，而生成HTML 远远不止于此。这样可以快速简便地进行原型制作。在这一点上，我们可以轻松地测试设计的响应特性，并查看内容和文本如何重排。我们可以调整任何需要它CSS，也可以很容易地添加更多具有相应填充物含量的设计元素。动态填充物含量使设计快速成型。也许您会在将来的项目中找到它的需求！

您可能会看到，这种原型设计可能对许多其他Web设计任务（尤其是数据驱动的任务）很有用。例如，如果您需要设计一个包含姓名，地址，电子邮件，电话号码等的联系人表，则可以使用faker.js轻松生成所需的任何填充内容。这使您可以更轻松地专注于表的设计，而不必将大量数据复制/粘贴到HTML中，而只是感觉到它的外观和响应方式。

翻译自: https://webdesign.tutsplus.com/tutorials/filler-content-tools-tips-and-a-dynamic-example--webdesign-12258

示例填充图片