html5-boilerplate中文翻译 - 扩展和定制 HTML5 Boilerplate

in #cn • 7 years ago

HTML5 Boilerplate 主页 | 目录

扩展和定制HTML5 Boilerplate

这是一些有用的建议，使你的项目与HTML5 Boilerplate更好地工作，默认情况下，我们不希望全部包含它，因为并非一切都符合每个人的需要。

  • App Stores
  • DNS预读取
  • Google Universal Analytics
  • Internet Explorer](#internet-explorer
  • 其它事项
  • 新闻订阅
  • 搜索
  • 社交网络
  • URLs](#urls
  • Web Apps](#web-apps

App Stores

iOS 6+ Safari里的智能应用横幅

停止在App Store中用巨大的模态框做广告打扰到所有人。包含以下meta标签将非侵入性的允许使用该选项下载你的iOS应用程序，或者打开关于用户在网站上的当前状态的一些数据。

<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">

DNS预读取

简单说，DNS预读取是一种通知浏览器网站上引用的域名的方法，以便客户端可以解析这些主机的DNS，缓存它们，以及适时使用它们，有着更快的请求速度。

后台预读取

浏览器自动为你完成了许多预读取。当浏览器在你的html中，遇到不与浏览器请求的当前地址共享相同域名的锚点时，浏览器从客户端系统请求此新域的IP地址。客户端首先检查缓存，找不到缓存的话，从DNS服务器发出请求。这些请求发生在后台，并不会阻碍页面的渲染。

这样做的目的是当最终请求外部IP地址时，它已经在客户端缓存中，并且不会阻止外部内容的加载。更少的请求会导致更快的页面加载。在DNS延迟可能更大的移动平台上，这种感觉会更加明显。

禁止后台预读取

<meta http-equiv="x-dns-prefetch-control" content="off">

即使使用X-DNS-Prefetch-Control meta标签（或http头），浏览器仍然会预读取任何明确的dns预读取链接。

警告： 如果你依赖外部域的资源，那么网站的速度可能会变慢。

显式预读取

通常，浏览器只扫描外部域的HTML。如果HTML不包含你的资源（例如，对远程服务器或CDN的JavaScript请求，其中托管可能不存在于你网站的每个页面上的内容），那么你可以显式地添加一个域名来预读取。

<link rel="dns-prefetch" href="//example.com">
<link rel="dns-prefetch" href="https://ajax.googleapis.com">

你可以根据需要使用更多的预读取，但如果将它们全部放在Meta字符集元素之后（应该直接放在在head的顶部），那么这是最好的，因为浏览器可以尽快对其进行处理。

常见预读取链接

Amazon S3:

<link rel="dns-prefetch" href="//s3.amazonaws.com">

Google APIs:

<link rel="dns-prefetch" href="https://ajax.googleapis.com">

Microsoft Ajax内容交付网络：

<link rel="dns-prefetch" href="//ajax.microsoft.com">
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">

进一步了解DNS预读取

Google Universal Analytics

更多跟踪设置

HTML5 Boilerplate优化过的Google Universal Analytics片段包含以下内容：

ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');

进一步定制，查看Google的高级设置、浏览量和事件文档。

匿名IP地址

在一些国家，在没有类似严格法律的司法管辖区之外，不得转移任何个人资料（即从德国到欧盟以外）。因此，使用Google Universal Analytics的网站管理员可能必须确保没有个人（可跟踪）的数据被传输到美国。你可以在发送任何事件/浏览量之前，通过使用ga('set'、'anonymizeIp'、 true);参数来防止数据被跟踪。使用时看起来像这样：

ga('create', 'UA-XXXXX-X', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');

跟踪Google Analytics中的jQuery AJAX请求

@JangoSteve的一篇文章解释了如何跟踪Google Analytics中的jQuery AJAX请求。

将其添加到plugins.js中：

/*
 * Log all jQuery AJAX requests to Google Analytics
 * See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
 */
if (typeof ga !== "undefined" && ga !== null) {
    $(document).ajaxSend(function(event, xhr, settings){
        ga('send', 'pageview', settings.url);
    });
}

跟踪Google Analytics中的JavaScript错误

在ga定义后添加此函数：

(function(window){
    var undefined,
        link = function (href) {
            var a = window.document.createElement('a');
            a.href = href;
            return a;
        };
    window.onerror = function (message, file, line, column) {
        var host = link(file).hostname;
        ga('send', {
          'hitType': 'event',
          'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
          'eventAction': message,
          'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
          'nonInteraction': 1
        });
    };
}(window));

跟踪页面滚动

在ga定义后添加此函数：

$(function(){
    var isDuplicateScrollEvent,
        scrollTimeStart = new Date,
        $window = $(window),
        $document = $(document),
        scrollPercent;

    $window.scroll(function() {
        scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
        if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
            isDuplicateScrollEvent = 1;
            ga('send', 'event', 'scroll',
                'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
            );
        }
    });
});

Internet Explorer

提示用户在IE10 Metro中切换到”桌面模式“

IE10在Metro模式下不支持插件，比如Flash。如果你的网站需要插件，你可以通过设置x-ua-compatiblemeta元素，提示用户切换到桌面模式。

<meta http-equiv="x-ua-compatible" content="requiresActiveX=true">

这是H5BP默认的x-ua-compatible值：

<meta http-equiv="x-ua-compatible" content="ie=edge,requiresActiveX=true">

你可以找到更多的信息，在微软的IEBlog发布了关于IE10 Metro模式下插件使用的提示的文章中。

IE固定网站 （IE9+）

开启你的应用程序锁定将允许IE9（及以上）用户将其添加到Windows任务栏和开始菜单中。它带来了一系列新的工具，你可以使用以下元素轻松地配置。查看IE9固定网站的文档了解更多。

为Windows的固定站点命名

如果不使用这条规则，Windows将使用页面标题作为你的应用程序的名称。

<meta name="application-name" content="Sample Title">

给你的固定网站一个提示

你知道 —— 一个提示。当用户将鼠标移到固定网站的图标上时，将出现一个小文本框。

<meta name="msapplication-tooltip" content="A description of what this site does.">

为你的固定网站设置默认页面

如果固定的网站应该导航到特定URL（如主页），在这里输入。一个想法是将其发送到一个特殊的URL，这样，你可以跟踪固定网站用户的数量，像这样：
https://www.example.com/index.html?pinned=true

<meta name="msapplication-starturl" content="https://www.example.com/index.html?pinned=true">

Recolor IE's controls manually for a Pinned Site 手动更改IE固定网站的控件颜色

IE9+浏览器将自动使用你的固定网站图标的整体颜色来覆盖其浏览器按钮颜色，除非你在这里给它另一种颜色，只能使用命名颜色（red）或十六进制颜色（＃ff0000）。

<meta name="msapplication-navbutton-color" content="#ff0000">

手动设置固定网站的窗口大小

如果固定网站应该在某个大小窗口打开，你可以在此处指定尺寸。它只支持固定像素尺寸，最低800x600。

<meta name="msapplication-window" content="width=800;height=600">

固定网站的跳转列表

当右键单击固定网站的图标时将显示跳转列表。每个任务跳转到指定的URL，并获得自己的迷你图标（基本上是一个16x16的.ICO图标）。你可以根据需要任意添加。

<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">

（Windows 8） 固定网站的高品质视觉效果

Windows 8添加了允许你使用PNG图片，并指定图片背景颜色的能力。请参考IE博客上的全部细节。

  • 为你的网站图标创建一个144x144的图像，填充所有画布，并使用透明背景。
  • 将此图像保存为32位的PNG图片，并优化它，这将不会降低颜色深度。你可以任意命名（比如，metro-tile.png）。
  • 要引用磁贴及其颜色，请添加上面IE博客文章中描述的HTMLmeta标签。

（Windows 8） 固定网站的徽章

IE10将轮询一个XML文档以获取徽章信息，并在开始菜单的应用程序磁贴上展示。即使你的应用程序没有正在运行，用户也可以收到这些徽章的更新。徽章的值可以是数字，也可以是预定义的字形列表之一。

<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=https://www.example.com/path/to/file.xml">

IE10禁止被点击的链接突出显示

与iOS Safari中-webkit-tap-highlight-color的类似。不同的是CSS属性，它是一个HTML meta标签，并且它的值是布尔值，而不是颜色值。要么有值，要么没值。

<meta name="msapplication-tap-highlight" content="no" />

您可以阅读Microsoft关于IE10适应面向WebKit的应用程序的文档，了解这个有用的元素和更多技术。

搜索

搜索引擎直接搜索你的站点地图

创建站点地图后

将其提交到搜索引擎工具：

  • Google
  • Bing
  • Yandex
  • Baidu
    或者
    在robots.txt文件的任何位置插入以下行，指定你的站点地图的路径：
Sitemap: https://example.com/sitemap_location.xml

禁止搜索引擎索引页面

据Flickr前社区经理Heather Champ介绍，如果你头脑清晰的话，不应该允许搜索引擎索引你的“联系我们”或“投诉”页面。这是一个以HTML为中心的实现方式。

<meta name="robots" content="noindex">

警告: 不要包含在搜索引擎中可能出现的页面。

Firefox和IE的搜索插件

浏览器搜索插件应强烈考虑具有站内搜索功能的网站。一个“搜索插件”是一个XML文件，用于定义插件在浏览器中的行为。如何创建一个浏览器搜索插件。

<link rel="search" title="" type="application/opensearchdescription+xml" href="">

其它事项

新闻订阅

RSS

有RSS订阅？像下面一样在链接它。想要从头开始学习如何编写RSS订阅？

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">

Atom

Atom类似于RSS，你可能更喜欢使用它。看看Atom的所有内容。

<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">

Pingbacks

当其它站点链接到你的服务器时，你的服务器可能会被通知。href属性应该包含你的pingback服务的位置。

<link rel="pingback" href="">

社交网络

Facebook Open Graph数据

你可以控制Facebook和其他用户在分享你的网站时显示的信息。以下只是你可能需要的最基本的数据点。对于特定的内容类型（包括 “网站”），查看Facebook的内置Open Graph内容模板。通过Open Graph教程，充分利用Facebook对复杂数据和活动的支持。

参考Open Graph的标记和属性，你可以查看Facebook的Open Graph 协议参考。最后，你可以使用Facebook对象调试器验证您的标记（需要注册Facebook）。

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://www.example.com/path/to/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:image" content="https://www.example.com/path/to/image.jpg">
<meta property="og:description" content="">
<meta property="og:site_name" content="">
<meta property="article:author" content="">

Twitter卡片

Twitter提供了与Open Graph目地类似的代码段规范。事实上，当卡片不可用时，Twitter将使用Open Graph。请注意，在撰写本文时，Twitter要求应用程序开发人员在每个域的基础上激活卡片。你可以在Twitter官方卡片文档中阅读有关各种片段格式和应用程序进程的更多信息。你可以使用卡片验证器（需要注册Twitter）验证你的标记。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://www.example.com/path/to/page.html">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="https://www.example.com/path/to/image.jpg">

Google+ / Schema.org

Google也提供了一个与Facebook Open Graph或Twitter卡片类似目的的代码段规范。它可以帮助你控制在Google+上显示的信息，这个元数据是schema.org的微数据词汇的一个子集，其中涵盖了许多其他可以将你的页面内容描述给搜索引擎的模式。因此，这个元数据对于SEO而言更为通用，特别是对于Google的搜索引擎,虽然这个词汇也被微软、Pinterest或Yandex所使用。

可以使用结构化数据测试工具验证你的标记。此外，请注意，此标记需要将属性添加到顶部的html标签。

<html class="no-js" lang="" itemscope itemtype="http://schema.org/Article">
    <head>

        <link rel="author" href="">
        <link rel="publisher" href="">
        <meta itemprop="name" content="">
        <meta itemprop="description" content="">
        <meta itemprop="image" content="">

URLs

典型URL

当＃或？之后的参数用于控制页面的显示状态时，向搜索引擎和其他人发出“将此URL用于此页面！”的信号是有用的。https://www.example.com/cart.html?shopping-cart-open=true可以作为更干净，更准确的https://www.example.com/cart.html被编入索引。

<link rel="canonical" href="">

正式的短链接

向世界发出“这是使用此页面的缩短的URL！”的信号目前被支持地很差。阅读Microformats wiki上关于短链接的文章了解更多信息。

<link rel="shortlink" href="h5bp.com">

单独的移动URLs

如果你为桌面和移动用户提供单独的网址。你应该考虑帮助搜索引擎算法更好地了解你的网站上的配置。

这可以通过在HTML页面中添加以下注解来完成：

  • 在桌面页面上，add the link rel="alternate" tag pointing to the
    corresponding mobile URL, e.g.:

    <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page.html" >

  • 在移动页面上，添加link rel="canonical"标签指向相应的桌面端网址，例如：

    <link rel="canonical" href="https://www.example.com/page.html">

更多信息，请参考：

Web Apps

有一对meta标签用于在将web app添加到ios主屏幕时，提供web app的相关信息。

  • 添加apple-mobile-web-app-capable将使你的web app无需Chrome，并提供默认的iOS应用程序视图。你可以通过添加apple-mobile-web-app-status-bar-style来控制默认视图的配色方案。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
  • 你可以使用apple-mobile-web-app-title为主屏幕图标添加特定的站点名称。在iOS 6及以后的版本上起作用。
<meta name="apple-mobile-web-app-title" content="">

更多信息，请阅读苹果网站上的官方文档。

Apple Touch 图标

Apple touch图标可以被看作是iOS设备的网站图标。

Apple touch图标的主要尺寸有：

  • 57×57px – @1x屏的iphone和iPod Touch
  • 72×72px – iPad和运行iOS版本小于等于6，并且@1x屏的iPad mini
  • 76×76px – iPad和运行iOS版本大于等于7，并且@1x屏的iPad mini
  • 114×114px – 运行iOS版本小于等于6，并且@2x屏的iPhone
  • 120×120px – 运行iOS版本大于等于7，并且@2x屏的iPhone
  • 144×144px – iPad和运行在iOS版本小于等于6，并且@2x屏的iPad mini
  • 152×152px – iPad和运行iOS 7版本，并且@2x屏的iPad mini
  • 180×180px – iPad和运行iOS 8版本，并且@2x屏的iPad mini

显示含义：

  • @1x - 非Retina屏
  • @2x - Retina
  • @3x - Retina HD

有关iOS显示屏的更多信息可以在这里找到。

在大多数情况下，一个180×180px的触摸图标命名为icon.png，包括：

<link rel="apple-touch-icon" href="icon.png">

在页面的<head>中就够了。如果你偏向艺术方向和/或想要让每个设备拥有不同的内容，如上所述，你可以添加更多触摸图标。

更全面的概述，请参考Mathias的触摸图标文章

Apple Touch启动图像

除此之外，可以在iOS上为web app添加启动屏幕。通过使用与图像相关联的链接定义apple-touch-startup-image.这基本上起作用。由于iOS设备具有不同的屏幕分辨率，因此需要添加媒体查询以检测要加载的图像。这是一个retina屏的iPhone的例子：

<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png">

然而，可以使用JavaScript检测要使用的启动图像。移动端Boilerplate为此提供了一个有用的功能。请参看helpers.js进行实现。

手机Chrome的web apps

手机Chrome有一个特定的meta标记，用于将应用程序安装到主屏幕，试图成为比苹果公司专有的meta标签更为通用的替代品：

<meta name="mobile-web-app-capable" content="yes">

触摸图标同样适用：

<link rel="icon" sizes="192x192" href="highres-icon.png">

主题

你可以在页面的<head>中添加meta 扩展theme-color，以建议浏览器和操作系统在使用不同颜色的用户界面中自定义各个页面的显示时应使用的颜色。

<meta name="theme-color" content="#ff69b4">

content属性扩展可以使用任何有效的CSS颜色。

目前，Android Lollipop及更高版本上的Chrome 39及以上版本支持theme-color标签扩展。

注：翻译中的链接现在还是原文中的链接（链接内容还是英文文档），当翻译到相关文章时，会进行相应替换。最后全部翻译完成时，就不会再有这种情况发生，到时大家可以到github上查看完整文档，现在还请大家多多谅解。

What you want, Go after It.

https://steemit.com 首发。感谢阅读。

欢迎Follow, Upvote, Reply, Resteem (repost)激励我创作更多更好的内容。

@syt

#developer #html5 #translation
7 years ago in #cn by
$0.00
    1 vote
    Reply 0
    Sort:  
  • Trending