搜索markocupic / contao-collapsible-sidebar
为您的 Contao 网站添加可折叠侧边栏。
Requires
- php: ^8.0
- contao/core-bundle: ^4.13 || ^5.0
- markocupic/contao-twig-assets: ^1.0
Requires (Dev)
- contao/easy-coding-standard: ^3.0
- contao/manager-plugin: ^2.3.1
- contao/test-case: ^4.5
- phpunit/phpunit: ^9.3
- symfony/http-client: 5.4.*
- symfony/phpunit-bridge: ^5.4
README
Contao Collapsible Sidebar
此 Contao CMS 扩展提供可折叠侧边栏。
安装
通过 Contao Manager 或 composer require markocupic/contao-collapsible-sidebar。
配置
1. 创建前端模块
创建一个类型为 "可折叠侧边栏" 的新前端模块。不要忘记在专家设置中添加一个 CSS-ID。
2. 将模块添加到布局
将新创建的模块添加到您的布局中。
3. 定制 mod_collapsible_sidebar.html.twig 模板
使用 {{insert_module}} 或 {{insert_article}} 插入标签添加更多内容。然后将定制的模板保存到 templates/ 文件夹。
4. 向布局添加切换按钮
使用 TWIG 包含 或提供的 Contao 插入标签 将 "切换侧边栏" 按钮添加到您的布局中。
a) TWIG 包含
set css_id = 'myCollapsibleSidebar'
{% include '@Contao/collapsible_sidebar_toggle' with {'aria_controls': css_id} %}
{{collapsible_sidebar_toggle::##module_css_id##::##template_name##}}。将相关的 可折叠侧边栏前端模块 的 CSS-ID 作为第一个参数输入 => {{collapsible_sidebar_toggle::myCollapsibleSidebar}}。第二个参数 ##template_name## 是可选的。您可以使用它来创建自己的切换按钮模板。见 4c！
b) Contao 插入标签
{{collapsible_sidebar_toggle::myCollapsibleSidebar}}
c) 创建自定义切换按钮
复制 collapsible_sidebar_toggle.html.twig，修改内容并将文件保存到模板目录 templates/ 中的 templates/my_custom_collapsible_sidebar_toggle.html.twig。
TWIG:
set css_id = 'myCollapsibleSidebar'
{% include '@Contao/my_custom_collapsible_sidebar_toggle' with {'aria_controls': css_id} %}
Contao 插入标签:
{{collapsible_sidebar_toggle::myCollapsibleSidebar::my_custom_collapsible_sidebar_toggle}}
5. 使用自己的 CSS 来美化应用
此扩展附带一个非常简约的样式表。要覆盖默认的 CSS，只需从您定制的模块模板 /templates/mod_collapsible_sidebar.html.twig 的头部移除 {% do addCssResource('bundles/markocupiccontaocollapsiblesidebar/css/collapsible_sidebar.css') %} 并嵌入您自己的样式表。
6. 最后完成！
使用 composer install 或 Contao Manager 重建缓存。