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上。在一个页面中，没有其他页面可以转到，因此不适用外部文件技术。