Django Django-Bower + Foundation 5 + SASS, 如何配置

在本文中，我们将介绍如何在Django项目中配置Django-Bower、Foundation 5和SASS。

阅读更多：Django 教程

Django-Bower是什么？

Django-Bower是一个Django应用程序，允许开发者使用Bower管理静态文件。它简化了静态文件的安装和更新过程，使得开发者可以更轻松地使用第三方JavaScript和CSS库。

Foundation 5是什么？

Foundation是一个流行的响应式前端框架，提供了一系列的CSS和JavaScript组件，使得开发响应式网页变得更加容易。Foundation 5是Foundation项目的一个版本，在其它框架中也非常受欢迎。

SASS是什么？

SASS（Syntactically Awesome Stylesheets）是一种CSS预处理器，它扩展了CSS，提供了更多的功能和更易于开发的语法。

配置Django-Bower

首先，我们需要安装Django-Bower。在终端中运行以下命令：

pip install django-bower

然后，在你的Django项目中的settings.py文件中添加以下配置：

INSTALLED_APPS = (
    ...
    'djangobower',
    ...
)

BOWER_COMPONENTS_ROOT = os.path.join(BASE_DIR, 'components')

BOWER_INSTALLED_APPS = (
    'foundation#5.5.0',
    ...
)

在这个例子中，我们将Foundation 5.5.0作为一个示例添加到了BOWER_INSTALLED_APPS中。你可以根据自己的需求添加其他静态文件库。接下来，运行以下命令安装所需的静态文件：

python manage.py bower install

现在，你可以在模板文件中使用Foundation 5的样式和组件了。

配置Foundation 5

在你的Django项目中，你可以选择将Foundation 5的源文件放置在任何你想要的位置。你可以选择将文件放在一个单独的static目录中，或者将其放置在Django的静态文件目录中（通常是static文件夹）。

不管你选择哪种方式，建议将源文件放在一个名为foundation的文件夹中。这样做可以保持代码的整洁，并使得以后的维护更加方便。例如，你可以在static文件夹中创建一个foundation文件夹，并将所有的Foundation 5源文件放在其中。在你的模板文件中，你可以通过以下方式引入Foundation 5的样式和JavaScript文件：

<link rel="stylesheet" type="text/css" href="{% static 'foundation/css/foundation.min.css' %}">
<script src="{% static 'foundation/js/vendor/jquery.min.js' %}"></script>
<script src="{% static 'foundation/js/vendor/modernizr.js' %}"></script>
<script src="{% static 'foundation/js/foundation.min.js' %}"></script>

<script>
    $(document).foundation();
</script>

在这个例子中，引入了Foundation 5的样式表、jQuery、Modernizr和Foundation 5的JavaScript。这是一个基本的设置，你可以根据自己的需求修改。

配置SASS

如果你想使用SASS来定制Foundation 5的样式，你需要在你的Django项目中进行一些额外的配置。

首先，你需要安装django-sass-processor：

pip install django-sass-processor

然后，在你的settings.py文件中添加以下配置：

INSTALLED_APPS = (
    ...
    'sass_processor',
    ...
)

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder',
]

接下来，在你的静态文件目录（通常是static文件夹）创建一个名为sass的文件夹，并在其中创建一个名为_settings.scss的文件。你可以在其中定制Foundation 5的主题设置。例如，你可以更改颜色、字体等。在这里，你可以使用所有SASS的功能，如变量、混合等。

然后，将以下内容添加到你的静态文件目录中的foundation.scss文件中：

@import "settings";
@import "../../bower_components/foundation/scss/foundation";

在这个例子中，我们从sass文件夹中的_settings.scss文件中导入自定义的设置，然后导入Foundation 5的SCSS源文件。

现在，你可以运行命令来编译SASS文件并收集静态文件：

python manage.py collectstatic --settings=settings.production

最后，在你的模板文件中，使用以下代码引入样式和JavaScript文件：

{% load sass_tags %}
{% sass_src 'foundation.scss' %}
<link rel="stylesheet" type="text/css" href="{% sass_src_url 'foundation.scss' %}">
<script src="{% static 'foundation/js/vendor/jquery.min.js' %}"></script>
<script src="{% static 'foundation/js/vendor/modernizr.js' %}"></script>
<script src="{% static 'foundation/js/foundation.min.js' %}"></script>

<script>
    $(document).foundation();
</script>

在这个例子中，我们使用sass_src模板标签来编译并生成CSS文件，并将其引入到模板文件中。