Création d'un thème PyroCMS : un guide étape par étape-tutoriel php-php.cn

Création d'un thème PyroCMS : un guide étape par étape

WBOY

Libérer： 2023-09-04 10:50:02

original

876 Les gens l'ont consulté

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)

Copier après la connexion

ou :

addons/[site-name]/themes (for themes available to only one specific site)

Copier après la connexion

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

Copier après la connexion

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

pour un thème PyroCMS :

<?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 */

Copier après la connexion

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

, vous pouvez vous connecter au panneau de contrôle PyroCMS et afficher les thèmes répertoriés dans le module Thèmes.

创建 PyroCMS 主题：分步指南

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/

Copier après la connexion

ou :

addons/shared_addons/themes/[my-theme-name]/views/layouts/

Copier après la connexion

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>

Copier après la connexion

< 的 PyroCMS 主题的最佳机会em>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>

Copier après la connexion

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/

Copier après la connexion

ou :

addons/shared_addons/themes/[my-theme-name]/views/partials/

Copier après la connexion

Utilisez cette balise Lex pour charger du contenu dans la mise en page :

{{ theme:partial name="partialname" }}

Copier après la connexion

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" }}

Copier après la connexion

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 主题：分步指南

移动布局

PyroCMS 能够轻松显示移动设备和桌面设备的单独布局。要使用此功能，请将布局文件移动到 views 文件夹中名为“web”的文件夹中，以便您的默认布局位于此处：

[your-theme]/views/web/layouts/default.html

Copier après la connexion

当用户使用桌面浏览器访问您的网站时，将使用此位置的主要布局文件。如果用户使用移动设备浏览器访问您的网站，则会向用户提供您在此位置创建的移动布局：

[your-theme]/views/mobile/layouts/default.html

Copier après la connexion

此功能适用于多个布局文件。

请注意 PyroCMS 文档中的警告：“PyroCMS 不认为 iPad 是移动设备，因此如果用户使用 iPad 访问您的网站，它不会加载您的移动布局。”但是，如果在您的网站上，您希望将 iPad 识别为移动设备，则可以更改 config/ 目录中的“user_agent.php”文件，以使 iPad 识别为移动设备。移动设备。