网站建设公司分享网站前端设计之Red Hat 文档。网站建设公司资深前端设计师在回顾为 Red Hat 网站开发新的设计系统的长达一年的过程后，意识到整个项目是从一个文档需求开始的，并在此基础上发展壮大。深圳网站建设公司在本文提醒管理层最初的需求是为网站最通用的模块开发一个样式文档，并在 Red Hat 的其他站点之间复用。项目开始时只有一些 Sass 文件片段和 Hologram 样式文档，但它所孕育的却远不止这些。
网站建设公司分享网站前端设计之静态的样式文档
网站建设公司分享网站前端设计之静态的样式文档
网站建设公司在前面相关网站建设设计知识文章中提到的，Hologram 是一种文档工具，它在代码中寻找有特殊标记的文档注释块，并把这些注释块转换成样式文档。从 Nicole Sullivan 那里了解到 Hologram 以后，我感觉它应该是为正在开发的组件编写文档的完美工具。
Hologram 使用起来很方便快捷。每一个组件和布局都有自己的 Sass 文件片段，因此我们将文档块写在文件的最开头。文档块记录了很多东西，从组件的设计意图到它的功能和局限性，甚至还包括示例的 HTML 代码。示例的 HTML 代码可以帮助我们迅速了解组件的功能，而不用触发 CMS 系统，从而使得原型开发、跨浏览器测试和视觉还原测试更简单。
有了组件库和布局库之后，我们还花了很多时间来写入门文档。该文档不仅包括如何设置样式文档，还包括如何使用、如何贡献新的内容，以及如何发布新的版本。在这方面，Hologram 是个很不错的工具，因为我们可以简单地为文档创建一个文件夹，然后在其中创建 Markdown 文件，Hologram 就会基于页面的类别将这些 Markdown 文件的内容写入样式文档里。起初一切都进展得很顺利，直到我们突然记起最初的目标是创建一个样式文档，其中说明如何组合代码来创建出各种常用的模板。这并不困难，只需要创建一个模板文件夹，在其中创建 Markdown 文件，将 Markdown 文件连接到模板中使用的组件和布局中即可。Markdown 文件包括了对栅格、对齐、主题值等的描述。创建完成后，就可以将标记复制到 Markdown 文件，用它来说明诸如品牌 logo 如何显示、如何用 HTML 标记实现视频区块，以及特色活动区块中有两个活动和有三个活动时代码的差异。
问题是，每次将 HTML 标记从一个地方复制到另一个地方，标记被改变的概率就会无限增加。我们很快就发现这种方式有多么难以维护，因此很快开始寻找新的解决方案：对 HTML 标记片段使用单一源，并按需重用。不幸的是，Hologram 本身不支持任何模板语言。2014 年 10 月，我在这个项目的 Github 主页上提出了一个问题，“将 html_example 处理为 ruby 的视图模板，从而可以重用模板的继承关系”（https：//github.com/trulia/hologram/issues/159），如今仍待解决。深圳网站建设公司资深设计师提出的解决方案是，在文档文件传递到 Hologram 之前，就使用 Twig 模板引擎对其进行处理。我很惊讶地发现，Twig 处理 Markdown 文件完全没有问题。下面是文档的简单示例：
<！—— cta.docs.md ——>
——
hologram：true
title：CTA Component
category：Component - CTA
——
- A "Call-to-Action" component contains one or more CTA buttons.
## Primary Button
```html_example
{％ include "cta.twig" with {'type'：'primary'} ％}
```
## Secondary Button
```html_example
{％ include "cta.twig" with {'type'：'secondary} ％}
```
```html_example
<！—— cta.twig ——>
<div class="rh-cta" >
<a class="rh-cta-link" data-rh-cta-type="{{type}}" href="#">
CTA Button
</a>
</div>
```
从上述单个文档文件中可以看出，我们可以借助 Twig 的 include 函数，使用不同的参数，在文件不同的地方输出同样的 CTA 标记。结果文件可以直接传递给 Hologram 进行常规处理：
<！—— cta.docs.md ——>
——
hologram：true
title：CTA Component
category：Component - CTA
——
- A "Call-to-Action" component contains one or more CTA buttons.
## Primary Button
```html_example
<div class="rh-cta" >
<a class="rh-cta-link" data-rh-cta-type="primary" href="#">
CTA Button
</a>
</div>
```
## Secondary Button
```html_example
<div class="rh-cta" >
<a class="rh-cta-link" data-rh-cta-type="secondary" href="#">
CTA Button
</a>
</div>
```
如果要修改 CTA 标记，只需更新单个 Twig 模板文件，整个系统就可以使用新的标记了。好了，深圳网站建设公司本文关于“网站前端设计之Red Hat 文档”经验就分享到这里。如果您需要联系深圳网站建设公司为您定制高端门户网站或者电子商务平台，请联系我们网站在线客服或者拨打我们网站联系电话，有专业网站建设技术人员为您提供详细的解决方案。谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/design/14885.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。