Comment utiliser Pug avec CakePHP ?

王林
Libérer: 2023-06-03 17:12:01
original
1051 Les gens l'ont consulté

Avec le développement continu des applications Web, les frameworks modernes intègrent de plus en plus de fonctionnalités pour améliorer l'efficacité du développement et la qualité du code. CakePHP est un framework de développement Web populaire doté de composants tels que l'ORM, le routage et les vues, permettant aux développeurs de se concentrer davantage sur la mise en œuvre des fonctions métier.

La partie vue de CakePHP utilise PHP comme langage de modèle principal, ce qui permet aux développeurs d'utiliser facilement le code PHP pour créer des pages HTML. Cependant, les modèles PHP nécessitent souvent un grand nombre d’aspects frontaux d’éléments et de balises HTML, qui peuvent paraître trop verbeux dans certains cas. Pour résoudre ce problème, un moteur de modèles appelé Pug a été introduit dans CakePHP et a gagné une large reconnaissance auprès de plus en plus de développeurs.

Pug est un langage de modèle HTML simplifié qui ne nécessite pas la structure de balises ennuyeuse comme le HTML, mais utilise une méthode de type indentation pour déterminer la relation entre les éléments, ainsi que les attributs et le contenu d'éléments spécifiques. L'utilisation de Pug accélère l'écriture et la gestion des modèles et permet aux développeurs de se concentrer sur la conception et la logique métier plutôt que sur la structure des modèles. Utiliser Pug dans CakePHP est également très simple, explorons-le ensemble.

Installer Pug

Tout d'abord, nous devons nous assurer que Pug est installé dans l'application CakePHP. Le processus d'installation est le même que celui des autres packages Composer, vous pouvez utiliser la commande suivante :

composer require pug-php/pug composer require pug-php/pug

这将下载并安装最新版本的Pug以及其所有依赖项。

创建Pug视图

创建Pug视图和其他视图模板一样简单。在视图目录中创建一个新文件,并将其命名为your-view-file.pug。在文件中,你可以以缩进的方式编写HTML内容。以下是一个简单的例子:

html
  head
    title Welcome to My Site!
  body
    h1 My Site
    p This is my site.
Copier après la connexion

上面的代码将创建一个简单的HTML页面,其中包含一个标题(Welcome to My Site)和一个H1标题(My Site),还有一个P段落(This is my site.)。

继承布局

Pug允许你使用“继承布局”模板,这类似于其他现代模板引擎中的模板继承。这可以大大减少重复的HTML内容,并使代码更加易于维护。

要使用布局,首先需要在根目录下创建一个带有扩展名.pug的模板,其中包含一些公共布局元素。然后,在其他视图中使用“extends”选项来继承此模板。在视图中可以使用“block”来表示此视图覆盖该布局元素。以下是一个具有布局的简单示例。

/public/layouts/default.pug

html
  head
    title My Site
  body
    block content
Copier après la connexion

/views/pages/home.pug

extends ../layouts/default.pug

block content
  h1 Welcome to My Site
  p This is my site.
Copier après la connexion

这将创建一个名为“home”的视图,并在布局文件中设置的公共元素周围添加内容时,将内容放入到“内容”块中。

应用程序设置

在运行CakePHP应用程序时,默认情况下使用PHP作为视图模板引擎。在应用程序中启用Pug是相对简单的,只需要更改View类的实例化方法以使用Pug:

use JollymagicPugViewViewPugView;

// In your controller
public $viewClass = PugView::class;
Copier après la connexion

这将启用Pug,然后使用Pug模板渲染您的视图。现在,只需要将.pug文件存储在视图目录中,并在控制器中使用$this->render()函数渲染与视图对应的Pug文件即可。

$this->render('home');
Copier après la connexion

结论

在CakePHP应用程序中使用Pug视图引擎非常简单,只需要安装Pug并在应用程序设置中更改View

Cela téléchargera et installera la dernière version de Pug et toutes ses dépendances. . 🎜🎜Créer des vues Pug🎜🎜Créer des vues Pug est aussi simple que d'autres modèles de vue. Créez un nouveau fichier dans le répertoire des vues et nommez-le your-view-file.pug. Dans un fichier, vous pouvez écrire du contenu HTML de manière indentée. Voici un exemple simple : 🎜rrreee🎜Le code ci-dessus créera une simple page HTML avec un titre (Bienvenue sur mon site) et un titre H1 (Mon site), et un paragraphe P (Ceci est mon site.). 🎜🎜Mise en page héritée🎜🎜Pug vous permet d'utiliser des modèles de « mise en page héritée », qui sont similaires à l'héritage de modèles dans d'autres moteurs de modèles modernes. Cela peut réduire considérablement le contenu HTML en double et rendre le code plus maintenable. 🎜🎜Pour utiliser la mise en page, vous devez d'abord créer un modèle avec l'extension .pug dans le répertoire racine, qui contient certains éléments de mise en page courants. Ensuite, utilisez l'option « étend » dans d'autres vues pour hériter de ce modèle. Vous pouvez utiliser « block » dans une vue pour indiquer que cette vue couvre l'élément de mise en page. Vous trouverez ci-dessous un exemple simple avec une mise en page. 🎜🎜/public/layouts/default.pug🎜rrreee🎜/views/pages/home.pug🎜rrreee🎜Cela créera une vue appelée "accueil" et lors de l'ajout de contenu autour des éléments publics définis dans le fichier de mise en page, mettez le contenu dans le bloc "Contenu". 🎜🎜Paramètres de l'application🎜🎜Lors de l'exécution d'une application CakePHP, PHP est utilisé par défaut comme moteur de modèle de vue. L'activation de Pug dans votre application est relativement simple, il suffit de changer la méthode d'instanciation de la classe View pour utiliser Pug : 🎜rrreee🎜Cela activera Pug puis restituera votre vue à l'aide du modèle Pug. Maintenant, stockez simplement le fichier .pug dans le répertoire de la vue et utilisez la fonction $this->render() dans le contrôleur pour restituer le fichier Pug correspondant à la vue. C'est ça. 🎜rrreee🎜Conclusion🎜🎜Utiliser le moteur de visualisation Pug dans une application CakePHP est très simple, il suffit d'installer Pug et de changer la méthode d'instanciation de la classe View dans les paramètres de l'application. De plus, le langage de création de modèles Pug, qui représente les éléments HTML de manière indentée, réduit considérablement la verbosité des balises HTML, vous permettant ainsi de vous concentrer sur d'autres aspects importants de votre application. Profitez de Carlin ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal