Django 应用程序添加 Bulma CSS 框架及其扩展
项目描述
django-simple-bulma
django-simple-bulma是一个 Django 应用程序，它使Bulma
和Bulma-Extensions可以在您的 Django 项目中使用，并且设置尽可能少。这个项目的目标是尽可能简单地将 Bulma 与 Django 一起使用。
该项目目前使用Bulma v0.9.2，并随着每个新版本自动更新。如果新版本出现了您想要使用的功能，请创建一个问题，我们很乐意发布更新它。
安装
要让django-simple-bulma您的 Django 项目启动并运行，请按照以下简单步骤操作：
-
从 PyPI 安装它
pip install django-simple-bulma（或将其添加到您的Pipfile） -
在您的 Django 项目
settings.py文件中：- 添加
django_simple_bulma到您的INSTALLED_APPSINSTALLED_APPS = [ # ... 'django_simple_bulma', # ... ]
- 添加
django_simple_bulma.finders.SimpleBulmaFinder到您的STATICFILES_FINDERS. 这通常包含两个您可能想要保留的默认处理程序，因此除非您有任何其他自定义查找器，否则它应该如下所示：STATICFILES_FINDERS = [ # First add the two default Finders, since this will overwrite the default. 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', # Now add our custom SimpleBulma one. 'django_simple_bulma.finders.SimpleBulmaFinder', ]
- 添加
-
运行
python manage.py collectstatic命令以构建 Bulma 并将其移动到您的staticfiles文件夹。请注意，每次更改配置时都需要使用此命令，因为这是重建 Bulma css 文件的唯一方法。如果您不使用collectstatic，请阅读 并开始使用它。这个应用程序可以很好地与Whitenoise配合使用，这是提供静态文件的好方法，而无需弄乱您的网络服务器。
django-simple-bulma现在应该可以工作了！为了将其导入您的模板，首先使用 加载应用程序{% load django_simple_bulma %}，然后使用{% bulma %}模板标签。如果您打算使用图标，您可能还想通过使用导入 FontAwesome {% font_awesome %}。
<head>
<!-- ... -->
{% load django_simple_bulma %}
{% bulma %}
{% font_awesome %}
<!-- ... -->
</head>
- 你都准备好了！您申请的任何布尔玛课程现在应该可以工作了！
定制
Bulma 默认看起来不错，但大多数用户都希望自定义它的外观和感觉。为此，我们提供了一种超级简单的方法来更改Bulma 变量并选择要加载到项目中的Bulma 扩展。
为了做到这一点，我们将简单地在你的settings.py被调用中创建一个字典BULMA_SETTINGS，并在那里配置它。这是一个看起来像的例子：
# Custom settings for django-simple-bulma
BULMA_SETTINGS = {
"extensions": [
"bulma-collapsible",
"bulma-calendar",
],
"variables": {
"primary": "#000000",
"size-1": "6rem",
},
"alt_variables": {
"primary": "#fff",
"scheme-main": "#000",
},
"output_style": "compressed",
"fontawesome_token": "e761a01be3",
}
您可以在此处定义在Bulma 变量
页面上找到的任何变量，并且可以使用任何有效的 SASS 或 CSS 作为值。例如，hsl(217, 71%, 53%)将是颜色变量的有效值，如#ffff00. 请注意，任何语法错误的值都可能会阻止 Bulma 正确构建，因此请小心您在此处添加的内容，除非您确切知道自己在做什么。
多个主题
如果您想要多个不同的变量配置，那么您应该将它们定义为单独的主题。通过提供与正则表达式匹配的键\w+_variables（例如alt_variablesor dark_variables）来定义新主题，然后将使用该键处的变量生成唯一样式表。
{% bulma %}要在模板中使用这些样式表，请将主题名称作为字符串{% bulma 'alt' %}或模板变量传递给标记{% bulma theme %}。
扩展
如果extensions未找到密钥，则默认不加载任何扩展。如果您想要所有扩展名，只需将其设置为 string "all"。
我们目前支持这些扩展：
- bulma 徽章
- bulma 日历
- 布尔玛旋转木马
- bulma-可折叠
- bulma-checkradio
- 布尔玛分频器
- 布尔马梅加努
- bulma-pageloader
- bulma-定价表
- bulma-quickview
- 布尔玛丝带
- bulma滑块
- 布尔玛台阶
- bulma-switch
- bulma-tags输入
- bulma时间线
- bulma 工具提示
- bulma-coolcheckboxes (Cool-Checkboxes-for-Bulma.io)
如果缺少您要使用的扩展程序，请随时创建问题，我们很乐意添加它。或者，您自己添加它并创建一个拉取请求（有关如何执行此操作的一些上下文，请参阅此公关）。
CSS 样式
该output_style参数确定生成的 CSS 文件的样式。它可以是"nested"（默认）、、、"expanded"和"compact"中的任何一个"compressed"。建议"compressed"在生产中使用以减小最终文件大小。
字体真棒
可选fontawesome_token参数允许您指定您的个人 FontAwesome 套件，这是 FontAwesome v6 及更高版本所必需的。这应该设置为您的 FontAwesome 套件脚本 src 参数的标识符部分。例如，如果您的 FontAwesome 套件如下所示：
<script src="https://kit.fontawesome.com/e761a01be3.js" crossorigin="anonymous"></script>
那么你fontawesome_token应该是e761a01be3。
模板标签使用它{% font_awesome %}来为您设置 FontAwesome。如果您不指定 a fontawesome_token，则模板标签仍然有效，但随后将使用旧版本的 FontAwesome (v5.14.0) 。
附加脚本
为了您的方便，我们还为您提供了在您的 Bulma 应用程序中添加其他生活质量改进的选项。如果它们听起来对您有用，您可能还想添加它们。
bulma-fileupload将处理在文件上传输入中显示文件名。bulma-navbar-burger将自动连接您navbar-burger的 s 和navbar-menus，为移动用户提供切换。我们使用Bulma 文档中示例的略微更新版本- 只需data-target向您添加一个属性，该属性navbar-burger引用应该通过按钮展开和折叠的 。idnavbar-menubulma-notifications将允许您 通过单击 X 按钮来关闭通知。bulma-dropdownis-active将使用该类打开/关闭下拉菜单。它模仿文档页面上的下拉菜单的功能。bulma-modal将处理打开和关闭模式。只需将modal-button类分配给 a<button>，并确保它具有与您要打开的模式data-target匹配的属性。有关模态元素代码，id请参阅Bulma 文档中的示例代码。
编译自定义 SCSS
如果您正在为您的应用程序编写自定义 SCSS，请django-simple-bulma提供一种为您编译它的机制。提供这主要是因为django-simple-bulma可能会导致与为您编译 SCSS 的其他工具发生冲突和问题。
要使用此功能，请custom_css在定义您的BULMA_SETTINGS. 这应该是一个字符串列表，包含要编译的文件的相对路径。.scss
BULMA_SETTINGS = {
"custom_scss": [
"css/base/base.scss", # This is okay
"my_app/static/css/base/base.scss", # This also is okay
"C:\Users\MainDawg\my_app\static\..." # Don't do this, though.
],
}
收集静态文件时的默认 Django 行为是在将它们复制到最终的 staticfiles 目录时保留它们的包含文件结构。我们做同样的事情，因此所有目录和子目录在收集后仍将完好无损地保存在您的 staticfiles 文件夹中。
这是查找器使用的策略：
- 如果您的路径包含
static/，则假设基本路径在那里结束，并将路径的其余部分用作资源的相对路径。 - 使用您在其中启用的任何
settings.py查找器来使用该相对路径搜索文件。 - 如果使用这些查找器之一找到路径，请将其编译为 css 并收集它。
- 否则，提出
ValueException要求您仔细检查文件路径。
故障排除
- 如果您安装了该模块
sass，请注意它与该项目不兼容。之间存在命名空间冲突，sass当libsass您django-simple-bulma尝试执行collectstatic. 要解决此问题，只需卸载sass并libsass改用即可。
如果您在使用此应用时遇到任何其他问题，请创建问题，我将很乐意为您提供帮助。你也可以在 Discord 上找到我lemon#0001——无论是在lemonsaurus discord 中的 #django-simple-bulma还是在https://discord.gg/python。
下载文件
下载适用于您平台的文件。如果您不确定要选择哪个，请了解有关安装包的更多信息。