pug starter下載 - pug starter源代碼下載

pug starter

網站數據

Render multiple CSS support

下載

帕格起動器

如果您想開始從事網絡開發人員的職業，成為可僱用並在市場上獲得最高薪水的工作，請訪問WOW Job

項目文件結構

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

添加模塊化支持。當在package.json的配置中啟用時，它將將所有SCS/SASS文件轉換為其通訊CSS路徑。

添加可以為github.io和自定義域配置的baseurl支持。檢查軟件包。 json配置部分

DeployTogitHubio- （true | false）默認情況下，它設置為true ，並在要部署到github.io時會影響baseurl的值；如果要使用customUrl作為baseurl的值，則要將其設置為false
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

如何在2017年的3個簡單步驟中免費製作網站

噩夢終於結束了！ HTML5有關如何構建網頁佈局2017的教程

為初學者構建HTML5網站免費教程2017

基於PUG（前Jade）模板項目的入門包裝。

注意：boolean選項config.render.sourcefilechange已添加到package.json中。行為根據價值有所不同：

是的- 如果已更改了源文件（PUG文件），它會渲染；與其他選項相比，渲染時的速度要大得多，但是只有更改PUG觀看的當前文件時才相關。如果您更改擴展並駐留在包含“ _”的路徑中的文件，就像佈局一個一樣，則不會反映更改。
false-它會渲染是否已更改了任何哈巴狗文件，並將輸出與目標文件進行比較（HTML現在生成的HTML與先前生成的HTML）。當文件數量增加時，這可能會更慢。

用帕格啟動者建造的實時項目

如果您希望在此處列出您的項目，請在Facebook上的Codetap上留言。您的項目至少必須是第一版本的決賽（沒有beta / alpha或正在進行的工作）。

作者：Marian Zburlea
- 吃素食（現場） - 吃素食（來源）
- W3Schools副本（LIVE）-W3Schools副本（源）
- 我的簡歷（Live） - 我的簡歷（來源）
- 快速博客（直播） - 快速博客（來源）
- 特斯拉挽救生命（Live） - 特斯拉挽救生命（來源）
作者：Istvan ACS
- Acme Mobile First（Live）-Acme Mobile First（來源）
- 拇指畫廊（直播） - 拇指畫廊（來源）

先決條件

該項目需要Nodejs v.4+

要安裝nodejs訪問nodejs下載頁面下載用於操作系統系統的適當軟件包，請單擊下載的文件，打開它並遵循安裝程序。如果您對此一無所知，只需單擊所有下一個，然後安裝按鈕，然後在提示時選擇“我同意”，您應該沒事的。

安裝

安裝之前：請閱讀先決條件

$ 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

風格

該項目支持嵌入式和外部樣式表。您可以沒有一個，一個或另一個，或兩個。

單頁應用程序樣式

當您構建單個頁面應用程序或網站時，從外部文件中加載樣式表是沒有意義的，我將解釋原因：加載外部樣式表的點是允許瀏覽器緩存這些文件，一旦您訪問同一網站的另一個網頁，而不是將另一個請求（s）用於服務器，並不是要下載它們，並且必須將其下載到brows drows，則可以將其加載到browser上。在一個頁面中，沒有其他頁面可以轉到，因此不適用外部文件技術。