so simple theme
3.2.0
So Simple — это простая тема Jekyll для ваших слов и изображений. Создан для обеспечения:
Посмотрите, что нового в CHANGELOG. документация v2 .
| Описание | ||
|---|---|---|
| Пост с большим изображением героя. | Предварительный просмотр | Источник |
| Публикация с различными распространенными HTML-элементами, показывающими, как их стилизует тема. | Предварительный просмотр | Источник |
| Публикация с выделенным кодом. | Предварительный просмотр | Источник |
| Сообщение, показывающее изображения с различными выравниваниями. | Предварительный просмотр | Источник |
| Все посты сгруппированы по годам. | Предварительный просмотр | Источник |
| Все сообщения сгруппированы по категориям. | Предварительный просмотр | Источник |
| Все сообщения сгруппированы по тегам. | Предварительный просмотр | Источник |
| Страница категории. | Предварительный просмотр | Источник |
| Список документов в виде сетки. | Предварительный просмотр | Источник |
Дополнительные примеры сообщений можно просмотреть на демонстрационном сайте. Исходные файлы для них (и всего демонстрационного сайта) можно найти в папке /docs .
Если вы используете Jekyll v3.5+ и используете собственный хостинг, вы можете быстро установить тему как драгоценный камень Ruby. Если вы размещаете страницы GitHub, вы можете установить их как удаленную тему или напрямую скопировать все файлы темы (см. структуру ниже) в свой проект.
Добавьте эту строку в Gemfile вашего сайта Jekyll (или создайте его):
gem "jekyll-theme-so-simple" Добавьте эту строку в файл _config.yml вашего сайта Jekyll:
theme : jekyll-theme-so-simpleЗатем запустите Bundler, чтобы установить драгоценный камень темы и зависимости:
bundle install
В GitHub Pages добавлена полная поддержка любой темы, размещенной на GitHub.
Замените gem "jekyll" на:
gem "github-pages" , group : :jekyll_plugins Запустите bundle update и убедитесь, что все драгоценные камни установлены правильно.
Добавьте remote_theme: "mmistakes/[email protected]" в ваш файл _config.yml . Удалите любые другие записи theme: или remote_theme:
Примечание. Ваш сайт Jekyll должен быть доступен для просмотра сразу по адресу http://USERNAME.github.io. Если это не так, вы можете принудительно перестроить, отправив пустые коммиты на GitHub (более подробную информацию см. ниже).
Если вы размещаете несколько сайтов на базе Jekyll под одним и тем же именем пользователя GitHub, вам придется использовать страницы проекта вместо страниц пользователя. По сути, вы переименовываете репозиторий во что-то другое, кроме USERNAME.github.io , и создаете ветку gh-pages из master . Более подробную информацию о том, как это работает, можно найти в документации GitHub.
Если вы разветвили или загрузили репозиторий so-simple-theme вы можете безопасно удалить следующие файлы и папки:
.githubdocsexample.editorconfig.gitattributesbanner.jsCHANGELOG.mdGemfilejekyll-theme-so-simple.gemspecpackage.jsonRakefileREADME.mdREADME-OLD.mdscreenshot.pngЕсли вы используете Ruby Gem или удаленную версию темы So Simple, обновление пройдет довольно безболезненно.
Чтобы проверить, какую версию вы сейчас используете, просмотрите исходный код созданного вами сайта, и вы увидите что-то похожее на:
<!--
So Simple Jekyll Theme 3.0.0
Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
-->
Он будет находиться вверху каждого файла .html , /assets/css/main.css и /assets/js/main.js .
Просто запустите bundle update , если вы используете Bundler (есть Gemfile ), или gem update jekyll-theme-so-simple если нет.
Убедитесь, что вам назначена последняя версия в _config.yml
remote_theme: "mmistakes/[email protected]"
Примечание. Если @xxx опущен, будет использоваться текущая master ветка темы. Рекомендуется «заблокировать» remote_theme в определенной версии, чтобы избежать внесения критических изменений на ваш сайт.
Следующий шаг потребует перестройки вашего сайта GitHub Pages, чтобы он мог получать последние обновления тем. Этого можно добиться, разместив коммит в репозитории GitHub.
Пустой коммит тоже выполнит свою работу, если в данный момент вам нечего отправлять:
git commit --allow-empty -m "Force rebuild of site"
Если вы хотите получить максимальную отдачу от рабочего процесса Jekyll + GitHub Pages, вам необходимо использовать Git. Чтобы получить обновления темы вручную, вы должны сначала убедиться, что имеется вышестоящий пульт дистанционного управления. Если вы разветвили репозиторий темы, то, скорее всего, все готово.
Чтобы дважды проверить, запустите git remote -v и убедитесь, что вы можете получить данные из origin https://github.com/mmistakes/so-simple-theme.git .
Чтобы добавить его, вы можете сделать следующее:
git remote add upstream https://github.com/mmistakes/so-simple-theme.git
Теперь вы можете получить любые коммиты, сделанные в master ветке темы, с помощью:
git pull upstream master
В зависимости от количества настроек, которые вы сделали после разветвления, могут возникнуть конфликты слияния. Обработайте все конфликтующие файлы с флагами Git, проиндексируйте изменения, которые вы хотите сохранить, а затем зафиксируйте их.
Другой способ работы с обновлениями — загрузка темы — замена макетов, включений и ресурсов более новыми вручную. Чтобы быть уверенным, что вы не пропустите ни одного изменения, просмотрите историю изменений темы, чтобы увидеть, что изменилось.
Вот краткий контрольный список важных папок/файлов, о которых вам следует помнить:
| Имя | |
|---|---|
_layouts | Заменить все. Примените изменения, если вы настроили какие-либо макеты. |
_includes | Заменить все. Примените изменения, если вы настроили какие-либо включения. |
assets | Заменить все. Примените изменения, если вы настроили таблицы стилей или сценарии. |
_sass | Заменить все. Примените изменения, если вы настроили частичные файлы Sass. |
_data/navigation.yml | Безопасно хранить. Убедитесь, что не было никаких серьезных структурных изменений или дополнений. |
_data/text.yml | Безопасно хранить. Убедитесь, что не было никаких серьезных структурных изменений или дополнений. |
_config.yml | Безопасно хранить. Убедитесь, что не было никаких серьезных структурных изменений или дополнений. |
Примечание. Если вы не видите последнюю версию, обязательно очистите кеши браузера и CDN. В зависимости от среды вашего хостинга старые версии файлов /assets/css/main.css , /assets/js/main.min.js или *.html могут кэшироваться.
Макеты, включения, частичные файлы Sass и файлы данных размещаются в местах по умолчанию. Таблицы стилей и сценарии можно найти в assets , а также в нескольких файлах, связанных с разработкой, в корневом каталоге проекта.
Обратите внимание: если вы установили So Simple с помощью Ruby Gem или методов удаленной темы, файлы тем, найденные в /_layouts , /_includes , /_sass и /assets будут отсутствовать в вашем проекте. Это нормально, поскольку они идут в комплекте с драгоценным камнем jekyll-theme-so-simple .
├── _data # data files
| ├── navigation.yml # navigation bar links
| └── text.yml # theme text
├── _includes # theme includes
├── _layouts # theme layouts (see below for usage)
├── _sass # Sass partials
├── assets
| ├── css
| | └── main.scss
| └── js
| └── main.min.js
├── _config.yml # sample configuration
└── index.md # sample home page (recent posts/not paginated)
После создания Gemfile и установки темы вам необходимо добавить и отредактировать следующие файлы:
_config.yml/_data/navigation.yml/_data/text.ymlindex.mdПримечание. Обратитесь к документации по нумерации страниц ниже, чтобы узнать, как включить ее на домашней странице.
jekyll new Использование jekyll new поможет вам быстрее приступить к работе.
Отредактируйте файлы Gemfile и _config.yml следуя приведенному выше руководству по установке и приведенному ниже руководству по настройке, затем создайте _data/text.yml как указано ранее.
Настройка элементов всего сайта ( locale , title , description , url , logo , author и т. д.) происходит в _config.yml вашего проекта. Дополнительную информацию см. в примере конфигурации в этом репозитории.
| Имя | Описание | Пример |
|---|---|---|
locale | Основной язык сайта. | "en-us" |
title | Название сайта. | "My Awesome Site" |
description | Краткое описание. | "This is my site, it is awesome." |
baseurl | Используется для тестирования веб-сайта под тем же базовым URL-адресом, на котором он будет развернут. | /my-base-path |
url | Полный URL вашего сайта. | "https://your-site.com" |
logo | Путь к логотипу всего сайта, используемому в шапке. | /images/your-logo.png |
Для изменения цветовой палитры темы доступны три скина (по умолчанию, светлый и темный).
default.css | light.css | dark.css |
|---|---|---|
skin : " /assets/css/skins/default.css "
skin : " /assets/css/skins/light.css "
skin : " /assets/css/skins/dark.css "Чтобы использовать собственный скин, отличный от предоставленного:
/assets/css/skins/default.scss в свой локальный репозиторий.skin в _config.yml , чтобы он ссылался на этот новый файл скина .css . site.locale используется для объявления основного языка для каждой веб-страницы на сайте.
Пример: locale: "en-US" устанавливает атрибут lang для сайта в соответствии с английским стилем США, а en-GB будет соответствовать стилю английского языка Соединенного Королевства. Коды стран являются необязательными, также допускается более короткий вариант locale: "en" . Чтобы найти коды вашего языка и страны, проверьте эту справочную таблицу.
Правильная настройка языкового стандарта важна для сопоставления локализованного текста, найденного в файле текстовых данных.
Примечание. По умолчанию в теме используется текст на английском языке ( en , en-US , en-GB ). Если вы измените локаль в _config.yml на что-то другое, обязательно добавьте соответствующий ключ локали и переведенный текст в _data/text.yml .
Базовое имя хоста и протокол вашего сайта. Если вы размещаете страницы GitHub, это будет что-то вроде url: "https://github.io.mmistakes" или url: "https://your-site.com" если у вас есть собственное доменное имя.
GitHub Pages теперь требует https:// для новых сайтов, поэтому помните об этом при настройке URL-адреса, чтобы избежать предупреждений о смешанном контенте.
Примечание. Jekyll переопределяет значение url на http://localhost:4000 при локальном запуске jekyll serve в процессе разработки. Если вы хотите избежать такого поведения, установите JEKYLL_ENV=production чтобы принудительно запустить среду в производство.
Эта опция вызывает всевозможную путаницу в сообществе Jekyll. Если вы не размещаете свой сайт на странице проекта GitHub или в подпапке (например, /blog ), не связывайтесь с ним.
Демо-сайт So Simple размещен на GitHub по адресу https://mmistakes.github.io/so-simple-theme. Чтобы правильно установить этот базовый путь, я бы использовал url: "https://mmistakes.github.io" и baseurl: "/so-simple-theme" .
Для получения дополнительной информации о том, как правильно использовать site.url и site.baseurl по замыслу сопровождающих Jekyll, прочтите сообщение Паркера Мура на эту тему.
Примечание. При использовании baseurl не забудьте включить его как часть путей ссылок и ресурсов в своем контенте. Значения url: и baseurl: "/blog" сделают ваш локальный сайт видимым по адресу http://localhost:4000/blog, а не http://localhost:4000. Вы можете либо добавить все пути к своим ресурсам и внутренним ссылкам с помощью {{ site.baseurl }} либо использовать relative_url Jekyll.
Чтобы использовать примеры значений над следующим путем к изображению {{ '/images/my-image.jpg' | relative_url }} будет корректно выводиться как http://localhost:4000/blog/images/my-image.jpg .
Без фильтра relative_url этот путь к ресурсу отсутствовал бы /blog , и на вашей странице было бы неработающее изображение.
Вы можете изменить формат даты по умолчанию, указав date_format в _config.yml . Он принимает любой стандартный формат даты Liquid.
Например, значение по умолчанию "%B %-d, %Y" можно изменить следующим образом:
date_format : " %Y-%m-%d " Включите фрагменты примерного времени чтения для всего сайта с помощью read_time: true . В качестве значения по умолчанию установлено 200 слов в минуту, которое можно изменить с words_per_minute в файле _config.yml .
read_time : true
words_per_minute : 200Включите MathJax (движок отображения математики на JavaScript) для всего сайта с помощью
mathjax :
enable : true combo опция позволяет вам выбрать комбинацию компонентов MathJax — по умолчанию используется «tex-svg». Опция tags позволяет управлять нумерацией уравнений: доступны следующие варианты: «ams» (по умолчанию), «все» и «нет».
Пример конфигурации:
mathjax :
enable : true # MathJax equations, e.g. true, false (default)
combo : " tex-svg " # "tex-svg" (default), "tex-mml-chtml", etc.
tags : " ams " # "none", "ams" (default), "all" Легко используйте Google Fonts на своем сайте, заменив соответствующим образом name и weights шрифта. Рекомендуемые сочетания шрифтов следующие:
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " Примечание. Если используются другие семейства шрифтов, обязательно добавьте, а затем переопределите следующие переменные SCSS в /assets/css/main.scss значениями font-family , предоставленными Google.
$serif-font-family : " Lora " , serif ;
$sans-serif-font-family : " Source Sans Pro " , sans-serif ;
$monospace-font-family : Menlo, Consolas, Monaco, " Courier New " , Courier ,
monospace ;
$base-font-family : $sans-serif-font-family ;
$headline-font-family : $sans-serif-font-family ;
$title-font-family : $serif-font-family ;
$description-font-family : $serif-font-family ;
$meta-font-family : $serif-font-family ;Дополнительную информацию о переопределении переменных темы по умолчанию см. в документации по таблице стилей ниже.
Разбейте основной список сообщений на главной странице на несколько страниц, включив нумерацию страниц.
Включите плагин jekyll-paginate в свой Gemfile .
group :jekyll_plugins do
gem "jekyll-paginate"
end Добавьте jekyll-paginate в массив plugins (ранее gems ) в файле _config.yml и следующие настройки нумерации страниц:
paginate : 10 # amount of posts to show per page
paginate_path : /page:num/ Создайте index.html (или переименуйте index.md ) в корне вашего проекта и добавьте следующее вступление:
layout : home
paginate : true Чтобы индексировать полное содержимое ваших документов для использования на странице поиска, установите для search_full_content значение true в _config.yml :
search_full_content : true Примечание. Большое количество сообщений приведет к увеличению размера поискового индекса, что повлияет на производительность загрузки страницы. Установка для search_full_content значения false (по умолчанию) ограничивает индексацию первыми 50 словами содержимого тела.
По умолчанию категории и теги, добавленные к сообщению, не связаны со страницами архива таксономии. Чтобы включить это поведение и ссылаться на страницы с сообщениями, сгруппированными по категориям или тегам, добавьте следующее:
category_archive_path : " /categories/# "
tag_archive_path : " /tags/# " Эти пути должны имитировать постоянные ссылки, используемые для страниц архива категорий и тегов . # в конце необходим для указания правильного раздела таксономии на страницах.
Например, если вы хотите создать categories.md со следующим вступительным словом:
title : Categories Archive
layout : categories
permalink : /foo/ Вам нужно будет изменить category_archive_path на "/foo/# , чтобы ссылки на категории работали правильно.
Примечание. Вы можете создать отдельные страницы категорий и тегов вручную с помощью layout: category и layout: tag . Или используйте плагины, такие как jekyll-archives или jekyll-paginate-v2, для их автоматического создания.
Если у вас есть учетная запись Disqus , вы можете отображать раздел комментариев под каждым сообщением.
Чтобы включить комментарии Disqus, добавьте свое короткое имя Disqus в файл _config.yml вашего проекта:
disqus :
shortname : my_disqus_shortname Комментарии появляются в рабочей среде только при создании со следующим значением среды: JEKYLL_ENV=production , чтобы избежать загрязнения вашей учетной записи Disqus содержимым localhost .
Если вы не хотите отображать комментарии к определенному сообщению, вы можете отключить их, добавив comments: false в начало сообщения.
Чтобы включить Google Analytics , добавьте свой идентификатор отслеживания в _config.yml следующим образом:
google_analytics : UA-NNNNNNNN-N Как и в комментариях Disqus выше, скрипт отслеживания Google Analytics будет отображаться в рабочей среде только при использовании следующего значения среды: JEKYLL_ENV=production .
Для получения дополнительных параметров конфигурации обязательно обратитесь к документации: jekyll-seo-tag , jekyll-feed , jekyll-paginate и jekyll-sitemap .
Эта тема предоставляет следующие макеты, которые вы можете использовать, установив вступительную часть layout на каждой странице, например:
---
layout : name
---layout: default Этот макет обрабатывает всю основную структуру страницы, размещая содержимое страницы между элементами верхнего и нижнего колонтитула. Все остальные макеты наследуют этот и предоставляют дополнительные стили и функции внутри блока {{ content }} .
layout: postЭтот макет включает в себя следующую вступительную часть:
| Имя | Тип | Описание |
|---|---|---|
image | Нить | Путь к большому изображению, связанному с публикацией. Также используется для OpenGraph, Twitter Cards и миниатюр фидов сайтов, если они включены. Рекомендуемые размеры изображений. |
image.path | Нить | То же, что и выше. Используется, когда объекту image также необходимо назначить thumbnail или caption . |
image.caption | Нить | Описывает изображение или указывает авторство. Уценка разрешена. |
author | Объект или строка | Укажите name автора поста, picture , twitter , links и т. д. |
comments | логическое значение | Отключить комментарии с comments: false . |
share | логическое значение | Добавьте ссылки на социальные сети в публикацию с помощью share: true . |
Пример публикации изображения:
image :
path : /images/post-image-lg.jpg
thumbnail : /images/post-image-th.jpg
caption : " Photo credit [Unsplash](https://unsplash.com/) " Примечание. Вводная часть image.feature устарела, чтобы полностью поддерживать jekyll-seo-tag. Если вы не используете thumbnail или caption изображение публикации можно более кратко обозначить как image: /images/your-post-image.jpg .
Пример автора сообщения:
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe Примечание. Информацию об авторе можно централизовать в _data/authors.yml , выполнив следующие действия в начале документа:
author : johndoe С соответствующим ключом автора в _data/authors.yml :
johndoe :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe Примечание: рекомендуемый размер author.picture : 150 x 150 пикселей.
Чтобы определить, какие ссылки отображаются на боковой панели автора, используйте authors.links в _config.yml или /_data/authors.yml .
| Имя | Описание |
|---|---|
title | Описывает ссылку. Не видно, используется в целях доступности. |
url | URL-адрес, на который указывает ссылка. |
icon | Соответствует значку Font Awesome, например, fab fa-twitter-square . |
Пример:
author :
links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : Instagram
url : https://instagram.com/username
icon : fab fa-instagram
- title : GitHub
url : https://github.com/username
icon : fab fa-github-squareПримечание. Чтобы полностью отключить авторские ссылки, используйте:
author :
links : falselayout: page Визуально этот макет выглядит и действует аналогично layout: post со следующими отличиями.
Макет страницы формирует основу для нескольких других макетов, таких как home , posts , categories , tags , collection , category , tag и search .
layout: home Этот макет содержит ту же вступительную часть, что и layout: page , с добавлением следующего:
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), gridЕсли нумерация страниц не включена, на странице по умолчанию отображаются 10 последних сообщений. Чтобы изменить количество отображаемых сообщений, назначьте предельное значение, добавив следующее в заголовок страницы.
posts_limit : 5 По умолчанию сообщения отображаются в виде списка. Чтобы перейти к сеточному виду, добавьте entries_layout: grid в начало страницы.
layout: posts В этом макете отображаются все сообщения, сгруппированные по году их публикации. Он содержит ту же вступительную часть, что и layout: page .
По умолчанию сообщения отображаются в виде списка. Чтобы перейти к сеточному виду, добавьте entries_layout: grid в начало страницы.
layout: categories В этом макете отображаются все сгруппированные категории сообщений. Он содержит ту же вступительную часть, что и layout: page .
По умолчанию сообщения отображаются в виде списка. Чтобы перейти к сеточному виду, добавьте entries_layout: grid в начало страницы.
layout: tags В этом макете отображаются все сообщения, сгруппированные по тегам. Он содержит ту же вступительную часть, что и layout: page .
По умолчанию сообщения отображаются в виде списка. Чтобы перейти к сеточному виду, добавьте entries_layout: grid в начало страницы.
layout: collection В этом макете отображаются все документы, сгруппированные по определенной коллекции. Он содержит ту же вступительную часть, что и layout: page с добавлением следующего:
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse Чтобы создать страницу, показывающую все документы в коллекции recipes , вы должны создать recipes.md в корне вашего проекта и добавить следующее:
title : Recipes
layout : collection
permalink : /recipes/
collection : recipes По умолчанию документы отображаются в виде списка. Чтобы перейти к сеточному виду, добавьте entries_layout: grid в начало страницы. Если вы хотите отсортировать коллекцию по названию, добавьте sort_by: title . Если вам нужна обратная сортировка, добавьте sort_order: reverse . Если вы просто ищете список, в котором показаны названия рецептов (без выдержек), добавьте show_excerpts: false .
layout: category В этом макете отображаются все сообщения, сгруппированные по определенной категории. Он содержит ту же вступительную часть, что и layout: page с добавлением следующего:
taxonomy : # category name
entries_layout : # list (default), grid По умолчанию сообщения отображаются в виде списка. Чтобы перейти к сеточному виду, добавьте entries_layout: grid в начало страницы.
Чтобы создать страницу, показывающую все сообщения, отнесенные к категории foo вы должны создать foo.md в корне вашего проекта и добавить следующее:
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foolayout: tag В этом макете отображаются все публикации, сгруппированные по определенному тегу. Он содержит ту же вступительную часть, что и layout: page с добавлением следующего:
taxonomy : # tag name
entries_layout : # list (default), grid По умолчанию сообщения отображаются в виде списка. Чтобы перейти к сеточному виду, добавьте entries_layout: grid в начало страницы.
Чтобы создать страницу, показывающую все сообщения, присвоенные тегу foo bar вы должны создать foo-bar.md в корне вашего проекта и добавить следующее:
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo barlayout: searchЭтот макет отображает форму поиска и отображает связанные страницы на основе запроса.
Индекс содержимого страницы: title , excerpt , content (если включено), categories , tags и url .
Если вы хотите исключить определенные страницы/сообщения из индекса поиска, установите для флага поиска значение false в их начале.
search : false Чтобы индексировать все содержимое ваших документов, установите для search_full_content значение true в _config.yml :
search_full_content : true Примечание. Большое количество публикаций приведет к увеличению размера поискового индекса, что повлияет на производительность загрузки страницы. Установка для search_full_content значения false (по умолчанию) ограничивает индексацию первыми 50 словами содержимого тела.
Рекомендуемые размеры изображений в пикселях:
| Изображение | Описание | Размер |
|---|---|---|
site.logo | В шапке используется логотип всего сайта. | 200 x 200 |
page.image.path | Большое изображение документа во всю ширину. | Высокие изображения будут смещать контент вниз по странице. 1600 x 600 — хороший средний размер, к которому стоит стремиться. |
page.image | Сокращение для page.image.path при использовании отдельно (без thumbnail , caption и других переменных). | То же, что и page.image.path |
page.image.thumbnail | Небольшое изображение документа, используемое в виде сетки. | 400 x 200 |
author.picture | Фото автора в боковом меню поста. | 150 x 150 |
Чтобы изменить текст, встречающийся в теме, скопируйте следующий файл /_data/text.yml и настройте его по мере необходимости.
При добавлении новых текстов убедитесь, что ключи соответствуют этим кодам языка/страны, которые могут использоваться для site.locale .
Чтобы определить, на какие страницы есть ссылки в верхней навигации:
Создайте файл /_data/navigation.yml .
Добавьте страницы в том порядке, в котором вы хотите, чтобы они отображались:
- title : Posts
url : /posts/
- title : Categories
url : /categories/
- title : External Page
url : https://whatever-site.com/page.html
- title : Search
url : /search/Примечание. Длинные заголовки или большое количество ссылок могут привести к тому, что панель навигации разобьется на несколько строк, особенно на небольших экранах. Помните об этом при разработке основной навигации вашего сайта.
Информация об авторе используется в качестве метаданных для публикации «построчно» и распространяет поле creator сводных карточек Twitter со следующим вводным элементом в _config.yml :
author :
name : John Doe
twitter : johndoetwitter
picture : /images/johndoe.pngИнформацию об авторе всего сайта можно переопределить во вступительной части документа таким же образом:
author :
name : Jane Doe
twitter : janedoetwitter
picture : /images/janedoe.png Или указав соответствующий ключ во вступительной части документа, который существует в site.data.authors . Например, в начале документа у вас есть следующее:
author : megaman И у вас есть следующее в _data/authors.yml :
megaman :
name : Mega Man
twitter : megamantwitter
picture : /images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /images/drlight.png В настоящее время author.picture используется только в layout: post . Рекомендуемый размер — 150 x 150 пикселей.
Ссылки в нижнем колонтитуле и текст об авторских правах можно настроить.
Ссылки в нижнем колонтитуле устанавливаются в _config.yml под ключом footer_links .
| Имя | Описание |
|---|---|
title | Описывает ссылку. Не видно, используется в целях доступности. |
url | URL-адрес, на который указывает ссылка. |
icon | Соответствует значку Font Awesome 5, например, fab fa-twitter-square . |
Примеры:
footer_links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : GitHub
url : https://github.com/mmistakes
icon : fab fa-github-square
- title : Feed
url : atom.xml
icon : fas fa-rss-square Примечание. Чтобы полностью отключить ссылки в нижнем колонтитуле, используйте footer_links: false .
По умолчанию авторские права вставляют текущий год, site.title и слова "Powered by Jekyll & So Simple." Чтобы изменить это, добавьте copyright в ваш _config.yml следующим образом (уценка разрешена):
copyright : " This site is made with <3 by *me, myself, and I*. " Вы можете думать об этих помощниках Jekyll как о коротких кодах. Поскольку GitHub Pages не поддерживает большинство плагинов, пользовательские теги отсутствуют. Вместо этого тема использует возможности сделать что-то подобное.
Встраивайте видео с YouTube/Vimeo или любой другой контент iframe , размер которого автоматически подстраивается под ширину родительского элемента.
| Параметр | Необходимый | Описание |
|---|---|---|
url | Да | URL-адрес видео или iframe, например https://www.youtube.com/watch?v=-PVofD2A9t8 . |
ratio | Необязательный | Соотношение содержимого видео или iframe. 21:9 , 16:9 , 4:3 , 1:1 . Если соотношение не задано, используется соотношение 16:9 . |
Пример:
{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}Чтобы включить автоматически создаваемое оглавление для сообщений и страниц, добавьте следующий помощник там, где вы хотите, чтобы он отображался.
{% include toc %}Итак, Simple 3 — это серьезное переписывание всей темы. Ниже кратко изложены наиболее заметные изменения, за которыми следуют более конкретные изменения.
Можно с уверенностью сказать, что вы, вероятно, захотите отказаться от всех файлов _layouts , _includes , _sass , .css и .js из версии 2 и использовать либо гем Ruby, либо параметры удаленной установки темы.
_layouts , _includes , _sass и JavaScript были перестроены.site.url и site.baseurl с использованием фильтров relative_url и absolute_url ./_includes/open-graph.html заменен на jekyll-seo-tag .tags и posts ) для упрощения использования.404.mdatom.xml заменен на jekyll-feed .favicon.ico и favicon.png по умолчанию.float чтобы в браузерах, которые не поддерживают отображение, вещи не выглядели слишком сломанными display: grid и флексбокс. Формат изменен с en_US (с подчеркиванием) на en-US с дефисом.
site.owner теперь называется site.author для лучшей поддержки jekyll-seo-tag и jekyll-feed.
| v2 | v3 |
|---|---|
site.owner.name | site.author.name |
site.owner.avatar | site.author.picture |
site.owner.email | site.author.email |
site.owner.twitter | site.twitter |
site.owner.google.analytics | устарел , заменен на jekyll-seo-tag |
site.owner.bing-verify | устарел , заменен на jekyll-seo-tag |
site.owner.google.analytics теперь называется site.google_analytics . Дополнительную информацию смотрите в документации.
site.owner.disqus-shortname теперь называется site.disqus.shortname . Дополнительную информацию смотрите в документации.
Чтобы отключить комментарии к определенному сообщению, добавьте в его начало комментарий comments: false .
search_omit переименован в search . Чтобы исключить публикацию или страницу из поиска, вместо этого добавьте в начало заголовка search: false .
При назначении путей к изображениям для таких вещей, как site.logo , page.image.path , author.picture и т. д. теперь требуется полный относительный или абсолютный путь.
В So Simple v2 все изображения помещались в /images/ и назначались в начале только с именем файла. Чтобы изображения правильно загружались, теперь вам необходимо добавить ко всем путям /images/ ... если вы храните там изображения, например /images/your-image.jpg .
Для лучшей поддержки плагинов Jekyll, таких как jekyll-seo-tag, jekyll-feed и jekyll-sitemap, большинство ключей image были переименованы. Соответственно откорректируйте вступительную часть всех ваших сообщений и страниц.
| v2 | v3 |
|---|---|
image.feature | image.path |
image.thumb | image.thumbnail |
image.credit | image.caption (разрешена уценка) |
image.creditlink | устарело, вместо этого используйте **image.caption** |
Пост со следующим содержанием v2:
image :
feature : feature-image-filename.jpg
thumb : thumb-image-filename.jpg
credit : Michael Rose
creditlink : https://mademistakes.comБудет преобразовано в следующую вступительную часть версии 3:
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "Грубые шаги по переходу со стандартной вилки So Simple v2 (без изменений) на последнюю версию.
Удалите _includes/ , _layouts/ , _sass/ , jshintrc , Gruntfile.js и search.json .
Отредактируйте Gemfile для методов установки Ruby gem или GitHub Pages и следуйте этим инструкциям.
Добавьте следующие шрифты Google в _config.yml :
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " Отредактируйте _config.yml обращая пристальное внимание на те ключи, которые были переименованы или имеют новые требования к относительному пути. locale , logo и owner — хорошие места для начала.
Переименуйте все экземпляры image.feature , image.thumb и image.credit в сообщениях/страницах в соответствии с изменениями изображения, указанными выше.
Удалите содержимое тела в index.html и измените layout: page на layout: home . При необходимости настройте нумерацию страниц.
Удалите содержимое тела в /search/index.md и измените layout: page на layout: search .
Удалите содержимое тела в /tags/index.md и измените layout: page на layout: tags .
Удалите содержимое тела в /articles/index.md и измените layout: page на layout: category и добавьте taxonomy: articles .
Удалите содержимое тела в /body/index.md и измените layout: page на layout: category и добавьте taxonomy: blog .
Переименуйте modified вступление в сообщениях/страницах на last_modified_at для улучшения совместимости с плагинами, которые его поддерживают.
Добавьте tag_archive_path: "/tags/#" в _config.yml , чтобы активировать ссылки на теги на боковой мета-панели публикации.
Переименуйте avatar в picture в _data/authors.yml (и во всех заголовках сообщений/страниц) и отредактируйте пути, соответствующие изменениям пути к изображению, указанным выше.
При установке в качестве драгоценного камня Ruby или удаленной темы основные файлы темы ( _layouts , _includes , _sass , assets и т. д.) будут отсутствовать в вашем проекте.
Структуру, стиль и сценарии этой темы по умолчанию можно переопределить и настроить двумя следующими способами:
Файлы тем можно переопределить, поместив файл с тем же именем в каталог _includes или _layouts вашего проекта. Например:
_includes/social-share.html , создайте каталог _includes в своем проекте, скопируйте _includes/social-share.html из папки драгоценных камней So Simple в <your_project>/_includes и отредактируйте этот файл. Совет: чтобы найти файлы темы на вашем компьютере, запустите bundle show jekyll-theme-so-simple . Это возвращает расположение файлов темы на основе драгоценных камней.
Тема поставляется с двумя файлами, которые помогут внедрить пользовательскую разметку и контент в заранее определенные места.
| Описание | |
|---|---|
_includes/head-custom.html | Вставляется внутри элемента <head> для добавления метаданных, значков и т. д. |
_includes/footer-custom.html | Вставляется внутри элемента <footer> перед скриптами сайта и информацией об авторских правах. |
Чтобы переопределить Sass по умолчанию (расположенный в каталоге _sass темы), выполните одно из следующих действий:
Копируйте прямо из драгоценного камня So Simple
bundle show jekyll-theme-so-simple чтобы получить путь к нему)./assets/css/main.scss оттуда в <your_project> .<your_project>/assets/css/main.scss .Скопируйте из этого репо.
<your_project> .<your_project/assets/css/main.scss . Примечание. Чтобы настроить фактические части Sass, включенные в гем, вам необходимо скопировать все содержимое каталога _sass в <your_project> . Из-за того, как Jekyll в настоящее время импортирует эти файлы, все или ничего. Переопределение одного частичного Sass (или двух) не будет работать так же, как _includes и _layouts .
Чтобы внести базовые изменения в стиль темы, переменные Sass можно переопределить, добавив в <your_project>/assets/css/main.scss . Например, чтобы изменить цвет акцента, используемый во всей теме, добавьте перед всеми строками @import следующее:
$accent-color : tomato ;Чтобы переопределить встроенный в тему JavaScript по умолчанию, выполните одно из следующих действий:
Копируйте прямо из драгоценного камня So Simple
bundle show jekyll-theme-so-simple чтобы получить путь к нему)./assets/js/main.js оттуда в <your_project> .<your_project>/assets/js/main.js .Скопируйте из этого репо.
/assets/js/main.js в <your_project> .<your_project>/assets/js/main.js . Файл /assets/js/main.min.js темы создан на основе плагинов jQuery и других скриптов, найденных в /assets/js/ .
├── assets
| ├── js
| | ├── lunr # Lunr search plugin
| | | ├── lunr.xx.js # Lunr language plugins
| | | ├── ...
| | | ├── lunr.min.js
| | | └── lunr.stemmer.support.min.js
| | ├── plugins
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
| | | ├── lity.min.js # responsive lightbox
| | | └── table-of-contents.js # table of contents toggle
| | ├── main.js # jQuery plugin settings and other scripts
| | ├── main.min.js # concatenated and minified scripts
| | ├── search-data.json # search index used by Lunr
Чтобы изменить или добавить свои собственные сценарии, включите их в assets/js/main.js , а затем пересоберите их с помощью npm run build:js . Более подробную информацию смотрите ниже.
Если вы добавляете дополнительные скрипты в /assets/js/plugins/ и хотите, чтобы они были объединены с остальными, обязательно обновите скрипт uglify в package.json . То же самое касается скриптов, которые вы удаляете.
Вы также можете добавить сценарии к элементам <head> или закрывающим элементам </body> , добавив пути к следующим массивам в _config.yml .
Пример:
head_scripts :
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts :
- /assets/js/your-custom-footer-script.js Примечание. Если вы назначите пути к footer_scripts файл темы /assets/js/main.min.js будет деактивирован. Этот скрипт включает плагины и другие скрипты, которые перестанут работать, если вы специально не добавите их в массив footer_scripts .
В теме используется Font Awesome SVG с версией JS для иконографии. Наиболее заметные места, где появляются эти значки, — это боковая панель автора и ссылки в нижнем колонтитуле.
Чтобы настроить среду для разработки этой темы:
cd в /example и запустите bundle install .Чтобы протестировать тему локально по мере внесения в нее изменений:
cd в корневую папку репозитория (например, jekyll-theme-so-simple ).bundle exec rake preview и откройте в браузере http://localhost:4000/example/ . Это запустит сервер Jekyll, используя файлы темы и содержимое каталога example/ . По мере внесения изменений обновите браузер, чтобы увидеть любые изменения.
Чтобы уменьшить зависимости, для сборки main.min.js используется набор скриптов npm вместо средств запуска задач, таких как Gulp или Grunt. Если вам больше нравятся эти инструменты, то обязательно используйте их.
Чтобы начать:
cd в корень вашего проекта. Примечание. Если вы обновили предыдущую версию темы, обязательно скопируйте package.json перед запуском npm install . Вам также может потребоваться удалить каталог node_modules .
Если все пойдет хорошо, выполнение npm run build:js сожмет/объединит main.js и все скрипты плагинов в /assets/js/main.min.js .
Нашли опечатку в документации? Запрашиваете функцию или исправление ошибки? Перед отправкой проблемы просмотрите открытые и закрытые проблемы, чтобы избежать дублирования.
Запросы на извлечение также приветствуются. Если вы впервые, возможно, будет полезно прочитать GitHub Flow.
Если ваш вклад добавляет или изменяет поведение темы, обязательно обновите документацию и/или образец содержимого. Документация находится в README.md, а примеры сообщений, страниц и коллекций — в папках docs и example .
При отправке запроса на включение:
master и дайте ей осмысленное имя (например, my-awesome-new-feature ).Майкл Роуз
Лицензия MIT (MIT)
Авторские права (c) 2013–2019 г. Майкл Роуз и участники
Настоящим бесплатно любому лицу, получившему копию этого программного обеспечения и связанных с ним файлов документации («Программное обеспечение»), предоставляется разрешение на работу с Программным обеспечением без ограничений, включая, помимо прочего, права на использование, копирование, изменение, объединение. публиковать, распространять, сублицензировать и/или продавать копии Программного обеспечения, а также разрешать лицам, которым предоставлено Программное обеспечение, делать это при соблюдении следующих условий:
Вышеупомянутое уведомление об авторских правах и данное уведомление о разрешении должны быть включены во все копии или существенные части Программного обеспечения.
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ, ГАРАНТИЯМИ ТОВАРНОЙ ЦЕННОСТИ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ И НЕНАРУШЕНИЯ ПРАВ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ОБЛАДАТЕЛИ АВТОРСКИХ ПРАВ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГУЮ ОТВЕТСТВЕННОСТЬ, БУДЬ В ДЕЙСТВИЯХ ПО КОНТРАКТУ, ПРАВОНАРУШЕНИЮ ИЛИ ДРУГИМ ОБРАЗОМ, ВОЗНИКАЮЩИЕ ОТ, ИЗ ИЛИ В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ДРУГИМИ СДЕЛКАМИ, ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ.
So Simple включает в себя Font Awesome, авторские права (c) Дэйва Ганди, 2017 г. Font Awesome распространяется на условиях лицензии SIL OFL 1.1 и MIT.
So Simple включает фотографии из Unsplash.
So Simple включает фотографии из WeGraphics.
So Simple включает точку останова. Точка останова распределяется в соответствии с условиями лицензий MIT/GPL.
Так просто включает в себя гладкий свиток JQuery, Copyright (C) 2017 Карл Суедберг. Странная свиток JQuery распределяется в соответствии с условиями лицензии MIT.
Так просто включает в себя LUNR, Copyright (C) 2017 Oliver Nightingale. LUNR распространяется в соответствии с условиями лицензии MIT.
Так просто включает в себя Lity, Copyright (C) 2015-2016, Ян Соргалла. Лити распределяется в соответствии с условиями лицензии MIT] (http://opensource.org/licenses/mit).
Так просто включает в себя содержимое переключения, Copyright (C) 2017 Тимоти Б. Смит. Соглашение о переключении распределяется в соответствии с условиями лицензии MIT] (http://opensource.org/licenses/mit).
