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

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

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

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

我的主题语法有错误吗

另外，css文件可以添加到“样式”下的资源中，js可以添加到“代码”下的脚本库中。我们还可以使用PackageExplore将资源放在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>

application/x-javascript
/.ibmxspres/domino/KendoUI/js/jquery.mim.js
ViewPanel.Disable.Header.Footer
视图样式
宽度：99%
头部样式
显示：无；
头型
显示：无；
头式
显示：无；
页脚样式
显示：无；
页脚开始样式
显示：无；
页脚样式
显示：无；
viewStyleClass
xspDataTableViewPanel
dataTableStyleClass
xspDataTable
headerRowStyleClass
xspDataTableHeaderRow
bodyRowStyleClass
xspDataTableBodyRow
bodyCellStyleClass
xspDataTableBodyCell
未读标记类
xspDataTableRowUnread
读标记类
xspDataTableRowRead
字幕样式类
xspDataTableViewPanelCaption

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

<!-- 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>

文本/css
libs/fontawesome/css/font-awesome.min.css
application/x-javascript
libs/moment/min/moment.min.js

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

<!-- 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>

文本/css
libs/fontawesome/css/font-awesome.min.css
application/x-javascript
libs/moment/min/moment.min.js

根据您正在使用的扩展库的版本，您可能需要再次检查对Bootstrap 3主题的引用，该主题从

Bootstrap 3.2.0

到

Bootstrap 3

（以便在版本之间进行更无缝的升级）

，它们只是你可以指向的资源；因此，如果您要将剑道UI资源转储到

WebContent

中的文件夹中，请将其视为应用程序的“根”，并将其视为相对于应用程序的路径

我认为，无论您是将资产放入代码/资源设计元素界面还是WebContent（例如，通过PackageExplorer），都“无关紧要”（本质上），但我更喜欢将库和框架转储到WebContent，这样可以说，代码和资源部分“没有混乱”。这还意味着，如果您切换到依赖关系管理解决方案（或其他解决方案），则相对路径不会有太大变化

---

确保使用相应的

资源

标记结构，如Frank所述；在“剑道网格资源文件系统”注释中，您似乎是在为您的块执行此操作，但在“剑道网格资源Web内容”注释中，您似乎偏离了此操作*注意：在第一次阅读时，我没有注意到您正在为那些

使用

资源

块，这取决于您使用的扩展库的版本，您可能需要再次检查对Bootstrap3主题的引用，该主题从

Bootstrap3.2.0

到

Bootstrap3

（为了在版本之间进行更无缝的升级）

，它们只是您可以指向的资源；因此，如果您要将剑道UI资源转储到

WebContent

中的文件夹中，请将其视为应用程序的“根”，并将其视为相对于应用程序的路径

我认为，无论您是将资产放入代码/资源设计元素界面还是WebContent（例如，通过PackageExplorer），都“无关紧要”（本质上），但我更喜欢将库和框架转储到WebContent，以保持代码和资源部分“无混乱”这也意味着，如果您切换到依赖关系管理解决方案（或其他解决方案），则相对路径不会有太大变化

---

确保使用相应的

resource

标记结构，正如Frank所概述的那样；您似乎在使用“剑道网格资源文件系统”注释为您的区块执行此操作，但似乎在使用“剑道网格资源Web内容”的区块中偏离了此标记结构注释。*注意：我在第一次阅读时没有注意到您正在使用

资源

块来处理这些

谢谢Frank。我有两个问题，语法正如您所指出的，并且我没有在XSP属性中设置修改过的主题。这帮了大忙。：）谢谢Frank。我有两个问题，语法如您所指出的，并且我没有在XSP属性中设置修改过的主题。这帮了大忙。：）埃里克，谢谢你的信息。非常有用。现在一切都好了。我很高兴你把一切都搞定了。我完全忘记了那些神秘的

样式表

标签（例如-

Eric，谢谢你提供的信息。非常有用。一切正常