Включая таблицы стилей CSS на страницах Jekyll

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

Предполагается, что сообщения CSS для блога должны быть записаны в _layouts/default.html или _layouts/posts.html, и мне нужно указать, какие стили, которые я хочу использовать в YAML, с помощью {% include ...%} или путем записи

{% if page.style %}
    <link rel="stylesheet" href="{{ page.style }}">
{% endif %}

Мне не удалось найти информацию, которая дала четкий ответ.

Ответ 1

Jekyll способ сделать это - взять любой макет, который вы собираетесь использовать для последней страницы (например, _layouts/posts.html), и создать там скелет HTML-документа (т.е. html, head и body). В head HTML-макета введите {% include blog-head.html %}. В этом файле blog-head.html мы собираемся включить все CSS, JS и т.д., Которые необходимы для каждой страницы блога.

Затем в вашем blog-head.html вы можете просто написать файл CSS для пользовательского файла CSS:

<link rel="stylesheet" href="blogposts.css">

Таким образом, вы можете легко включить тот же раздел head на всех страницах своего блога, и вы можете легко обновить этот раздел head (добавление, удаление или изменение CSS/JS), и он автоматически будет эффект во всех ваших сообщениях в блоге.

Пожалуйста, следите, если вы хотите, чтобы я разъяснил что-нибудь!

Ответ 2

Когда мне нужен быстрый и грязный способ добавить CSS-сообщение в сообщение, я просто добавлю тег <style> в кусок сообщения.

---
layout: post
title: "quick and dirty CSS in jekyll posts"
date: 2016-04-08 13:04:00
---

<style type="text/css">
  p {
    border: 1px solid black;
  }
</style>

whoa this paragraph has a border around it, such magic

Ответ 3

Вы можете создать custom.css(который я бы рекомендовал) и стиль из этого.

Это поможет вам начать работу в правильном направлении. http://markdotto.com/2014/02/28/including-css-in-jekyll/

Вот достойный учебник, а также в отношении тематики Jekyll. https://learn.andrewmunsell.com/learn/jekyll-by-example/tutorial

Ответ 4

Вы можете стать действительно сумасшедшим с включенными и, без сомнения, код заканчивается тем, что он выглядит хорошо и круто. Однако производительность может стать хитом. Особенно изначально, когда вы можете выполнять большую часть своей работы с помощью инструмента "Live Preview", такого как Brackets.io. Раньше вы, возможно, не готовы начать свой рабочий процесс "jekyll serve". Я подозреваю, что часть вашей проблемы не включает параметр конфигурации baseurl.

Счастливое среднее решение, которое работает для меня, заключается в условном включении заголовков ссылок.

{% if site.baseurl %}
  {% include links.html %}
{% else %}
  <link rel="stylesheet" href="/solarized-dark.css">
  <link rel="stylesheet" href="/site.css">
{% endif %}

Это обрабатывает все рабочие процессы: предварительный просмотр в реальном времени, сервер jekyll и производство.

Если вы тестируете локально с помощью jekyll, вы можете передать пустой параметр baseurl.

jekyll serve --baseurl ''

http://jekyllrb.com/docs/github-pages/#project-page-url-structure