Téléchargement pug starter - Téléchargement du code source pug starter

pug starter

Données du site Web

Render multiple CSS support

Télécharger

Entrée de carlin

Si vous cherchez à démarrer une carrière en tant que développeur Web , devenez embauable et accédez aux meilleurs emplois les plus rémunérés sur le marché, visitez Wow Job

Table des matières

Tutoriels vidéo YouTube
Projets en direct construits avec Pug-Starter
Condition préalable
Installation
Usage
Style

Structure du fichier de projet

 .
├── README.md
├── package.json
├── src
│   ├── _asset
│   │   ├── image
│   │   │   └── become-a-web-developer-today.jpg
│   │   │   └── logo.png
│   │   └── js
│   │       └── all.js
│   │       └── game.js
│   ├── _component
│   │   ├── header
│   │   │   ├── header.pug
│   │   │   └── header.scss
│   │   ├── footer
│   │   │   ├── footer.pug
│   │   │   └── footer.scss
│   │   ├── smart-button
│   │   │   ├── smart-button.pug
│   │   │   └── smart-button.scss
│   │   ├── project-list
│   │   │   ├── project-list.pug
│   │   │   └── project-list.scss
│   │   └── layout
│   │       ├── base.pug
│   │       └── general.scss
│   ├── _data
│   │   ├── site.yml
│   │   └── user.json
│   │   ├── menu.yaml
│   │   └── article.json
│   ├── embed.scss
│   ├── favicon.ico
│   ├── index.pug <---------------- MAIN index
│   ├── style.scss <---------------- MAIN style
│   └── contact
│       └── index.pug
│   └── portfolio
│       └── index.pug
│   └── about-me
│       └── index.pug
│   └── my-first-project
│       └── index.pug
│   └── how-i-got-to-work-with-big-companies
│       └── index.pug
└── yarn.lock

balise

Remarque: l'attribut inline a été mis à jour pour embed

Voie ancienne:

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` inline)

Nouvelle façon:

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` embed)

Ajoutez le support ModularCSS . Lorsqu'il est activé dans la configuration de package.json , il convertira tous les fichiers SCSS / SASS en chemin CSS correspondant.

Ajoutez une prise en charge de la substanier qui peut être configurée pour GitHub.io et le domaine personnalisé. Vérifier le package.json Config Section pour

DeployTogithibio - (true | false) Par défaut, il est défini sur true et affectera la valeur de BasiseUrl lorsque vous souhaitez déployer sur gitHub.io; Vous souhaitez le définir sur False si vous souhaitez utiliser CustomUrl comme valeur de BasiseUrl
CustomUrl - Si vous voulez que la substanier ait une valeur comme http://my-project.wowjob.dev ou tout autre;
GitHuBurl - Si vous voulez que BustreUrl ait une valeur comme http://github.com/marianzburlea/pug-starter.git ou tout autre;

En fin de compte, vous pouvez utiliser BUSURL pour préfixer vos chemins comme:

 link(rel="stylesheet", href=`${baseUrl}/style.css`)

ou

 a(
  title="Is it possible?"
  target="_blank"
  href=`${baseUrl}/article/nice-weather`
)

ou

 img(alt="Awesome dog" width="100" href=`${baseUrl}/image/cool-dog.jpg`)

Tutoriels vidéo YouTube

Je veux changer ces tutoriels en nouveaux en utilisant les nouvelles techniques.

Pour vous aider encore plus, j'ai mis en place des tutoriels YouTube:

Installez Nodejs, Git et GitHub

Comment créer un site Web gratuitement en 3 étapes faciles 2017

Le cauchemar est enfin terminé! Tutoriel HTML5 sur la façon de créer une disposition de page Web 2017

Créer un tutoriel gratuit sur le site Web HTML5 pour les débutants 2017

Package de démarrage pour les projets basés sur les modèles PUG (Ancien Jade).

Remarque : une option booléenne config.render.sourcefileChange a été ajoutée au package.json . Le comportement diffère en fonction de la valeur:

