1

我只是想将一个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以便正确渲染和使用它们？

4

2 回答 2

3

我是 P'unk Avenue 的 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 模块中的文件夹平行。

这是关于推送资产的教程中记录的。

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

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

于 2017-01-15T23:15:25.153 回答
0

我已经使用该apostrophe-assets模块来推送 css 和 js 文件，方法与 @botell 提供的方法相同。对于推送js文件没关系，但是对于css 我有一个与引导 css 相关的解析错误。所以这是因为撇号试图将它编译成 css，而它已经是 css。

为了解决这个问题，我重写了outerLayot.htmlNunjucks 模板。所以基本上在文件 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 %}

在上面的文件中包含引导 css 的 CDN，并按预期工作。记下这个新文件的路径。该lib文件夹位于根文件夹下，而不是node_modules.

于 2017-01-26T11:12:12.943 回答