精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据（3）

look_w

将这些类添加到 HTML 后，就可以定义一些自定义 CSS 规则了。在文本编辑器中打开 public/modules/core/css/core.css。因为每个模块都拥有自己的        CSS，所以可保持 “面向组件” 的理念。而且通过抓取整个子目录树，更容易在项目间共享模块。
添加 CSS 样式规则，如清单 3 所示。
清单 3. public/modules/core/css/core.css

1 2 3 4 5 6 7 8 9 10 11

.event {     width: 75%; } .event-date {     font-style: italic; } .event-title {     margin-top: 0; }

现在您的主页看起来没那么粗糙，更加美观了，如图 4 所示。
图 4. 带 CSS 样式的 UGLI 主页
最后，再次返回添加微数据元数据。能否跳过一步，在 CSS 规则中使用微数据元素，而不定义自定义元素？当然可以。但我想将它们分开。毕竟，它们具有两种不同的用途。一个用于 CSS        样式，另一个用于搜索引擎优化 (SEO)。假设您 5        年前遇到一个用户案例，要求您将微数据迁移到另一个更新的规范。如果在满足案例要求的同时，带来了影响网站外观的副作用，就太遗憾了。这两个特性应是完全不同的。
再一次在文本编辑器中打开 public/modules/core/views/home.client.view.html。为该活动添加新的语义微数据标记，如清单 4        所示。（有关使用微数据标记活动的范例，请参阅  。）
清单 4. 添加微数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<div class="row center-block event"    itemscope    itemtype="http://data-vocabulary.org/Event">   <span itemprop="eventType"       style="display:none;">Meetup</span>   <time class="event-date"       itemprop="startDate"       datetime="2014-09-22T18:00-06:00">Monday, September 22, 2014</time>   <h3 class="event-title"><a href="http://www.meetup.com/HTML5-Denver-Users-Group/events/160326502/"     itemprop="url"><span itemprop="summary">"Developing Offline Applications" and     "HTML 5 Animations"</span></a></h3>   <div class="col-md-4">     <h4>When</h4>     <p>6pm</p>     <h4>Where</h4>     <address itemprop="location"          itemscope          itemtype="http://data-vocabulary.org/?Organization">       <span itemprop="name">Rally Software</span><br>       <span itemprop="address"           itemscope           itemtype="http://data-vocabulary.org/Address">         <span itemprop="street-address">1550 Wynkoop</span><br>           <span itemprop="locality">Denver</span>, <span itemprop="region">CO</span><br>       </span>     </address>   </div>   <div class="col-md-8" itemprop="description">     <p><b>6 pm : "Developing Offline Applications with HTML 5" by Venkat Subramaniam</b></p>     <p><b>7 pm: Dinner and Networking</b></p>     <p><b>7:30 pm: "HTML 5 Animations - building true richness on the web" by Venkat Subramaniam</b></p>   </div> </div>

肯定需要大量工作，最终才能在浏览器中得到与之前完全相同的显示结果，是不是？但值得高兴的是，由于您费力添加的所有语义数据，您的网站上升到了搜索结果的最前面。
我们不会逐行地详细解释清单 4，我仅指出一些重要的地方。
与   中的 Meetup.com 示例一样，我们向一个没有显示的元素添加了        eventType（因为它仅用于 SEO）：

1 2	<span itemprop="eventType"       style="display:none;">Meetup</span>

接下来，向活动添加一个日期以供人和机器使用：

1 2 3

<time class="event-date"       itemprop="startDate"       datetime="2014-09-22T18:00-06:00">Monday, September 22, 2014</time>

作为人类，您可立即分析字符串 Monday, September 22, 2014，认识到它是一个日期。您还能够将 9/22/2014 和        2014-09-22 识别为同一个日期。但计算机更加注重字面内容，像这样的细小的格式更改可能导致重大的故障。在这个示例中，您执行了多处更改来消除歧义：

• 您将 HTML 元素从通用的 <div> 升级为更具体的 <time>（一个新的 HTML5          元素）。
• CSS event-date 类识别数据的内容，而不是外观。
• itemprop="startDate" 微数据属性将此日期识别为 event 的            startDate。
• datetime 属性（HTML5 <time> 元素的一部分）清晰地表明该时间为 ISO 8601          格式。这样，既可提供一种机器可使用的时间，又可提供一种用于显示和人类使用的格式良好的时间。

对 HTML 的最大更改包括活动的地址，如清单 5 所示。您在 Event 模式内嵌套了多种新模式          —Organization and Address。
清单 5. 添加组织和地址的微数据

1 2 3 4 5 6 7 8 9 10 11 12

<h4>Where</h4> <address itemprop="location"          itemscope          itemtype="http://data-vocabulary.org/?Organization">     <span itemprop="name">Rally Software</span><br>     <span itemprop="address"           itemscope           itemtype="http://data-vocabulary.org/Address">         <span itemprop="street-address">1550 Wynkoop</span><br>           <span itemprop="locality">Denver</span>, <span itemprop="region">CO</span><br>     </span> </address>