Question

我正在使用ExtLib并拥有一个使用Bootstrap的应用程序。当用户选择＆＃34;添加到主屏幕＆＃34;时，我想添加一个favicon。我已经设法通过扩展引导程序主题将我的图标添加到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>

我现在想添加＆＃34;添加到主屏幕的图标＆＃34; iOS中的功能。我需要做的是添加以下代码：

<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

不确定为什么要将它放在主题中？我希望他们为应用程序的“条目”页面添加书签，因此我需要正确的图标（我通常将它们放在布局自定义控件中）。

在（通常是单页面应用程序）的“条目”页面上，我将这样的内容添加到<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在他的回答中描述的，如果你想将它添加到主题中。

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

/约翰

iOS favicons（添加到主屏幕）

2 个答案: