Home >PHP Framework >ThinkPHP >ThinkPHP6 template engine usage guide: Create an exquisite front-end interface

ThinkPHP6 template engine usage guide: Create an exquisite front-end interface

PHPzOriginal: 2023-08-26 23:09:231245browse

Introduction:
With the development of Web applications, the design and development of front-end interfaces have become increasingly important. As a developer, we need to use a powerful template engine to help us create and manage front-end interfaces. ThinkPHP6's template engine is a powerful tool to meet this need. This article will introduce how to use the ThinkPHP6 template engine to create a beautiful front-end interface.

Part 1: Install the ThinkPHP6 template engine

Using the ThinkPHP6 template engine is very simple. You only need to execute the following command in the directory where the project is located to install:

composer require topthink/think-template

Installation completed Finally, find the view.php file in the config directory and change the value of engine to thinkTemplateEngine.

Part 2: Creation and Management of Template Files

Creating Template Files
Create a file named after the controller in the view directory of the project folder, such as index. Create a template file named after the action method in this folder, for example index.html. This template file will be used to render the corresponding operation method in the controller.
Basic structure of template files
Each template file should contain the following structure:

{__NOLAYOUT__}  // 如果不需要布局, 可以在渲染模板的时候使用这个替代
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="样式文件的链接">
    <script src="脚本文件的链接"></script>
</head>
<body>
    <header>头部内容</header>
    
    <!-- 主体内容 -->
    {block name="content"}这里是主体内容{/block}

    <footer>底部内容</footer>
</body>
</html>

In the above code, {block} is used To define labels for replaceable code blocks, you can use the assign method in the controller to replace them.

Part 3: Use of template variables and labels

Assignment of template variables
In the controller, we can use the assign method to assign The data is passed to the template file. For example:

$this->assign('name', 'ThinkPHP');
$this->assign('age', 6);

In the template file, use {$name} and {$age} to access these variables.

Process control statements
ThinkPHP6's template engine supports common process control statements, such as if, foreach, etc.

{if $name == 'ThinkPHP'}
    <h1>{$name}</h1>
{elseif $name == 'PHP'}
    <h2>{$name}</h2>
{else}
    <h3>{$name}</h3>
{/if}

<ul>
    {foreach $array as $item}
        <li>{$item}</li>
    {/foreach}
</ul>

Template inheritance and rewriting
In the template basic structure code mentioned earlier, we use {block} to define replaceable code blocks . In child templates, we can use {block} to override these code blocks.

{extend name="index/layout"}  // 继承父模板

{block name="content"}  // 重写content代码块
    <div>这是子模板中的内容</div>
{/block}

In the above code, the child template inherits the parent template index/layout and rewrites the content code block in the parent template.

Conclusion:
Using the template engine of ThinkPHP6 can help us create and manage the front-end interface more conveniently. This article briefly introduces how to install the template engine of ThinkPHP6, and explains in detail the creation and management of template files, as well as the use of template variables and tags. By flexibly using the features of the template engine, we can easily implement a beautiful front-end interface. I hope this article can be helpful to you when using the template engine of ThinkPHP6!

The above is the detailed content of ThinkPHP6 template engine usage guide: Create an exquisite front-end interface. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：ThinkPHP6 integrated development environment construction guide: one-click installation and configurationNext article：ThinkPHP6 integrated development environment construction guide: one-click installation and configuration

See more

ThinkPHP6 template engine usage guide: Create an exquisite front-end interface

Related articles