Xpages：在主题中引用 css 和 js 资源

Question

我正在我的应用程序中扩展 Bootstrap 主题。我想通过主题包含一些 css 和 js 文件。

我尝试将服务器上的资源放在一个文件夹中。 我尝试将资源放在应用程序 Web-Content 文件夹中的“KendoUI”中。看来这些方法都不起作用。当我在应用程序中打开 Xpage 时，它​​似乎没有加载任何内容。

如果我将资源直接放在 Xpage 中，我可以看到文件在那里（通过 Chrome）。

我在主题中的语法有错误吗？

顺便说一句，css文件可以添加到样式下的资源中，js可以添加到代码下的脚本库中。我们还可以使用 package explore 将资源放在 WebContent 文件夹中。这两个放资源的地方有什么不同？

 <!--

    Use this pattern to include resources (such as style sheets
    and JavaScript files that are used by this theme.

  -->

<theme
    extends="Bootstrap3.2.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd">

<!-- Kendo Grid Resources Web Content-->
 <resources>
        <styleSheet href="KendoUI/styles/kendo.common.min.css"></styleSheet>      
        <script target="xsp" src="KendoUI/js/jquery.min.js" clientSide="true" type="text/x-javascript"/>   
        <script target="xsp" src="KendoUI/js/kendo.all.min.js" clientSide="true" type="text/x-javascript"/>   
</resources>    

<!-- Kendo Grid Resources File System-->    
<resource>
 <content-type>application/x-javascript</content-type>
 <href>/.ibmxspres/domino/KendoUI/js/jquery.mim.js</href>
</resource>



    <control>
        <name>ViewPanel.Disable.Header.Footer</name>
        <property
            mode="override">
            <name>viewStyle</name>
            <value>width:99%</value>
        </property>
        <property>
            <name>headerEndStyle</name>
            <value>display: none;</value>
        </property>
        <property>
            <name>headerStartStyle</name>
            <value>display: none;</value>
        </property>
        <property>
            <name>headerStyle</name>
            <value>display: none;</value>
        </property>
        <property>
            <name>footerStyle</name>
            <value>display: none;</value>
        </property>
        <property>
            <name>footerStartStyle</name>
            <value>display: none;</value>
        </property>
        <property>
            <name>footerEndStyle</name>
            <value>display: none;</value>
        </property>
        <property>
            <name>viewStyleClass</name>
            <value>xspDataTableViewPanel</value>
        </property>
        <property>
            <name>dataTableStyleClass</name>
            <value>xspDataTable</value>
        </property>
        <property>
            <name>headerRowStyleClass</name>
            <value>xspDataTableHeaderRow</value>
        </property>
        <property>
            <name>bodyRowStyleClass</name>
            <value>xspDataTableBodyRow</value>
        </property>
        <property>
            <name>bodyCellStyleClass</name>
            <value>xspDataTableBodyCell</value>
        </property>
        <property>
            <name>unreadMarksClass</name>
            <value>xspDataTableRowUnread</value>
        </property>
        <property>
            <name>readMarksClass</name>
            <value>xspDataTableRowRead</value>
        </property>
        <property>
            <name>captionStyleClass</name>
            <value>xspDataTableViewPanelCaption</value>
        </property>
    </control>
</theme>

Answer 1

每个资源都有自己的资源标签。我的 CSS 和 JS 在 WebContent\Libs 下的子文件夹中

<!-- fontawesome css-->
    <resource>
        <content-type>text/css</content-type>
        <href>libs/fontawesome/css/font-awesome.min.css</href>
    </resource>

<resource>
        <content-type>application/x-javascript</content-type>
        <href>libs/moment/min/moment.min.js</href>
    </resource>

Answer 2

根据您使用的扩展库版本，您可能需要仔细检查您对 Bootstrap 3 主题的引用，该主题从 Bootstrap3.2.0 变为 Bootstrap3（以便在版本之间实现更无缝升级）， introduced in 9.0.1 v16.

As Frank has outlined in his answer，它们只是您可以指向的资源；因此，如果您将 Kendo UI 资源转储到 WebContent 中的文件夹中，请将其视为应用程序的“根”，并且它是从那里开始的相对路径。

我不相信它“重要”（本身），无论您将资产放入代码/资源设计元素界面还是放入WebContent（例如，通过包资源管理器），但我更喜欢转储库和框架到WebContent，以便保持代码和资源部分“整洁”，可以这么说。这也意味着如果您切换到依赖管理解决方案（bower 或其他），则相对路径不会发生太大变化。

确保使用对应的resource标签结构，正如弗兰克所说的那样；您似乎正在使用“Kendo Grid Resources File System”评论为您的区块执行此操作，但似乎在带有“Kendo Grid Resources Web Content”评论的区块中偏离了这一点。 *注意：我没有'在第一次阅读时不会注意到您正在为那些使用 resources 块