Maison > Article > développement back-end > Création d'un thème PyroCMS : un guide étape par étape
Création d'un thème PyroCMS : un guide étape par étape
- WBOYoriginal
- 2023-09-04 10:49:06837parcourir
Comme la plupart des systèmes de gestion de contenu, PyroCMS utilise des thèmes frontaux. Bien que les thèmes PyroCMS soient construits légèrement différemment des thèmes d'autres systèmes auxquels vous êtes peut-être habitué, ils restent faciles à créer. En fait, ils sont si simples que très peu d’expérience PHP est nécessaire pour les assembler !
Structure des dossiers
Les thèmes PyroCMS sont constitués de HTML, d'images, de CSS et de JavaScript disposés dans les dossiers pris en charge suivants :
- CSS
- Photos
- js
- Vues
- Affichage/Mise en page
- Affichage/Partie du contenu
- Vue/Module
Bien que ces dossiers vous semblent sans aucun doute familiers, le dossier « views » est le plus logique dans un contexte MVC. Lorsque vous créez un thème pour PyroCMS, vous créez en réalité les vues (y compris les ressources) d'une application de modèle MVC. Ces vues se composent d'un fichier de mise en page principal et de plusieurs fichiers partiels (c'est-à-dire header.html 或 footer.html) qui partagent la logique de présentation entre différentes mises en page. Nous en discuterons sous peu.
Commencer
Pour commencer à créer votre premier thème PyroCMS, créez une structure de dossiers prise en charge dans l'un des deux emplacements où votre thème peut résider dans votre instance PyroCMS :
addons/shared_addons/themes (for themes available to all sites)
ou :
addons/[site-name]/themes (for themes available to only one specific site)
Après avoir créé un dossier de thème de base avec une structure de dossiers prise en charge, le premier fichier que vous souhaitez ajouter à votre thème est theme.php.
addons/shared_addons/themes/[my-theme-name]/theme.php
Ce theme.php 文件包含主题的所有重要详细信息，包括其名称、作者、版本等。在某种程度上，此文件类似于 WordPress 主题的 style.css 文件。以下是 PyroCMS 主题的 theme.php fichier contient tous les détails importants du thème dont son nom, son auteur, sa version, etc. D'une certaine manière, ce fichier est similaire au fichier style.css d'un thème WordPress. Voici un exemple basique de fichier
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Theme_Foo extends Theme
{
public $name = 'Foo';
public $author = 'Zac Vineyard';
public $author_website = 'https://zacvineyard.com';
public $website = 'http://example.com/themes/foo';
public $description = 'The antithesis theme to your Bar theme.';
public $version = '1.0';
}
/* End of file theme.php */
Theme。另外，由于您在此文件中声明 PHP 类，因此您需要确保在类声明中使用包含主题的文件夹的名称。因此，如果包含主题的文件夹名为“foo”，则在 theme.php 中创建的类应命名为 Theme_Foo （而不是 Theme_CustomVeuillez noter que ce fichier étend une classe PyroCMS nommée Theme. De plus, puisque vous déclarez vos classes PHP dans ce fichier, vous devez vous assurer d'utiliser le nom du dossier contenant votre thème dans la déclaration de classe. Ainsi, si le dossier contenant le thème s'appelle "foo", la classe créée dans doit s'appeler Theme_Foo (au lieu de Theme_Custom, comme dans l'exemple de la documentation PyroCMS illustré).
theme.phpAprès avoir créé le fichier
Mise en page
Tous les fichiers de mise en page d'un thème PyroCMS existent dans l'un des deux emplacements suivants :
addons/[site-ref]/themes/[my-theme-name]/views/layouts/ou :
addons/shared_addons/themes/[my-theme-name]/views/layouts/Chaque thème doit avoir un fichier de mise en page nommé "default.html" situé dans l'un des emplacements répertoriés ci-dessus. Les fichiers de mise en page supplémentaires sont facultatifs ; je vous montrerai comment ajouter d'autres fichiers de mise en page plus tard. Tout d’abord, il est important de vérifier le contenu du fichier de mise en page.
Les fichiers de mise en page dans PyroCMS sont construits à l'aide de HTML et d'un analyseur de balises (appelé analyseur de balises Lex). Voici à quoi ressemble un fichier de mise en page PyroCMS très basique :
<!DOCTYPE html>
<html>
<head>
<title>{{ template:title }}</title>
{{ template:metadata }}
</head>
<body>
<h1>{{ template:title }}</h1>
{{ template:body }}
</body>
</html>
La balise spéciale que vous voyez dans ce code HTML est la balise de l'analyseur Lex. Si vous avez déjà utilisé des modèles Smarty en PHP, ces modèles peuvent vous sembler quelque peu familiers. Le principal avantage de l'utilisation des balises de l'analyseur Lex dans les fichiers de mise en page est que vous n'avez pas besoin de mettre PHP directement dans la vue (rappelez-vous, nous utilisons MVC), ce qui vous donne la possibilité de créer des modèles qui suivent Ne répétez pas Vous-même. Bien sûr, l'exemple que j'ai donné ci-dessus est simple, mais les balises de l'analyseur Lex sont très puissantes. Ils peuvent parcourir les données, manipuler les propriétés, etc. Apprenez-en plus sur l'analyseur Lex dans la documentation PyroCMS.
Un fichier de mise en page PyroCMS plus complexe ressemble à ceci :
<!DOCTYPE html>
<html>
<head>
<title>{{ template:title }}</title>
{{ template:metadata }}
{{ theme:favicon file="favicon.png" }}
{{ theme:css file="style.css" }}
{{ theme:js file="site.js" }}
</head>
<body>
<div class="header">
<div class="logo">
{{ theme:image file="logo.jpg" alt="Your Cool Logo" }}
</div>
<div class="nav">
{{ navigation:links group="header" }}
</div>
</div>
<div class="content">
<h1>{{ template:title }}</h1>
{{ template:body }}
</div>
</body>
</html>
Vous remarquerez que ce fichier de mise en page utilisant Lex contient des ressources telles que CSS, JavaScript et des images. L'utilisation des balises Lex et HTML permet aux développeurs PyroCMS de créer des fichiers de mise en page très rapidement. Une partie du contenu
Partials dans PyroCMS signifie Partial Layout et vous permet de diviser votre mise en page en parties ou sections réutilisables. Ces sections peuvent ensuite être chargées via différents fichiers de mise en page. Cela vous évite de saisir le même code (en-tête, pied de page, etc.) dans plusieurs fichiers de mise en page.
En fonction de l'endroit où vous placez vos fichiers de thème, certains contenus seront créés dans l'un des deux emplacements suivants :
addons/[site-ref]/themes/[my-theme-name]/views/partials/ou :
addons/shared_addons/themes/[my-theme-name]/views/partials/Utilisez cette balise Lex pour charger du contenu dans la mise en page :
{{ theme:partial name="partialname" }}
includeCette balise Lex fonctionne exactement comme une instruction PHP - similaire à ce que vous trouverez dans WordPress ou d'autres thèmes. Le code ci-dessous est un exemple simple d'une mise en page PyroCMS partielle.
{{ theme:partial name="header" }}
<div class="content">
<h1>{{ template:title }}</h1>
{{ template:body }}
</div>
{{ theme:partial name="footer" }}
header.html 部分和 footer.html Le contenu du fichier est bien sûr le HTML que nous devons réutiliser à partir du modèle dans l'exemple de code ci-dessus. Un petit conseil : il n'y a pas de limite au nombre de sections que vous pouvez utiliser dans une mise en page. De plus, certains fichiers peuvent contenir n'importe quelle combinaison de HTML et Lex valides. 🎜
多个布局文件
要向 PyroCMS 实例添加另一个布局，请在主题的 views/layouts/ 目录中再创建一个布局文件。该文件可以使用任何名称，但最好尽可能具有描述性地命名 - 例如 about.html。
为了增加灵活性，您可以使用任意数量的布局文件。当您在 PyroCMS 控制面板（控制面板→页面→页面类型）中编辑或创建页面类型并从下拉列表中选择所需文件时，您的所有布局主题的布局文件将可供使用。
移动布局
PyroCMS 能够轻松显示移动设备和桌面设备的单独布局。要使用此功能，请将布局文件移动到 views 文件夹中名为“web”的文件夹中，以便您的默认布局位于此处：
[your-theme]/views/web/layouts/default.html
当用户使用桌面浏览器访问您的网站时，将使用此位置的主要布局文件。如果用户使用移动设备浏览器访问您的网站，则会向用户提供您在此位置创建的移动布局：
[your-theme]/views/mobile/layouts/default.html
此功能适用于多个布局文件。
请注意 PyroCMS 文档中的警告：“PyroCMS 不认为 iPad 是移动设备，因此如果用户使用 iPad 访问您的网站，它不会加载您的移动布局。”但是，如果在您的网站上，您希望将 iPad 识别为移动设备，则可以更改 config/ 目录中的“user_agent.php”文件，以使 iPad 识别为移动设备。移动设备。
完成！
使用本文作为指南，您可以看到在 PyroCMS 中创建主题是多么容易。提供的代码示例非常简单，因此我鼓励您探索 PyroCMS 文档，以便对 PyroCMS 中的布局、移动布局、部分和 Lex 解析器有更丰富的经验。玩得开心！
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!