a-proud/twiew-bundle

提供基于 twig 的简单而强大的模板

安装: 3

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

类型:symfony-bundle

dev-main 2023-03-10 21:41 UTC

This package is auto-updated.

Last update: 2024-09-11 01:11:04 UTC


README

提供基于 twig 的简单而强大的模板。AProud\TwiewBundle 设计用于通过 PHP 数组或 YAML 文件中定义的设置渲染 HTML 页面。它允许您使用各种设置配置您的页面,例如 CSS、JavaScript、头部、主要内容、页脚等。您还可以添加自定义参数并在模板中使用它们。

安装

要安装 twiew-bundle,将以下行添加到您的 composer.json 文件中

"a-proud/twiew-bundle": "dev-main"

然后,运行以下命令安装该捆绑包

composer install

配置

首先,我们需要告诉 twig twiew 模板的位置。将 twiew 的路径添加到 config/packages/twig.yaml

twig:
    paths:
        "%kernel.project_dir%/vendor/a-proud/twiew-bundle/templates": twiew

AProud/Twiew bundle 需要以下必填参数

  • default
  • css
  • js_top
  • header
  • main
  • footer
  • js_bottom

您还可以添加任何自定义参数并在模板中使用它们。

使用

A-Proud/Twiew bundle 创建了一个结构化成三个主要部分(头部、主体和页脚)的 HTML 页面。您可以在每个部分中添加多个块。每个块必须有一个布局,定义它有多少列以及它们在块中的排列方式。

每个块被划分为组件,每个组件都需要一个模板(tpl)以及它需要在块中放置的自由空间数量。

以下是一个示例 PHP 代码,展示了如何使用 A-Proud/Twiew bundle

//src/Controller/MainController.php
	namespace App\Controller;

	use Symfony\Component\HttpFoundation\Response;
	use Symfony\Component\HttpFoundation\Request;
	use Symfony\Component\Routing\Annotation\Route;
	use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
	use AProud\TwiewBundle\Twiew;

	class MainController extends AbstractController
	{
		
		function __construct(Twiew $twiew)
		{
			$this->view = $twiew;
			$this->view->tplSchema('', [
				'app_main_index' => [ //app_main_index key is generated by routing for this page 
					'js_top' => [
						'jquery' => [
							'weight' => 5, //scripts with smaller weight will be positioned higher on the page
							'src' => './assets/jquery/dist/jquery.min.js'
						],
						'bootstrap_bundle' => [ //you can set the key for comfortable navigation
							'weight': 10,
							'src': './assets/bootstrap/dist/js/bootstrap.bundle.min.js'
						],
					],
					'js_bottom' => [
						//also works without keys
						['weight' => 5, 'src' => './assets/js/custom_script.js'],
						['weight' => 10, 'src' => './assets/js/another_custom_script.js'],
					],
					'sections' => [
						'main' => [
							[
								'layout' => '@twiew/layouts/two_columns_center.html.twig',
								'components' => [
									[
										'tpl' => 'app_main/components/heading.html.twig',
										'block' => '1',
									],
									[
										'tpl' => 'app_main/components/slider.html.twig',
										'block' => '2',
									],
								]
							],
							[
								'layout' => '@twiew/layouts/one_column_center.html.twig',
								'components' => [
									[
										'tpl' => 'app_main/components/image_gallery.html.twig',
										'block' => '1',
									],
								]
							],
						]
					],
				],
				'app_main_login' => [
					'sections' => [
						'main' => [
							[
								'layout' => '@twiew/layouts/one_column_center.html.twig',
								'class' => 'vh-100 login-col', //pass the twig variables to layout
								'components' => [
									[
										'tpl' => 'app_main/components/login_form.html.twig',
										'block' => '1',
										'my_component_variable' => 'some value',
									],
								]
							],
						],
					],
				],
			]);
		}
		
		/**
		 *  App index page
		 *  @Route("/")
		 *  @return Response
		 */
		public function index(): Response
		{
			return $this->view->render(); //only one string to render the whole page with setted structure
		}
		
		/**
		 *  Login page
		 *  @Route("/login")
		 *  @return Response
		 */
		public function login(): Response
		{
			//you can get the values in your controller
			$mainSectionClass = $this->view->tplSchema('app_main_login.sections.main.class');
			
			//and replace them if needed
			$this->view->tplSchema('app_main_login.sections.main.class', $mainSectionClass.' bg-gray');
			return $this->view->render();
		}

	}

太好了!您在同一个地方定义了视图结构,您可以在控制器中覆盖此结构。但它看起来有点庞大。另外,将视图内容存储在控制器中不是一个好主意。因此,让我们将此架构移到另一个地方,并让控制器做它自己的事情。

将 tpl 架构存储在 YAML 中

//src/Controller/MainController.php

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use AProud\TwiewBundle\Twiew;

class MainController extends AbstractController
{

    function __construct(Twiew $twiew)
    {
	    $this->view = $twiew;
	    $this->view->tplSchemaFromYaml('', 'config/app_main.yaml');
    }

  /**
   *  App index page
   *  @Route("/")
   *  @return Response
   */
  public function index(): Response
  {
	    return $this->view->render();
  }

    /**
     *  Login page
     *  @Route("/login")
     *  @return Response
     */
    public function login(): Response
    {
	    return $this->view->render();
    }

}

许可证

A-Proud/Twiew bundle 在 MIT 许可证下发布。