将 Bootstrap 和徽标 png 添加到 Apostrophe CMS

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 版本并尝试了那些，仍然没有。

关于这一点，我需要能够 link 到将在我的导航栏中使用的 .png，但我不知道在哪里存储网站的任何静态资源。

有什么地方可以让我删除不想推送的静态文件 apostrophe-assets 以便正确渲染和使用它们？

Answer 1

我是 P'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 中的任何块以插入脚本和 link 标记，但这不是必需的。如果您遵循我推荐的做法，您的文件将与生产中的所有其他内容一起缩小。

Answer 2

我使用 apostrophe-assets 模块推送 css 和 js 文件，方法与@boutell 提供的方法相同。对于推送 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

Adding Bootstrap and a logo png to Apostrophe CMS

node.js

twitter-bootstrap

apostrophe-cms