GDS模板包

这是django-pattern-library模板包，用于GOV.UK设计系统。

快速入门

这是关于安装和使用的最小指南。

使用您选择的包管理器进行安装。例如，使用pip

pip install gds-template-pack

将其添加到已安装的应用程序，并添加到django-pattern-library设置中的一个部分

# settings.py

INSTALLED_APPS = [
    # ...
    "pattern_library",
    "gds_template_pack",
]

# django-pattern-library
PATTERN_LIBRARY = {
    "SECTIONS": (
        ("gds", ("gds",)),
        # ...
    ),
    # ...
}

使用方法

安装和配置后，您可以像使用任何Django应用程序一样引用各种模板。例如，要使用回链组件：{% include "gds/back-link/back-link.html" with link_url="https://example.com" link_text="Back" %})

开发

您需要安装Python 3.8或更高版本以及Poetry。

设置

使用Poetry安装Python依赖项

poetry install

默认情况下，这将创建一个位于./.venv/的虚拟环境并在其中安装依赖项。如果未发生此操作，请将您的设置与文档进行核对。

然后启动Django开发服务器，在http://localhost:8000/浏览模板包

poetry run dev_app/manage.py runserver 8000

前端开发

要设置前端开发环境，首先运行上面的命令以启动Django服务器。然后在另一个终端窗口中运行以下命令。

fnm use
npm install
npm run start

如果您尚未安装fnm，可以在macOS/Linux上使用brew install fnm进行安装。有关进一步的安装说明，请参阅fnm仓库，或者您也可以使用nvm use代替。

导航至http://localhost:3000以查看正在运行的项目。

运行npm run dev以告诉Webpack监视SCSS和JS更改，而不在浏览器中添加livereload。文件将自动重新编译，但您需要手动刷新您的网页才能看到更改生效。

GOV UK前端CSS、JS和资源

此存储库通过NPM安装GOV UK前端样式和JavaScript。在此存储库中添加了自定义组件的地方，它们的样式和JavaScript位于static-src目录中。

要单独将GOV UK NPM包添加到您的项目中，可以使用以下说明完成

• 安装govuk-frontend包：npm install govuk-frontend --save
• 遵循文档了解如何使CSS、JS、字体和图像生效

自定义组件

我们为该模式库中的一些组件添加了自定义样式和JavaScript，因为它们尚未得到GDS的官方支持。

GOV UK资源存储在根目录（在assets/下），因为Webpack在编译GOV UK节点模块SCSS时会查找它们。govuk.js是一个包含所有官方组件JavaScript的单独JS文件；它按照GOV入门建议的方式加载。

将任何新的SCSS或JS文件添加到dev_app/下的static-src/目录中。必须保持static文件夹在dev_app下，因为Django会在此处查找静态文件。静态文件加载仅适用于开发目的 - 此存储库不适合作为生产就绪站点的基座。