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

Question

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

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

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

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

顺便说一下，css文件可以添加到styles下的资源中，js可以添加到Code下的脚本库中。我们还可以使用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

根据您使用的扩展库版本，您可能需要仔细检查对Bootstrap 3主题的引用，该主题从Bootstrap3.2.0转到9.0.1 v16中引入的Bootstrap3（以便在版本之间进行更无缝的升级）。

正如弗兰克在他的回答中概述的那样，它们只是你可以指出的资源;因此，如果您要将剑道UI资源转储到Web内容中的文件夹中，请将其视为应用程序的“根”，并且它是从那里开始的路径相对的。

我认为这并不重要（就其本身而言），无论您是将资产放入Code/Resources设计元素界面还是放入WebContent（例如，通过Package Explorer），但我更喜欢将库和框架转储到WebContent中，以便保持Code和Resources部分“没有杂乱”，可以这么说。这也意味着如果您切换到依赖管理解决方案（鲍尔或其他），相对路径不会有太大变化。

<罢工>确保使用相应的资源标记结构，正如Frank所述；您似乎在用“Kendo Grid Resources File System”注释为您的块执行此操作，但在用“Kindo Grad Resources Web Content”注释的块中，似乎偏离了此操作。*注：我第一次阅读时没有注意到您正在使用资源块

Answer 2

每个资源都有自己的资源标签。我的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>