Dodaj niestandardowy CSS do Jekyll

Aug 24 2020

Jestem nowy w Jekyll i tworzę witrynę z niestandardowym html i css w kolejności. Jekyll domyślnie pobiera motyw minima, więc zastąpiłem stronę główną następującym kodem HTML:

<!DOCTYPE html>
<html>

<head>
    <title>testsite</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

    all my html

    <script>
           $.ajax(an ajax call);        
    </script>

</body>
</html>

Chcę dodać niestandardowy arkusz stylów, ale mam problem z poprawnym połączeniem z motywem. Sprawdziłem online, ale wiele forów wydaje się mieć nieprawidłową strukturę folderów.

Oto obecna struktura.

--layouts
  -home.html
--posts
--site
  --assets
    -main.css
    -main.css.map
  --jekyll
    --update
  --privacy
  -index.html
--jekyll-cache
-config.yml
-Gemfile
-Gemfile.lock
-index.markdown

Moje pytanie brzmi: czy istnieje prosty sposób na dodanie arkusza stylów, który będzie działał na wszystkich stronach na żywo? Mogę połączyć arkusz stylów w normalny sposób, w jaki to robię, jednak to nie działa po przesłaniu na github. Czy lepiej byłoby zacząć od kompilacji bez motywu? Jeśli tak, to jak skonfigurować plik gemfile?

Dzięki!

Odpowiedzi

1 JoostS Aug 25 2020 at 13:37

Świetne proste podejście. Kocham to. Oto jak postępować:

  1. Usuń Minima z pliku / projektu konfiguracyjnego
  2. Utwórz katalog _includes
  3. Przenieś nagłówek do header.html w _includes
  4. Wywołaj nagłówek w pliku home.html (i każdym innym układzie), używając {% include header.html%}
  5. Połącz nowy arkusz CSS w pliku header.html

Jekyll bez motywów (i wtyczek) jest o wiele lepszy. Szukasz więcej?https://www.jekyllcodex.org