Использование мопса в посылке - PullRequest
Новая
       31

Использование мопса в посылке

2 голосов
/ 18 марта 2019

только начинает использовать посылку с мопсом.Я сталкиваюсь с проблемами в том, как использовать ссылку в pug на различные файлы pug.

У меня есть два файла pug в моем каталоге src, index.pug и tradgard.pug.У меня также есть навигационное включение, которое используется обоими упомянутыми файлами мопса.Это код для навигации: 

nav#nav.flex-nav
    ul
      li
        a(href='/') Hem
      li
        a(href='#') Vår story
      li
        a(href='/tradgard') Trädgården
      li
        a(href='#') Matsal
      li
        a(href='#') Matevent
      li
        a(href='#') Album
      li
        a(href='#booking') Boka bord
      li
        a(href='#') Shop

Это дает следующий HTML: 

<nav class="flex-nav" id="nav">
    <ul>
      <li><a href="/">Hem</a></li>
      <li><a href="#">Vår story</a></li>
      <li><a href="/tradgard">Trädgården</a></li>
      <li><a href="#">Matsal</a></li>
      <li><a href="#">Matevent</a></li>
      <li><a href="#">Album</a></li>
      <li><a href="#booking">Boka bord</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
</nav>

Ссылка на индексный файл, как можно видеть, ссылка: 

li
  a(href='/tradgard') Trädgården

переводится на: 

<li><a href="/tradgard">Trädgården</a></li>

Таким образом, в браузере с сервера, если я нахожусь на странице индекса и нажимаю эту ссылку, она переходит к tradgard, в окне URL, но этовсе еще показывает страницу индекса в браузере.

Если я изменю nav, включите в: 

li
  a(href='/tradgard.pug') Trädgården

, что приведет к следующему html: 

<li><a href="/tradgard.pug">Trädgården</a></li>

страница индекса полностью потеряет свой стиль, но если я сейчас нажмуссылка на tradgard, она правильно отображается в браузере со следующим URL:

http://localhost:1234/tradgard.html

Я проверил инспектор свойств для страницы индекса иссылка css пропала, но для страницы tradgard ссылка css находится в заголовке.

Почему я получаю это странное поведение, я подозреваю, что неправильно кодирую ссылки для навигации,так как я получаю много ошибок для:

"Не удалось прочитать свойство 'cssRules' из CSSStyleSheet"

в инспекторе свойств.

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

Это мой файл package.json: 

{
  "name": "parcel_pug_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel serve src/index.pug",
    "prod": "parcel build src/*.pug -d public --public-url ./"
  },
  "keywords": [],
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "1.12.0",
    "pug": "2.0.3",
    "sass": "1.17.2"
  }
}

спасибо :)

1 Ответ

0 голосов
/ 12 мая 2019

Правильный способ ссылки на tradgard.pug из index.pug: a(href='/tradgard.pug').

  • Для составителя участков необходимо знать расширение файла, чтобы знать, какобработайте его.
  • Похоже, что Parcel Builder не выполняет сложную обработку URL-адресов, которые не заканчиваются именами файлов (например, поиск подходящих файлов / каталогов).

Аналогично,сервер Parcel dev обрабатывает URL-адреса без имен файлов, как если бы ваш проект представлял собой одностраничное приложение (SPA).Если URL-адрес не заканчивается именем файла, файл index.html загружается и передается весь URL-адрес.Если ваш проект не является SPA, это может быть не интуитивно понятно.(По этой причине сервер Parcel dev обслуживал страницу индекса, когда вы щелкали ссылку. Если вы продолжаете нажимать на ссылку, обратите внимание, что относительный путь продолжает добавляться к URL-адресу.)

Существуетметод использования ссылок без имен файлов, таких как /tradgard в index.pug:

  1. Переименуйте «tradgard.pug» в «index.pug» и поместите его в каталог с именем «tradgard»
  2. При запуске Parcel укажите несколько точек входа, по одной для каждого index.pug.Вы можете использовать подстановочные знаки, например: parcel src/index.html src/**/index.html
  3. Сервер обработки посылок по-прежнему не сможет обслуживать ожидаемые страницы, но вы можете использовать альтернативный сервер разработки, например Browsersync .

Ошибки CSS кажутся отдельной проблемой, и я не могу комментировать это, потому что я не знаю ни как вы включили файл CSS, ни что содержат файлы CSS.(Попробуйте открыть новый вопрос.)

...