pug starterダウンロード - pug starterソースコードのダウンロード

pug starter

ウェブサイトデータ

Render multiple CSS support

ダウンロード

パグスターター

Web開発者としてキャリアを開始したい場合は、市場で最高の給与の高い仕事にアクセスできるようになり、WOWジョブをご覧ください

プロジェクトファイル構造

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

baseurl

注： inline属性がembedれて更新されました

古い方法：

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

新しい方法：

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

ModularCSSサポートを追加します。 package.jsonの構成で有効になると、すべてのSCSS/SASSファイルを特派員CSSパスに変換します。

github.ioおよびカスタムドメイン用に構成できるBaseurlサポートを追加します。 package.json構成セクションを確認してください

deploytogithubio- （true | false）デフォルトではTrueに設定されており、github.ioに展開する場合にbaseurlの価値に影響します。 customurlをbaseurlの値として使用する場合は、それを偽に設定したい
customurl -baseurlにhttp://my-project.wowjob.devなどの値を持っている場合。
githuburl -baseurlにhttp://github.com/marianzburlea/pug-starter.gitなどの値を持たせたい場合。

最終的に、 Baseurlを使用して、次のようなパスに接頭します。

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

または

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

または

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

YouTubeビデオチュートリアル

これらのチュートリアルを新しいテクニックを使用して新しいチュートリアルに変更したいと思います。

さらにあなたを助けるために、私はいくつかのYouTubeチュートリアルをまとめました：

nodejs、git、githubをインストールします

3つの簡単なステップでウェブサイトを無料で作成する方法2017

悪夢はついに終わりました！ Webページレイアウト2017の構築方法に関するHTML5チュートリアル

HTML5 WebサイトのBewebS Free Tutorial for beginners 2017を構築します

Pug（元Jade）テンプレートベースのプロジェクト用のスターターパッケージ。

注：ブールオプションconfig.render.sourcefilechangeがpackage.jsonに追加されました。動作は値に基づいて異なります。

TRUE-ソースファイル（PUGファイル）が変更された場合にレンダリングします。これは、他のオプションと比較してレンダリングするときにはるかに高い速度を持っていますが、PUGが視聴した現在のファイルに変更を加える場合にのみ関連します。拡張され、レイアウトのように「_」を含むパスに存在するファイルに変更を加えると、変更は反映されません。
FALSE-パグファイルが変更され、出力を宛先ファイル（以前の生成されたHTMLで生成したHTML）と比較するとレンダリングします。これは、ファイルの数が増えると遅くなる可能性があります。

Pug-Starterで構築されたライブプロジェクト

ここにプロジェクトをリストしたい場合は、FacebookにCodetapにメッセージを残してください。プロジェクトは、少なくともバージョン1の最後の1つである必要があります（ベータ /アルファまたは進行中の作業はありません）。

著者：マリアン・ズブルレア
- 野菜を食べる（ライブ） - 野菜を食べる（ソース）
- w3schoolsレプリカ（ライブ）-w3schoolsレプリカ（ソース）
- 私の履歴書（ライブ） - 私の履歴書（ソース）
- クイックブログ（ライブ） - クイックブログ（ソース）
- テスラは命を救う（ライブ） - テスラは命を救う（ソース）
著者：ISTVAN ACS
- Acme Mobile First（Live）-Acme Mobile First（source）
- サムギャラリー（ライブ） - サムギャラリー（ソース）

前提条件

このプロジェクトでは、nodejs v.4+が必要です

nodejsをインストールするには、nodejsのダウンロードページにアクセスするには、オペラティンシステムのAppropiateパッケージをダウンロードし、ダウンロードしたファイルをクリックして開き、インストールプロセスに従ってください。それについてあまり知らない場合は、次のボタンをすべてクリックしてボタンをインストールして、プロンプトが表示されたら「同意する」を選択してください。

インストール

インストールする前に：前提条件をお読みください

$ npm i

または

$ npm install

注：Windowsでpngquant-binエラーに遭遇した場合は、実行してみてください。

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

npm start

使用法

開発モードでプロジェクトを実行し、複数のデバイスで同期するローカルサーバーを開くには：

npm start

または

npm run dev

生産用のプロジェクトを構築するには：

npm run prod

プロジェクトをGitHubページに自動的に展開し、https：// [your-username] .github.io/[your-project-name]で使用できるようにします。

npm run deploy

スタイル

このプロジェクトは、埋め込みシートと外部スタイルの両方のシートをサポートしています。どちらも、どちらも、あるいはその両方を持つこともできます。

シングルページアプリケーションスタイル

単一のページアプリまたはウェブサイトを構築するとき、外部ファイルからスタイルシートをロードすることにはポイントがありません。理由を説明します。外部スタイルシートをロードするポイントは、ブラウザがそれらのファイルをキャッシュできるようにすることです。単一のページには、他のページに移動することはありません。したがって、外部ファイル手法は適用されません。

マルチページアプリケーションスタイル

このシナリオでは、埋め込みと外部の両方または外部の両方を持つことができます。最も一般的なシナリオは、ロードする外部スタイルシートファイルが1つだけで、ほとんどの場合、問題ありません。

SEOとユーザーエクスペリエンスをさらに改善したい場合は、埋め込みと外部の両方の組み合わせを使用することを強くお勧めします。埋め込まれたスタイルシートには、ページの最初の表示された部分のスタイルの最小量のみをレンダリングする必要があります。残りのスタイルは、外部CSSファイルに配置できます。