Vrai - il rend si le fichier source (fichier PUG) a été modifié; Cela a une vitesse beaucoup plus grande lors du rendu par rapport à l'autre option, mais elle n'est pertinente que si vous apportez des modifications au fichier actuel regardé par PUG. Si vous apportez une modification à un fichier étendu et réside dans un chemin qui contient "_", comme une mise en page, le changement ne sera pas reflété.
FAUX - il rend un fichier PUG modifié et compare la sortie avec le fichier de destination (le HTML généré maintenant avec le HTML généré précédent). Cela peut être plus lent lorsque le nombre de fichiers augmente.

Projets en direct construits avec Pug-Starter

Si vous souhaitez que votre projet soit répertorié ici, laissez un message sur Codetap sur Facebook. Votre projet doit être au moins une version finale (pas de bêta / alpha ou de travail en cours) ne sera accepté.

Auteur: Marian Zburlea
- Mangez les légumes (en direct) - Mangez le légume (source)
- Réplique de W3Schools (en direct) - réplique de W3Schools (source)
- Mon CV (en direct) - Mon CV (source)
- Blog rapide (en direct) - Blog rapide (source)
- Tesla sauve des vies (en direct) - Tesla sauve des vies (source)
Auteur: Istvan ACS
- ACME Mobile First (Live) - ACME Mobile First (Source)
- Galerie du pouce (en direct) - Galerie de pouce (source)

Condition préalable

Le projet nécessite Nodejs v.4 +

Pour installer Nodejs, visitez la page de téléchargement de Nodejs Téléchargez le package approprié pour votre système d'opératine, cliquez sur le fichier téléchargé, ouvrez-le et suivez les procées d'installation. Si vous n'en savez pas grand-chose, cliquez simplement sur tous les boutons suivants et / ou installez "je choisis" je suis d'accord "lorsque vous êtes invité et tout devrait aller bien.

Installation

Avant d'installer: veuillez lire les conditions préalables

$ npm i

ou

$ npm install

Remarque: Si vous rencontrez une erreur de bin pngquant sur Windows, essayez de fonctionner:

 npm install [email protected] -D
npm install [email protected] -D

Avant d'exécuter npm start

Usage

Pour exécuter le projet en mode développement et ouvrir un serveur local qui se synchronise sur plusieurs appareils: utilisation:

npm start

ou

npm run dev

Pour construire le projet pour une utilisation en production:

npm run prod

Pour déployer automatiquement votre projet sur les pages GitHub et la rendre disponible sur https: // [your-username] .github.io / [your-project-name] use:

npm run deploy

Style

Le projet prend en charge les feuilles de style intégrées et externes . Vous ne pouvez en avoir aucun, l'un ou l'autre, ou les deux.

Style d'application à page unique

Lorsque vous construisez une application ou un site Web d'une seule page, il est inutile de charger les feuilles de style à partir d'un fichier externe et je vais expliquer pourquoi: Le point de chargement des feuilles de style externe est de permettre au navigateur de mettre en cache ces fichiers et une fois que vous visitez une autre page Web du même site Web, au lieu de faire une autre demande pour le (s) fichier (s) des feuilles de style pour les télécharger, s'il n'y a pas de modification, le navigateur les chargera. Dans une seule page, il n'y a pas d'autre page pour accéder donc à la technique de fichier externe ne s'applique pas.

Style d'application multi-pages

Dans ce scénario, vous pouvez avoir à la fois des intégres et externes ou simplement externes. Le scénario le plus courant est d'avoir un seul fichier de feuille de style externe à charger et la plupart du temps, c'est très bien.

Si vous souhaitez améliorer encore plus votre SEO et votre expérience utilisateur, je recommande fortement d'utiliser une combinaison à la fois en intégration et externe. La feuille de style intégrée ne doit contenir que la quantité minimale de styles pour la partie visible initiale de la page à rendre. Le reste des styles peut être placé dans le fichier CSS externe.