如何在sails 0.9中提供bootstrap模板？

Question

我想知道如何通过较新的sails版本提供引导程序模板.我应该将JS的链接更新为其他内容.我尝试在资产文件夹中移动js和图像,但javascript无法正常工作.sails文档在这个主题上很差.任何人都可以告诉一个简单的方法来集成它.提前致谢

Answer 1

Sails 0.9.x已经开始使用Grunt来处理资产.这允许您进行许多不同类型的预编译和资产处理.默认情况下,无法在视图和布局中自动注入资产.

我们添加了一个标志,您可以在生成新的sails项目时包含该标志,该项目将在您的assets文件夹中创建一个文件夹,并自动将任何文件注入index.html或layout文件中.这应该只用于开发.

sails new <project name> --linker

现在,您将linker在资源文件夹下有一个文件夹,您可以将文件放入其中以自动链接.它还会为您的index.html文件和布局文件添加一些标签,以了解注入各种JS,CSS和模板的位置.

你可以在这里阅读更多:Sails Wiki - 资产

如果您正在使用已创建的项目,则可以手动创建以下文件结构:

assets/
  linker/
    js/
    styles/
    templates/

您还需要在视图中添加以下标记:

<!--SCRIPTS-->
All .js files in assets/linker/js will be included here
In production mode, they will all be concatenated and minified
<!--SCRIPTS END-->

<!--STYLES-->
All .css files in assets/linker/styles (including automatically compile ones from LESS) will be included here
In production mode, they will all be concatenated and minified
<!--STYLES END-->

<!--TEMPLATES-->
All *.html files will be compiled as JST templates and included here.
<!--TEMPLATES END-->

因此,要使用引导程序并将文件自动添加到页面中,您将把bootstrap.js文件放入assets/linker/js并将bootstrap.css文件放入assets/linker/css.

在生产中,您需要编辑gruntfile以将所有css和js编译为单个文件,并在view/layout/index.html中手动链接它们.

Answer 2

glyphicon存在问题.缩小的css文件的目标是/.temp/public/min/production.css,字体必须在/.temp/public/fonts/中.然后,您必须将assets/linker/fonts /中的fonts文件夹复制到/.temp/public/fonts/.

您必须在copy.dev.files数组中的Gruntfile中添加它:

{
    expand: true,
    cwd: './assets/linker/fonts',
    src: ['**/*'],
    dest: '.tmp/public/fonts'
}

或者以更一般的方式:

{
    expand: true,
    cwd: './assets',
    src: ['**/fonts/*'],
    dest: '.tmp/public/fonts',
    flatten: true
}

它将搜索名为所有文件夹fonts下assets.使用flatten以避免子文件夹.

干杯,