Conseil rapide: comment construire votre thème personnalisé pour le télescope Nova

Créez rapidement le Télescope personnalisé Nova Theme Guide

Cet article vous guidera comment créer rapidement et facilement des thèmes personnalisés pour le télescope Nova. Telescope Nova est un projet open source basé sur Meteor.js et React, qui est idéal pour construire rapidement des applications de réseautage social.

PRÉPARATION: Installez le logiciel nécessaire

Tout d'abord, assurez-vous que Node.js, NPM et Meteor.js sont installés. Sinon, veuillez suivre les étapes ci-dessous pour installer:

1. Installation de Node.js et NPM (les utilisateurs de Windows peuvent se référer au tutoriel de Dave McFarland: comment installer Node.js et NPM sur Windows).
2. Installez Meteor.js.

Télescope d'installation Nova

Clone Telescope Nova localement en entrant la ligne de commande suivante:

git clone https://github.com/TelescopeJS/Telescope.git
cd Telescope
npm install
meteor

L'application doit s'exécuter dans http://localhost:3000/. Pour plus d'informations d'installation, veuillez vous référer au guide GitHub.

Créer un package de thème personnalisé

1. Entrez le dossier Telescope/packages. Trouvez le dossier my-custom-package.
2. Copiez le dossier my-custom-package et renommez-le à custom-theme.
3. Dans le fichier custom-theme/package.js, remplacez "my-custom-package" par "custom-theme".
4. Dans le terminal, accédez au dossier Telescope et entrez meteor add custom-theme.
5. Exécuter meteor Démarrez l'application.

Composants personnalisés

• Rappelez-vous: ne modifiez jamais directement le fichier d'origine! Travaillez toujours dans des fichiers personnalisés et préfixant "personnalisé" sur les fichiers personnalisés et les noms de composants. Utilisez className au lieu de l'attribut class et assurez-vous que la balise HTML est fermée.

Ce qui suit est un exemple de la façon de supprimer le bon avatar:

1. Copier packages/nova-base-components/lib/posts/PostsCommenters.jsx Contenu de fichier.
2. Créez un fichier custom-theme/lib/components dans le dossier CustomPostsCommenters.jsx.
3. Collez le contenu copié de CustomPostsCommenters.jsx.
4. Supprimer l'extrait de code suivant (Supprimer dans un fichier personnalisé, pas le fichier d'origine):

<div className="posts-commenters-avatars">
  {_.take(post.commentersArray, 4).map(user =>
    <Telescope.components.UsersAvatar key={user._id} user={user} />)}
</div>

5. Modifiez le nom du composant dans CustomPostsCommenters.jsx:

const CustomPostsCommenters = ({ post }) => {
  // ...
};

export default CustomPostsCommenters;

6. Ajouter le code suivant dans le fichier custom-theme/lib/components.js:

import CustomPostsCommenters from "./components/CustomPostsCommenters.jsx";

Telescope.components.PostsCommenters = CustomPostsCommenters;

Répétez les étapes ci-dessus pour chaque composant qui doit être modifié.

CSS personnalisé

Dans le dossier custom-theme/lib/stylesheets, créez ou modifiez le fichier custom.scss ou custom.css pour modifier le style. Par exemple:

git clone https://github.com/TelescopeJS/Telescope.git
cd Telescope
npm install
meteor

Ajoutez un chemin de feuille de style personnalisé dans le fichier custom-theme/lib/package.js.

Plus de ressources

• Document officiel du télescope
• Base de code GitHub Telescope
• Tutoriel officiel du télescope YouTube (partie 1 et partie 2)

FAQS (FAQ) (supprimé parce que la FAQ dans le texte d'origine n'a rien à voir avec le sujet et appartient à différents scénarios d'application)

J'espère que ce guide vous aidera à créer rapidement des thèmes Nova de télescope personnalisés!

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!