Question

我只是尝试将一个bootstrap.min.css文件及其对应的bootstrap.min.js文件添加到Apostrophe CMS项目中。我不知道如何简单地添加静态资源。我的app.js中有以下内容

'apostrophe-assets': {
    stylesheets: [
        {
            name: 'bootstrap.min',
            minify: false
        },
        {
            name: 'site'
        }
    ],
    scripts: [
        {
            name: 'bootstrap.min',
            minify: false
        }
    ]
}

但是唉，它什么也没做。我已经删除了.min版本并尝试了这些版本，但仍然没有。

在这方面，我需要能够链接到我的导航栏中使用的.png，但我不知道在哪里存储网站的任何静态资源。

是否有一个地方我可以放弃我不想按apostrophe-assets推送的静态文件，以便正确呈现和使用它们？

Answer 1

我是P＆＃39; unk Avenue的Apostrophe的首席开发人员。

为此，Apostrophe需要将文件放在：

lib/modules/apostrophe-assets/public/css/bootstrap.min.css

和

lib/modules/apostrophe-assets/public/js/bootstrap.min.js

在项目中（不要将它们复制到node_modules中）。您可以在自己的项目中创建自己的lib/modules/apostrophe-assets文件夹，以与撇号npm模块中的文件夹并行。

这是as documented here in the tutorials on pushing assets。

（如果您在推送CSS文件时遇到问题，请尝试使用.less扩展名重命名，并告诉我您必须这样做。但它应该是不必要的。）

当然，也没有什么可以阻止你覆盖自己模板中outerLayoutBase.html中的任何块来插入脚本和链接标记，但这不是必需的。如果您遵循惯例，我建议您的文件将与生产中的其他所有内容一起缩小。

Answer 2

我使用apostrophe-assets模块按照@boutell提供的方法推送css和js文件。对于推送js文件，它没问题，但对于css我有一个与bootstrap css相关的解析错误。所以它是因为撇号试图将其编译成css，而它已经是css了。

要解决此问题，我已覆盖outerLayot.html Nunjucks模板。所以基本上在文件中 node_modules/lib/modules/apostrohpe-templates/views/outerLayout.html，我们有：

{% extends "outerLayoutBase.html" %}

它本身扩展了outerLayoutBase.html

node_modules/lib/modules/apostrohpe-templates/views/outerLayoutBase.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{% block title %}{% endblock %}</title>
    {{ apos.assets.stylesheets(data.when) }}
    {% block standardHead %}
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% endblock %}
    {% block extraHead %}
    {% endblock %}
  </head>
  <body class="{% block bodyClass %}{% endblock %}">
    {% block apostropheMenu %}
      {{ apos.adminBar.output() }}
    {% endblock %}

    {% if data.user %}
    <div class="apos-ui">
      <div class="apos-context-menu-container">
        {{ apos.pages.publishMenu({ publishMenu: data.publishMenu, page: data.page, piece: data.piece, bottom: true }) }}
        {{ apos.pages.menu({ contextMenu: data.contextMenu, page: data.page, bottom: true })}}
      </div>
    </div>
    {% endif %}
    <div class="apos-refreshable" data-apos-refreshable>
      {% block beforeMain %}{% endblock %}
      <a name="main"></a>
      {% block main %}{% endblock %}
      {% block afterMain %}{% endblock %}
    </div>
    {{ apos.assets.templates(data.when) }}
    {{ apos.assets.scripts(data.when) }}
    <script type="text/javascript">
      {{ data.js.globalCalls }}
      {{ data.js.reqCalls }}
    </script>
    {% block extraBody %}
    {% endblock %}
  </body>
</html>

这里我使用了{% block extraHead %}{% endblock %}块并将其覆盖到一个新文件中，该文件是： /lib/modules/apostrohpe-templates/views/outerLayout.html

{% extends "outerLayoutBase.html" %}

{% block extraHead %}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
{% endblock %}

在上面的文件中包含bootstrap css的CDN并按预期工作。 请注意此新文件的路径。 lib文件夹位于根文件夹下，而不是node_modules。

将Bootstrap和徽标png添加到Apostrophe CMS

2 个答案: