2017-01-15 10 views
1

bootstrap.min.cssファイルと対応するbootstrap.min.jsファイルをApostrophe CMSプロジェクトに単に追加しようとしています。静的リソースを単純に追加する方法はわかりません。私のアプリには次のものがあります。アポストロフィCMSにブートストラップとロゴpngを追加する

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

でも、何もしません。私も.minバージョンを削除して、それらを試してみました。

私のナビバーで使用される.pngにリンクする必要がありますが、ウェブサイトの静的リソースをどこに保存するかはわかりません。

私はちょうど私がapostrophe-assetsとしてプッシュしたくない静的ファイルをドロップすることができるので、レンダリングされて正しく消費される場所はありますか?

答えて

2

私はP'unk AvenueのApostropheの主任開発者です。これが機能するために

、アポストロフィは、ファイルがに位置する必要がありますプロジェクトが(にそれらをコピーしないでください

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

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

そして、 node_modules)。独自のプロジェクト内に独自のlib/modules/apostrophe-assetsフォルダを作成して、アポストロフィnpmモジュール内のフォルダと平行にします。

これはas documented here in the tutorials on pushing assetsです。もちろん

(あなたがトラブルCSSファイルをプッシュしている場合は、.less拡張子で名前を変更してみてください、私はあなたがそれをしなければならなかった知っている。それはしかし、不要であるべき。)

何も保管もありますあなた自身のテンプレートにouterLayoutBase.htmlのブロックのどれかを上書きしてスクリプトやリンクタグを挿入する必要はありませんが、それは必要ではありません。練習に従えば、あなたのファイルは生産中の他のすべてと一緒に縮小されることをお勧めします。

+0

これを試してみます。クイックメモ、[this](http://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html)の記事に誤字があるようです。アセットモジュールにスクリプトを追加すると、lib/modules/apostrophe-assets/public/js/siteの代わりに 'lib/modules/apostrophe-assets/public/css/site.js'が検索されます。 js'とそのコードスニペットのコメントはlessとcssを参照してください。 – Carson

+0

私はこれを基本的な 'bootstrap.css'で試しました。私はブートストラップファイルを自分のサイトに含めるには' bootstrap.less'という名前を付けなければなりませんでした。私が何をしたとしても、 'bootstrap.min.css'や' bootstrap.min.less'はインクルードできませんでした。私はminファイルを使用しようとすると解析エラーが出ます。 – Carson

+0

別の質問ですが、 'apostrophe-assets'モジュールにイメージファイルを含めることはできますか? – Carson

0

私はapostrophe-assetsモジュールを使用して、cssとjsファイルを@boutellと同じ方法でプッシュしました。 jsファイルをプッシュするにはOKですが、cssの場合は、ブートストラップCSSに関連する解析エラーが発生しました。だから、アポストロフィはすでにCSSであるのに対し、アポストロフィはそれをCSSにコンパイルしようとするからです。

outerLayot.html Nunjucksテンプレートを上書きしました。だから、基本的にファイル node_modules/lib/modules/apostrohpe-templates/views/outerLayout.htmlで、我々は持っている:

自体が、私は {% block extraHead %}{% endblock %}ブロックを使用して新しいファイルにそれをオーバーライドしている。ここ 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> 

を拡張

{% extends "outerLayoutBase.html" %} 

を: /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ではなくルートフォルダの下にあります。

関連する問題