Скачать 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

базовый

Примечание: 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 . При включении в Config of package.json он преобразует все файлы SCSS/SASS в свой путь CSS -корреспондента.

Добавьте поддержку Baseurl , которая может быть настроена для github.io и пользовательского домена. Проверьте раздел конфигурации .

DeployTogitHubio - (true | false) по умолчанию он установлен на TRUE и повлияет на значение BASEURL , когда вы хотите развернуть на github.io; Вы хотите установить его на false , если хотите использовать 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

Кошмар наконец закончился! Учебник HTML5 о том, как построить макет веб -страницы 2017

Построить учебник на веб -сайте HTML5 для начинающих 2017

Стартовый пакет для Pug (бывший нефрит) шаблоны проектов.

ПРИМЕЧАНИЕ . В пакет . Поведение отличается в зависимости от значения:

true - он рендесирует, если исходный файл (файл мопса) был изменен; Это имеет гораздо большую скорость при рендеринге по сравнению с другим вариантом, однако это актуально только в том случае, если вы внесете изменения в текущий файл, наблюдаемый PUG. Если вы внесете изменения в расширенный файл и проживает в пути, который содержит «_», например, макет, изменение не будет отражено.
false - он рендесирует, если какой -либо файл мопса был изменен, и сравнивает выход с файлом назначения (HTML, сгенерированный сейчас с предыдущим сгенерированным HTML). Это может быть медленнее, когда количество файлов увеличивается.

Живые проекты, построенные с мопс-Starter

Если вы хотите, чтобы ваш проект был указан здесь, оставьте сообщение на Codetap на Facebook. Вам должен быть принят хотя бы проект, по крайней мере, версию (без бета / альфа или работы).

Автор: Мариан Збурлея
- Ешьте вегетарианскую (живи) - съешьте вегетарианство (источник)
- Реплика W3Schools (Live) - Реплика W3Schools (источник)
- Мое резюме (в прямом эфире) - мое резюме (источник)
- Quick Blog (Live) - Quick Blog (Source)
- Тесла спасает жизни (в прямом эфире) - Тесла спасает жизни (источник)
Автор: Istvan ACS
- Acme Mobile First (Live) - Acme Mobile First (Source)
- Галерея большого пальца (в прямом эфире) - галерея большого пальца (источник)

Предварительные условия

Проект требует nodejs v.4+

Чтобы установить nodejs посетите страницу загрузки Nodejs. Загрузите пакет Appropiate для вашей системы Operatin, нажмите на загруженный файл, откройте его и следите за предварительными возможностями установки. Если вы не знаете об этом, просто нажмите на все следующие кнопки и или установите кнопки и выберите «Я согласен», когда будет предложено, и все будет в порядке.

Установка

Перед установкой: пожалуйста, прочитайте предпосылки

$ npm i

или

$ npm install

Примечание. Если вы столкнетесь с ошибкой Pngquant-bin в Windows, попробуйте запустить:

 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

Стиль

Проект поддерживает как встроенные , так и внешние листы. Вы можете иметь ни одного, ни одного или другого, или обоих из них.

Стиль приложения для одной страницы

Когда вы создаете одностраничное приложение или веб -сайт, нет смысла загружать листы стилей из внешнего файла, и я объясню, почему: точка загрузки листов внешнего стиля состоит в том, чтобы позволить браузеру кэшировать эти файлы и после того, как вы посетите другую веб -страницу того же веб -сайта, вместо того, чтобы сделать другой запрос (ы) для файлов листа стилей на сервер и необходимость загружать их, если нет изменений, Browser будет загружать их с лока. На одной странице нет другой страницы, чтобы перейти к внешней технике файла не применяется.

Стиль мультистраничного приложения

В этом сценарии вы можете иметь либо как встроенный , так и внешний или просто внешний. Наиболее распространенным сценарием является загрузка только одного листа внешнего стиля, и большую часть времени это просто в порядке.

Если вы хотите еще больше улучшить свой SEO и пользовательский опыт, я настоятельно рекомендую использовать комбинацию как встроенного , так и внешнего. Лист встроенного стиля должен содержать только минимальное количество стилей для первичной видимой части страницы для рендеринга. Остальные стили могут быть помещены во внешний файл CSS.