Migration de modèles statiques dans votre thème

Dans ce tutoriel, nous allons migrer un site statique dans votre projet SilverStripe. HTML, CSS et JavaScript fourniront une base commune intéressante et un point de départ pour se familiariser avec les modèles de conception du cadre. En outre, les conceptions sont généralement livrées aux développeurs sous la forme d'un site statique, en particulier si le thème a été acheté auprès d'un fournisseur tiers.

Déposer vos sacs

Vous savez ce sentiment que vous ressentez lorsque vous voyagez toute la journée et que vous finissez par forcer la porte de votre chambre d’hôtel? Vous déposez vos bagages dans le premier espace vacant que vous pouvez trouver, suspendant votre obligation imminente de décompresser et de vous organiser, et vous offrant ce moment de détente.

Lors de la migration d’un site statique vers SilverStripe, il est souvent utile de suivre le même schéma. Dans cette section, nous allons déposer tous nos éléments HTML et autres éléments statiques dans leur propre répertoire, de sorte qu’ils puissent être consultés par notre serveur Web et intégrés à notre projet, même en tant qu’étrangers mal assimilés. Bien sûr, nous avons encore beaucoup de “déballage” à faire, mais vous vous sentirez mieux en sachant que tout est là où il est censé être, sous un même toit.

Créons un répertoire appelé static/dans notre racine Web publique. Encore une fois, cette étiquette dépend entièrement de vous. Si vous avez plus de sens, utilisez quelque chose comme html/, ou raw/n’hésitez pas à invoquer cette option.

Votre structure de dossier devrait maintenant ressembler à ceci:

 

app/
  _config/
  src/ 
  templates/
    Includes/
    Layout/

public/
  css/
  images/
  javascript/
  static/

 

Désormais, nous allons simplement importer tout le contenu de notre site statique (one-ring-rentals-static.zip) dans le static/dossier, en préservant la structure du fichier. Comme nous avons utilisé des chemins d’accès relatifs pour tous les actifs, l’intégration du site dans la structure de répertoires ne casse rien.

Faisons le test. Naviguez dans votre navigateur pour /static/default.htmldésactiver le nom d’hôte que vous utilisez (par exemple,                          http: //myproject.local/ ) et vous devriez voir notre page d’accueil. Essayez la même chose pour home.html.

SS-izing

Maintenant que nous avons déposé nos sacs et que nous nous sommes récompensés en jetant un coup d’œil rapide sur notre site, il est temps de commencer à découper notre site statique en modèles SilverStripe.

Copier et corriger

Nous allons commencer avec default.html. Cette maquette est destinée à représenter les types de page les plus élémentaires de notre site. Comme indiqué précédemment, SilverStripe utilise classiquement le Page.ssmodèle pour ce cas. Copiez le contenu de default.htmldans votre templates/Page.ssfichier, qui contient actuellement notre preuve de concept “Hello, world”, et rechargez votre site sur l’URL de base (par exemple, http: // {votre nom d’hôte}).

Regarde bien? Non, ça ne devrait pas. Cela devrait ressembler à un gâchis sans style. Copions tous les actifs statiques dans notre projet. Faites les copies suivantes:

 

DeÀ
public / statique / csspublic / css
public / statique / jspublic / javascript
public / statique / imagespublic / images
public / static / fontspublic / fonts

 

Bien que le site paraisse mieux, un coup d’œil rapide sur l’inspecteur Web nous montre qu’il reste encore beaucoup de fichiers 404, principalement pour nos fichiers Javascript. Mettons à jour toutes les <script>balises à pointer au javascriptlieu de js/. Par exemple, js/common/modernizr.jsdevient javascript/common/modernizr.js. La plupart de ces mises à jour se trouvent au bas du document.

Tout devrait se charger correctement maintenant. Vous pouvez maintenant supprimer le public/staticdossier, car nous n’en avons plus besoin. Nous avons migré notre document statique dans un thème SilverStripe.

TOUT VOIR Ajouter une remarque
VOUS
Ajoutez votre commentaire
 
© Academy EdTech. 2019 All rights reserved.
X