向撇号CMS添加Bootstrap和徽标png

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

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

但唉,它什么都不做。 我也删除了.min版本,并尝试了这些,仍然没有。

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

有没有一个地方,我可以放下静态文件,我不想推动作为apostrophe-assets以便他们正确渲染和使用?

       

网上收集的解决方案 "向撇号CMS添加Bootstrap和徽标png"

我是P'unk大道的撇号首席开发者。

为此,Apostrophe需要将文件放置在:

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

和:

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

您的项目中 (不要将它们复制到node_modules中)。 您可以在自己的项目中创build自己的lib/modules/apostrophe-assets文件夹,以便与撇号npm模块中的文件夹保持一致。

这正如在推送资产教程中logging的那样 。

(如果您在推送CSS文件时遇到困难,请尝试使用.less扩展名进行重命名,并让我知道您必须这样做,但这应该是不必要的。

当然,也没有什么能够阻止你在自己的模板中outerLayoutBase.html中的任何块来插入脚本和链接标记,但是这不是必须的。 如果你按照练习,我build议你的文件将与生产中的其他一切缩小。

我已经使用了apostrophe-assets模块来推送CSS和JS文件的方法与@boutell提供的相同。 对于推送js文件没问题,但是对于css我得到了一个与bootstrap css相关的parsing错误。 所以这是因为撇号试图把它编译成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 %} 

在上面的文件中包含引导CSS的CDN,并按预期工作。 请注意这个新文件的pathlib文件夹位于根文件夹下,而不是node_modules