pug starter Download - pug starter Quellcode Download

pug starter

Website-Daten

Render multiple CSS support

Herunterladen

Mops Starter

Wenn Sie eine Karriere als Webentwickler beginnen möchten, werden Sie bequem und greifen Sie auf den höchsten bezahlten Jobs auf dem Markt zu, besuchen Sie WOW Job

Inhaltsverzeichnis

YouTube -Video -Tutorials
Live-Projekte, die mit Mops-Starter gebaut wurden
Voraussetzungen
Installation
Verwendung
Stil

Projektdateistruktur

 .
├── 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

BasisaRl

HINWEIS: inline -Attribut wurde auf embed aktualisiert

Alter Weg:

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

Neuer Weg:

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

Fügen Sie modularCSS -Unterstützung hinzu. Wenn in der Konfiguration von package.json aktiviert ist, werden alle SCSS/SASS -Dateien in den Korrespondenz -CSS -Pfad konvertiert.

Fügen Sie BaseURL -Unterstützung hinzu, die für github.io und benutzerdefinierte Domäne konfiguriert werden kann. Scheckpaket.json -Konfigurationsabschnitt für

DeployTogithubio - (true | false) standardmäßig ist es auf True eingestellt und wirkt sich auf den Wert von BaseURL aus, wenn Sie auf Github.io bereitstellen möchten. Sie möchten es auf False einstellen, wenn Sie Customurl als Wert von BaseURL verwenden möchten
CustomUrl - Wenn Sie möchten, dass Baseurl einen Wert wie http://my-project.wowjob.dev oder eine andere hat;
Githuburl - Wenn Sie möchten, dass BaseUrl einen Wert wie http://github.com/Marianzburlea/pugstarter.git oder eine andere hat;

Am Ende können Sie BaseURL verwenden, um Ihre Pfade wie folgt zu präfixen:

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

oder

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

oder

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

YouTube -Video -Tutorials

Ich möchte diese Tutorials mit den neuen Techniken in neue ändern.

Um Ihnen noch mehr zu helfen, habe ich einige YouTube -Tutorials zusammengestellt:

Installieren Sie NodeJs, Git und GitHub

So erstellen Sie kostenlos eine Website in 3 einfachen Schritten 2017

Der Albtraum ist endlich vorbei! HTML5 -Tutorial zum Erstellen eines Webseitenlayouts 2017

Erstellen Sie die HTML5 -Website Schmerzfreies Tutorial für Anfänger 2017

Starter -Paket für PUG (ehemalige JADE) -Schabelt -basierte Projekte.

HINWEIS : Ein Boolean Option Config.Render.SourceFilechange wurde dem Paket.json hinzugefügt. Das Verhalten unterscheidet sich basierend auf dem Wert:

TRUE - Es wird gerendert, ob die Quelldatei (PUG -Datei) geändert wurde. Dies hat eine viel größere Geschwindigkeit beim Rendern im Vergleich zur anderen Option, aber es ist nur relevant, wenn Sie sich an der aktuellen von PUG beobachteten Datei ändern. Wenn Sie eine Änderung einer Datei vornehmen, die erweitert ist und sich in einem Pfad befindet, der "_" enthält, wie ein Layout, wird die Änderung nicht reflektiert.
FALSE - Es wird gerendert, ob eine PUG -Datei geändert wurde, und vergleicht die Ausgabe mit der Zieldatei (die HTML -nun mit den vorherigen generierten HTML). Dies kann langsamer sein, wenn die Anzahl der Dateien zunimmt.

Live-Projekte, die mit Mops-Starter gebaut wurden

Wenn Sie möchten, dass Ihr Projekt hier aufgelistet ist, hinterlassen Sie eine Nachricht auf Codetap auf Facebook. Ihr Projekt muss mindestens Version 1 sein (keine Beta / Alpha oder in Arbeit) wird akzeptiert.

Autor: Marian Zburlea
- Essen Sie das Gemüse (Live) - Essen Sie das Gemüse (Quelle)
- W3Schools Replica (Live) - W3schools Replik (Quelle)
- Mein Lebenslauf (live) - Mein Lebenslauf (Quelle)
- Quick Blog (Live) - Quick Blog (Quelle)
- Tesla rettet Leben (leben) - Tesla rettet Leben (Quelle)
Autor: Istvan ACS
- ACME Mobile First (Live) - ACME Mobile First (Quelle)
- Daumengalerie (Live) - Daumengalerie (Quelle)

Voraussetzungen

Das Projekt erfordert NodeJS v.4+

Um NodeJS zu installieren, besuchen Sie die NodeJS -Download -Seite. Laden Sie das angemessene Paket für Ihr Operatin -System herunter, klicken Sie auf die heruntergeladene Datei, öffnen Sie es und befolgen Sie die Installationsprozes. Wenn Sie nicht viel darüber wissen, klicken Sie einfach auf die nächste und installieren Sie Schaltflächen und wählen Sie "Ich stimme zu", wenn Sie aufgefordert werden, und Sie sollten in Ordnung sein.

Installation

Bevor Sie installieren: Bitte lesen Sie die Voraussetzungen

$ npm i

oder

$ npm install

HINWEIS: Wenn Sie einen PNGquant-Bin-Fehler unter Windows begegnen, versuchen Sie es mit dem Ausführen:

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

Bevor Sie npm start

Verwendung

So führen Sie das Projekt im Entwicklungsmodus aus und öffnen Sie einen lokalen Server, der über mehrere Geräte hinweg synchronisiert:

npm start

oder

npm run dev

Um das Projekt für die Produktionsnutzung zu erstellen:

npm run prod

So bereitstellen Sie Ihr Projekt automatisch auf GitHub-Seiten und machen Sie es unter https: // [your-Unername] .github.io/[your-project-name] Verwenden:

npm run deploy

Stil

Das Projekt unterstützt sowohl Einbettung als auch externe Stilblätter. Sie können niemanden, dem einen oder anderen oder beiden haben.

Einseiten -Anwendungsstil

Wenn Sie eine einseitige App oder eine einzelne Website erstellen, macht es keinen Sinn, die Stilblätter aus einer externen Datei geladen zu haben, und ich werde erklären, warum: Der Punkt beim Laden externer Stilblätter besteht darin, den Browser zu erlauben, diese Dateien zu speichern. Auf einer einzigen Seite gibt es keine andere Seite, auf der die externe Dateitechnik nicht zutrifft.

Multi -Seiten -Anwendungsstil

In diesem Szenario können Sie sowohl einbetten als auch extern oder nur extern. Das häufigste Szenario ist, dass nur eine externe Stylesheet -Datei geladen werden muss und dass dies die meiste Zeit in Ordnung ist.

Wenn Sie Ihre SEO- und Benutzererfahrung noch weiter verbessern möchten, empfehle ich dringend, eine Kombination aus Einbettung und Extern zu verwenden. Das Einbettungsstilblatt sollte nur die minimale Anzahl von Stilen enthalten, damit der anfängliche sichtbare Teil der Seite zu rendern ist. Der Rest der Stile kann in die externe CSS -Datei eingefügt werden.