Слияние кода завершено, страница обновится автоматически
Руководство по созданию блога было адаптировано от Hux.
Для более подробной информации нажмите здесь «Быстрое создание личного блога с помощью GitHub Pages» или wiki.
* [Среда](#среда)
* [Начало](#начало)
* [Запись статьи](#запись-статьи)
Если вы установили jekyll, вам достаточно ввести команду jekyll serve или jekyll s в командной строке, чтобы запустить сервер и просмотреть тему в браузере, открыв адрес http://127.0.0.1:4000/. Изменения будут отражаться в реальном времени (необходимо принудительно обновить страницу браузера).
Вы можете легко начать создание своего блога, модифицировав файл _config.yml:
# Настройки сайта
title: JS Blog # Заголовок вашего блога
SEOTitle: Я — Цзясу | JS Blog # SEO-заголовок
description: "Инженер по компьютерам." # Любое описание
```# Настройки SNS
github_username: Haiezan # Ваш аккаунт в GitHub
jianshu_username: Haiezan # Ваши ID в JianShu.
# Настройки сборки
# paginate: 10 # Сколько статей вы хотите поместить на одну страницу
Дополнительные параметры конфигурации Jekyll можно найти на официальном сайте Jekyll [официальный сайт Jekyll](http://jekyllrb.com/) или на его китайской версии [Jekyll Китайская версия](http://jekyllcn.com/).
## Написание блоговых постов
Статьи, предназначенные для публикации, обычно находятся в формате **Markdown** здесь `_posts/`. Просто взгляните на этот шаблон статьи, чтобы понять, как это сделать.
Заголовок YAML файла выглядит так:```markdown
---
layout: post
title: Программа для расчета сечений на сжатие
subtitle: Решение задачи превышения допустимого значения расчета сечений на сжатие
date: 2019-04-14
author: JS
header-img: img/post-bg-earthquake.jpg
catalog: true
tags:
- превышение
- расчет сечений на сжатие
- соотношение сжатия и давления
---
```### Боковая панель
Смотрите справа:
Настройки боковой панели находятся в файле `_config.yml`, раздел `Sidebar settings`.
```markdown
# Настройки боковой панели
sidebar: true # Добавление боковой панели
sidebar-about-description: "Краткое описание о себе"
sidebar-avatar: /img/about-JS-photo.jpg # Ваш аватар, используйте абсолютный адрес. Обращайте внимание на регистр букв и расширение файла!
Боковая панель имеет адаптивное расположение. При ширине экрана менее 992px она перемещается вниз. Подробнее см. систему сеток Bootstrap Bootstrap Grid System.
Модуль Mini About Me будет отображаться под вашим аватаром и показывать все ваши социальные сети. Этот модуль также имеет адаптивное расположение. Когда размер экрана становится меньше 992px, он перемещается в нижнюю часть страницы, но немного меняется. Подробнее см. код.
Этот модуль был добавлен после просмотра сайта Medium с его крутыми рекомендациями тегов. Он теперь независимый и может быть представлен на всех страницах, включая главную и каждую статью.
# Отмеченные теги
featured-tags: true
featured-condition-size: 1 # Тег будет отмечен, если количество статей с этим тегом больше этого условия
Единственное что следует учесть — это условие featured-condition-size: если количество статей с данным тегом больше указанного значения, этот тег будет рекомендован на главной странице.Внутри имеется условие шаблона {% if tag[1].size > {{site.featured-condition-size}} %}, которое используется для фильтрации.### Социальные сети аккаунты
Введите ниже указанные социальные сети аккаунты, отсутствующие не будут отображаться в боковой панели. Добавлена новая ссылка на Jianshu, http://www.jianshu.com/u/e71990ada2fd.
# Настройки соцсетей
RSS: false
jianshu_username: jianshu_id
zhihu_username: username
/facebook_username: username
/github_username: username
# weibo_username: username
Блок с друзьями. Это будет отображаться во всех страницах.
Настройки находятся в файле _config.yml в разделе Friends, добавьте самостоятельно.
# Друзья
friends: [
{
title: "SAUSG_FAQ",
href: "https://haiezan.github.io/SAUSG_FAQ/"
},
{
title: "WCA",
href: "https://www.worldcubeassociation.org/"
},
{
title: "SimWe",
href: "http://forum.simwe.com/"
},
{
title: "Сайт строителей",
href: "http://www.civilcn.com/"
}
]
Оформление HTML5 слайдов:
Эта часть используется для оформления HTML формата слайдов, обычно используются такие как Reveal.js, Impress.js, Slides, Prezi и т.д. Я считаю, что современный блог не может обойтись без возможности добавления HTML слайдов!
iframe, внутри которого находится внешняя ссылка. Вы можете напрямую добавить это в шапку файла, подробнее см. пример yaml шапки ниже.```
Iframe автоматически изменяет размер в зависимости от устройства. Внутренние отступы остаются для возможности прокрутки на мобильных устройствах и добавления дополнительного контента.
### Комментарии
Блог поддерживает не только систему комментариев [Disqus](http://disqus.com), но также [Gitalk](https://gitalk.github.io/), которая поддерживает [синтаксис Markdown](https://guides.github.com/features/mastering-markdown/), круто~
#### Disqus
Преимущества: популярна международно, имеет простой и элегантный дизайн, позволяет получать уведомления по электронной почте при появлении новых комментариев;
Недостатки: требует регистрации аккаунта на Disqus, возможность делиться только через Facebook и Twitter, а также медленная скорость загрузки за "Стеной". Для получения более подробной информации можно посмотреть старую версию здесь [здесь](http://brucezhaor.github.io/about.html) в самом низу страницы.> Узел: Многие пользователи жалуются, что плагин Disqus не загружается, возможно, "Стена" снова повысила уровень защиты. В этом случае вам стоит воспользоваться прокси.
**Использование:**
**Сначала** вам следует зарегистрироваться в системе Disqus. **Не используйте мой аккаунт!**
**Затем** вам нужно будет указать ваш логин в YAML-шапке:
```markdown
# Комментарии
# Disqus (https://disqus.com/)
disqus_username: qiubaiying
Преимущества: Интерфейс чистый и минималистичный, использует API GitHub Issues для создания системы комментариев, позволяет входить с помощью учётной записи GitHub, поддерживает синтаксис Markdown — это очень круто для программистов.Недостатки: Настройка может быть сложной, каждый пост требует отдельной инициализации.
Использование:
Просмотрите эту статью: Добавление Gitalk как системы комментариев для вашего блога
Анализ сайта теперь поддерживает Baidu Analytics и Google Analytics. Вам потребуется создать учетную запись на официальном сайте, а затем вставить полученный код:
# Baidu Analytics
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900
# Google Analytics
ga_track_id: 'UA-49627206-1' # Вы можете получить такой ID, зарегистрировав учетную запись на Google
ga_domain: huangxuan.me # По умолчанию значение равно auto, здесь используется имя домена, если у вас нет своего домена, замените его на auto.
Если вы любите экспериментировать, вы можете настроить этот шаблон самостоятельно.
Если вы понимаете код в папках _include/ и _layouts/ (это места расположения всего интерфейса), вы можете использовать синтаксис шаблонизатора Liquid, который используется в Jekyll, чтобы модифицировать или добавлять код для более креативной настройки интерфейса.
Каждую страницу блога можно украсить своим изображением. Примеры использования доступны в нескольких постах.Выбор изображения зависит от ваших вкусовых предпочтений. Каждый пост может иметь своё уникальное изображение; главное — чтобы изображение было достаточно широким и не слишком большим, чтобы быстро загружалось.> Лучше всего перед загрузкой сжать изображения. Для этого рекомендуется использовать программу ImageOptim, которая поможет сделать ваш блог ещё быстрее.
Однако важно помнить, что цвет шрифта в шаблоне — белый, поэтому фон лучше выбрать темный (серый или чёрный). Конечно, вы можете настроить цвет шрифта по своему желанию, но главное — возможность полностью настраивать свой блог с использованием GitHub Pages.### SEO Title
Заголовок для SEO моего блога — это «Блог BY», но я хочу, чтобы при поиске отображалось как «Блог BY | Блог Байюн». Для этого используется SEO Title.
SEO Title определяет содержание внутри тега <head><title>Заголовок</title></head> и заголовка для социальных сетей, который можно самостоятельно изменять.
После обновления Jekyll до версии 3.0.x, старый способ выделения кода Pygments больше не поддерживается. Теперь поддерживаются только выделители Rouge. Поэтому в файле конфигурации _config.yml следует заменить highlighter: rouge. Также необходимо добавить строку gems: [jekyll-paginate] в этот же файл.
Кроме того, потребуется обновление локальной среды Jekyll.
Для пользователей, использующих команду jekyll server, выполните следующие шаги:
gem update jekyll # Обновление Jekyllgem update github-pages # Обновление зависимых библиотекДля пользователей, использующих команду bundle exec jekyll server, после обновления Jekyll требуется выполнить команду bundle update для обновления зависимых библиотек.> Примечание:Можно использовать команду
jekyll -sдля локального тестирования конфигураций сайта, что повышает эффективность работы. Подробнее см. Jekyll.com.
Ссылки на документацию: Использование Jekyll с GitHub Pages & Обновление с версии 2.x до 3.x
Проект распространяется под лицензией MIT. Подробнее см. LICENSE.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )