iOS 个网站图标（添加到主屏幕）

Question

我正在使用 ExtLib 并且有一个使用 Bootstrap 的应用程序。我想在用户选择 "Add to Home Screen" 时添加一个图标。通过像这样扩展 bootstrap 主题，我已经成功地将我的图标添加到 Chrome 中的标签栏（在 Mac 上）：

<control override="false">
    <name>ViewRoot</name>
    <property>
        <name>pageIcon</name>
        <value>/$icon</value>
    </property>
    <property>
        <name>pageTitle</name>
        <value>#{database.title}</value>
    </property>
</control>

我现在想在 iOS 中添加 "Add to Home Screen" 功能的图标。我需要做的是添加以下代码：

<link rel="apple-touch-icon" sizes="60x60" href="icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="icon-120x120.png"/>  
<link rel="apple-touch-icon" sizes="180x180" href="icon-120x120.png"/>

到。我似乎找不到使用 XPages、ExtLib 和 bootstrap 主题的示例。

我希望能够将代码添加到主题或我的布局自定义控件中。

Answer 1

在布局自定义控件上使用 headTag。这是一个例子：

<xp:this.resources>
    <xp:headTag tagName="link">
        <xp:this.attributes>
            <xp:parameter name="rel" value="apple-touch-icon"></xp:parameter>
            <xp:parameter name="size" value="60x60"></xp:parameter>
            <xp:parameter name="href" value="icon-60x60.png"></xp:parameter>
        </xp:this.attributes>
    </xp:headTag>
</xp:this.resources>

Answer 2

不确定为什么要将它放入主题中？我希望他们为应用程序的 "entry" 页面添加书签，因此这是我需要正确图标的地方（而且我通常将它们放在布局自定义控件中）。

在（通常是单页应用程序）的 "entry" 页面上，我将类似这样的内容添加到 <head> 标记的开头：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Fav and touch icons -->
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon" sizes="72x72"   href="images/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon"                 href="images/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" type="image/png"   href="images/FavIcon.png">
<link rel="icon"             sizes="192x192" href="images/apple-touch-icon-144x144-precomposed.png">
<link rel="icon"             sizes="128x128" href="images/apple-touch-icon-114x114-precomposed.png">

如果您想将 headTag 添加到主题中，您当然可以使用 Per Henrik 在他的回答中描述的 headTag。

然后我还使用这个小脚本 Add-to-Homepage - 在入口页面:-)

/约翰

iOS 个网站图标（添加到主屏幕）

iOS favicons (Add to Home Screen)

twitter-bootstrap

xpages

xpages-extlib