Слияние кода завершено, страница обновится автоматически
Если вы установили Jekyll, то вам нужно только ввести jekyll serve или jekyll s в командной строке, чтобы просмотреть тему в локальном браузере. Введите http://127.0.0.1:4000/ для предварительного просмотра темы. Изменения в теме также будут отображаться в реальном времени (требуется жёсткая перезагрузка браузера).
Вы можете легко начать создавать свой собственный блог, настроив файл _config.yml:
# Site settings
title: BY Blog # Название вашего веб-сайта
SEOTitle: 记得要让着本宝宝的博客 | BY Blog # SEO заголовок
description: "Hey" # Просто напишите что-нибудь, чтобы описать это
# SNS settings
github_username: ckjcode # Ваш аккаунт на GitHub
jianshu_username: e71990ada2fd # Ваш ID на Jianshu.
# Build settings
# paginate: 10 # Вы хотите разместить несколько статей на одной странице
На официальном сайте Jekyll есть много других параметров, которые можно настроить, например, настройка формата ссылок на статьи... Адрес здесь: Jekyll — Official Site или Jekyll中文.
Статьи, которые вы хотите опубликовать, обычно размещаются в формате Markdown в каталоге _posts/. Вам просто нужно взглянуть на шаблон статьи в этой статье, и вы сразу поймёте, как его настроить.
Заголовок YAML выглядит следующим образом:
---
layout: post
title: 定时器 你真的会使用吗？
subtitle: iOS定时器详解
date: 2016-12-13
author: BY
header-img: img/post-bg-ios9-web.jpg
catalog: true
tags:
- iOS
- 定时器
---
Настройки находятся в файле _config.yml в разделе «Настройки боковой панели».
# Sidebar settings
sidebar: true # Добавить боковую панель
sidebar-about-description: "Простое описание вас самих"
sidebar-avatar: /img/avatar-by.jpg # Ваше большое изображение профиля, пожалуйста, используйте абсолютный путь. Обратите внимание: имена различаются по регистру! И расширение файла тоже
Боковая панель является адаптивной, и когда размер экрана меньше 992 пикселей, боковая панель перемещается вниз. Пожалуйста, обратитесь к системе сетки Bootstrap http://v3.bootcss.com/css/ для получения подробной информации.
Модуль Mini-About-Me будет отображаться под вашим аватаром и отображать все ваши учётные записи в социальных сетях. Это также адаптивный макет, который при уменьшении размера экрана перемещается вниз, но с небольшими изменениями. Пожалуйста, посмотрите код для деталей.
Этот модуль теперь является независимым и может отображаться на всех страницах, включая главную страницу и заголовки всех опубликованных статей.
# Избранные теги
featured-tags: true
featured-condition-size: 1 # Тег будет рекомендован, если количество статей, использующих этот тег, больше этого значения условия
Единственное, на что следует обратить внимание, это featured-condition-size: если количество статей с определённым тегом больше установленного значения условия, этот тег будет рекомендоваться на главной странице.
Существует внутренний шаблон условий {% if tag[1].size > {{site.featured-condition-size}} %}, который используется для фильтрации.
Введите свои учётные данные в социальных сетях ниже. Учётные записи, которых нет в списке, не будут отображаться на боковой панели. Недавно добавленный аккаунт Jianshu,
# Настройки SNS
RSS: false
jianshu_username: jianshu_id
zhihu_username: username
facebook_username: username
github_username: username
# weibo_username: username
Раздел «Друзья». Это будет отображаться на каждой странице.
Настройка находится в файле _config.yml в разделе «Друзья», добавьте его самостоятельно.
# Friends
friends: [
{
title: "BY Blog",
href: "https://ckjcode.gitee.io/"
}
]
HTML5 презентация макета:
Эта часть предназначена для использования презентаций HTML, таких как Reveal.js, Impress.js, Slides, Prezi и т. д. Я думаю, что современный блог не может обойтись без функции презентации слайдов~
Его основной принцип заключается в добавлении iframe и включении внешних ссылок. Вы можете напрямую написать его в файле заголовка, подробности см. в следующем формате YAML.
---
layout: keynote
iframe: "http://huangxuan.me/js-module-7day/"
---
Размер iframe автоматически регулируется на разных устройствах. Поля зарезервированы для того, чтобы пользователи мобильных устройств могли прокрутить вниз и добавить больше контента.
Блог поддерживает не только систему комментариев Disqus, но и
Примечание: некоторые фрагменты текста могут быть переведены неточно из-за особенностей исходного текста. Gitalk (https://gitalk.github.io/) — система комментариев, поддерживающая синтаксис Markdown (https://guides.github.com/features/mastering-markdown/), cool!
Плюсы: относительно популярен в мире, интерфейс солидный и лаконичный, если кто-то оставляет комментарий, вы получите уведомление в реальном времени, и вы можете ответить на него напрямую, просто ответив на электронное письмо;
Минусы: для комментирования необходимо зарегистрировать учётную запись Disqus, можно делиться только через Facebook и Twitter, а скорость загрузки внутри стены немного медленная. Если хотите узнать, как это выглядит, можете посмотреть предыдущую версию здесь (http://brucezhaor.github.io/about.html), внизу вы увидите.
Node: многие люди сообщают, что плагин Disqus не загружается, возможно, стена снова стала выше, при наличии условий можно просто перелезть через стену.
Использование:
# 评论系统
# Disqus（https://disqus.com/）
disqus_username: ChengKeJ
Плюсы: чистый и лаконичный интерфейс, использует API Github issue для создания плагина комментариев, использует учётные записи Github для входа и комментирования, поддерживает синтаксис Markdown, который очень крут для программистов.
Минусы: настройка немного сложна, и вам нужно инициализировать каждую статью.
Использование: обратитесь к моей статье: «Как добавить плагин Gitalk в блог» (http://ckjcode.gitee.io/2017/12/19/%E4%B8%BA%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0-Gitalk-%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6/).
Анализ веб-сайта, теперь поддерживающий Baidu Analytics и Google Analytics. Зарегистрируйтесь на официальном сайте, затем вставьте возвращённый код ниже:
# Baidu Analytics
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900
# Google Analytics
ga_track_id: 'UA-49627206-1' # 您使用Google账号注册一个就会给您一个这样的id
ga_domain: huangxuan.me # 默认的是 auto, 这里我是自定义了的域名，您如果没有自己的域名，需要改成auto。
Если вам нравится возиться, вы можете настроить этот шаблонный код.
Если вы понимаете файлы _include/ и _layouts/, вы можете использовать синтаксис Liquid (https://github.com/Shopify/liquid/wiki) движка шаблонов Jekyll, чтобы напрямую изменять/добавлять код для более индивидуального интерфейса!
Изображение заголовка каждой страницы блога можно выбрать самостоятельно. Посмотрите несколько примеров постов, и вы узнаете, как их настроить.
Выбор изображения заголовка полностью зависит от вашего личного вкуса. Каждая статья может иметь разное изображение, вы можете разместить то, что хотите, но убедитесь, что ширина достаточно большая, а размер не слишком большой, иначе загрузка будет медленной.
Рекомендуется сначала сжать загруженные изображения, здесь рекомендуется использовать программное обеспечение imageOptim для сжатия изображений, чтобы ваш блог взлетел.
Однако следует отметить, что заголовок этого шаблона белый, поэтому фон должен быть серым или чёрным, в общем, тёмный цвет подходит. Конечно, вы также можете настроить шрифт и цвет текста, в конце концов, используя Github Pages, вы можете полностью настроить свой собственный блог.
Мой заголовок блога — «BY Blog», но я хочу, чтобы при поиске отображалось «Помните, чтобы уступить место моему блогу | BY Blog», для этого требуется определение SEO Title.
На самом деле этот SEO Title определяет содержимое
<title> и многословного общего заголовка, которое вы можете изменить самостоятельно.Поскольку jekyll был обновлён до версии 3.0.x, оригинальная поддержка pygments для выделения кода была прекращена, и теперь поддерживается только один вид — rouge, поэтому вам необходимо изменить highlighter: rouge в файле _config.yml. Кроме того, вам также необходимо добавить gems: [jekyll-paginate] в файл _config.yml.
В то же время вам необходимо обновить локальную среду jekyll.
Пользователи jekyll server должны выполнить следующие действия:
gem update jekyll # обновить jekyllgem update github-pages #обновить зависимые пакетыПользователи bundle exec jekyll server после обновления jekyll должны ввести bundle update, чтобы обновить зависимые пакеты.
Примечание: вы можете использовать команду jekyll -s для настройки блога в реальном времени на месте, чтобы повысить эффективность. Подробнее см. на Jekyll.com (http://jekyllcn.com/).
Справочные документы: Использование Jekyll с страницами (https://help.github.com/articles/using-jekyll-with-pages/) и обновление с 2.x до 3.x (http://jekyllrb.com/docs/upgrading/2-to-3/).
Как говорится, предыдущие поколения сажали деревья, а последующие наслаждались тенью.
Спасибо Huxpro за предоставленный шаблон блога
Мой блог (http://ckjcode.gitee.io)
Введение От Jekyll до GitHub Pages я столкнулся со многими проблемами и, наконец, создал свой личный блог [BY Blog] (http://ckjcode.gitee.io).
Это руководство предназначено для тех, кто не разбирается в технологиях и хочет создать личный блог, операция проста и эффективна. Конечно, если вы разбираетесь в технологиях, это ещё лучше.
Посмотрите на главную страницу блога:
На мобильном макете:
Не будем больше говорить об этом, давайте перейдём к основному тексту.
Начало работы
Я использую метод использования GitHub Pages + jekyll для создания блога.
Чтобы использовать Gitee Pages, сначала необходимо зарегистрировать аккаунт Gitee (https://gitee.com/).
После регистрации найдите ckjcode.gitee.io и перейдите в мой репозиторий (https://gitee.com/ckjcode/ckjcode).
Щелкните правой кнопкой мыши в правом верхнем углу и выберите Fork, чтобы скопировать мой репозиторий в свой аккаунт.
Подождите немного, обновите страницу, и вы увидите успешную страницу Fork.
Перейдите в настройки, чтобы изменить имя репозитория на имя вашей учётной записи Gitee, а затем нажмите Rename.
Измените имя репозитория на ваше имя пользователя Gitee и нажмите Rename.Теперь введите имя своего аккаунта Github в браузере, например: ckjcode.gitee.io.
Вы увидите следующую страницу:
Это означает, что вы уже наполовину успешны 😀. Конечно, вам всё ещё нужно изменить конфигурацию блога, чтобы он стал вашим блогом.
Если появится
Вам необходимо проверить правильность имени вашего репозитория (#Rename). Структура сайта, конечно, у нашего сайта она сложнее.
├── _config.yml
├── _drafts
| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
| └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
| └── members.yml
├── _site
├── img
└── index.html
Очень сложно, не понятно, но не страшно, вам нужно запомнить лишь некоторые из них:
_config.yml — глобальный файл конфигурации;_posts — папка для размещения файлов с публикациями блога;img — папка с изображениями.Остальные подробности вы можете изучить здесь: http://jekyll.com.cn/docs/structure/.
Перейдите в свой репозиторий и найдите файл _config.yml, который является файлом глобальной конфигурации сайта.
Кликните на кнопку «Изменить».
Затем отредактируйте содержимое файла _config.yml.
Далее мы подробно рассмотрим содержание следующих конфигурационных файлов:
# Site settings
title: You Blog #Ваш блог
SEOTitle: 你的博客 | You Blog #Отображается в браузере при поиске
header-img: img/post-bg-rwd.jpg #Отображается на главной странице как фоновое изображение
email: You@gmail.com
description: "You Blog" #Описание сайта
keyword: "BY, BY Blog, 记得要让着本宝宝的博客, ckjcode,, iOS, Apple, iPhone" #Ключевые слова
url: "https://ckjcode.gitee.io" # Это ваш адрес блога
baseurl: "" # Здесь ничего не нужно заполнять
# Sidebar settings
sidebar: true # Включить боковую панель.
sidebar-about-description: "Расскажи что-нибудь крутое..."
sidebar-avatar:/img/avatar-by.JPG # Ваше личное изображение. Здесь вы можете изменить его на одну из двух запасных фотографий в папке img: avatar-m или avatar-g.
Здесь вы можете разместить информацию о своих аккаунтах в социальных сетях.
В поле ниже вы можете указать свои имена пользователей в социальных сетях, если они у вас есть. Если нет, то можно не заполнять.
# SNS settings
RSS: false
weibo_username: username
zhihu_username: username
github_username: username
facebook_username: username
jianshu_username: jianshu_id
Недавно была добавлена платформа Цзяньшу, где jianshu_id — это идентификатор вашего профиля на Цзяньшу, который можно найти по адресу: http://www.jianshu.com/u/xxxx, где xxxx — это число после адреса.
На сайте используется система комментариев Disqus. После регистрации на официальном сайте вы можете легко настроить её следующим образом:
Войдите на страницу настроек и настройте личную информацию.
Найдите Username.
Этот Username будет использоваться в файле _config.yml как disqus_username.
Disqus может не загружаться из-за медленной загрузки в Китае, поэтому я интегрировал плагин Gitalk (спасибо @FeDemo за рекомендацию). Если вы хотите добавить этот плагин, вы можете посмотреть эту статью: «Как добавить плагин Gitalk в блог». Я уже настроил его в
_config.yml, вам просто нужно заполнить параметры.
Интегрированы Baidu Analytics и Google Analytics, вы можете получить track_id на соответствующих сайтах и заменить их в следующих параметрах.
Это мой Google Analytics.
Не используйте мой track_id 😂.
Если вы не хотите использовать статистику, просто удалите или закомментируйте следующие параметры.
# Analytics settings
# Baidu Analytics
ba_track_id: 83e259f69b37d02a4633a2b7d960139c
# Google Analytics
ga_track_id: 'UA-90855596-1' # Format: UA-xxxxxx-xx
ga_domain: auto
friends: [
{
title: "简书·BY",
href: "http://www.jianshu.com/u/xxx"
},{
title: "Apple",
href: "https://apple.com"
},{
title: "Apple Developer",
href: "https://developer.apple.com/"
}
]
Поздравляю, ваш личный блог успешно создан!
Используя Github, мы можем легко управлять нашим блогом без необходимости изучать git.
Для опытных программистов использование git для управления будет более удобным. Перевод текста на русский язык:
Недавно многие люди задавали мне вопросы, и я решил подвести итог.
Если после изменения конфигурационных файлов ничего не меняется, просто обновите браузер.
Просто очистите кэш браузера, и всё будет в порядке.
Пожалуйста, задавайте вопросы или пишите мне напрямую, я постараюсь решить их для всех вас!
В последнее время кто-то постоянно отправляет данные в мой удалённый репозиторий, каждый день я получаю несколько десятков писем! Например, таких:
Чаще всего это происходит потому, что они клонировали мой репозиторий локально, не удалив адрес моего удалённого репозитория, а затем добавили свой собственный адрес репозитория и отправили данные во все удалённые репозитории (включая мой).
Это мешает моей работе и жизни.
Поэтому, пожалуйста, не отправляйте ветки в мой репозиторий!
Я обнаружил ещё одну проблему: многие люди после каждого изменения содержимого блога фиксируют изменения в удалённом репозитории, а потом проверяют результат, это очень неэффективно!
Примечание: следующие операции выполняются в терминале Mac. Для среды Windows конфигурация описана в статье @梦幻之云.
Те, кто внимательно читает документацию Jekyll на официальном сайте, найдут примеры кода Jekyll.
~ $ gem install jekyll bundler
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ bundle install
~/my-awesome-site $ bundle exec jekyll serve
# => Откройте браузер по адресу http://localhost:4000
Эта команда создаёт пример сайта Jekyll по умолчанию, который затем отображается в окне 4000 на вашем компьютере. Вы, наверное, уже догадались, как это сделать.
Установите Jekyll и Jekyll Bundler:
$ gem install jekyll
$ gem install jekyll bundler
Перейдите в каталог вашего блога и создайте локальный сервер:
$ jekyll s
Вы увидите следующее сообщение:
Auto-regeneration: enabled for '/Users/baiying/Blog'
Configuration file: /Users/baiying/Blog/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
Теперь вы можете увидеть свой блог по адресу http://127.0.0.1:4000/. Все изменения, которые вы вносите в конфигурацию блога, будут отображаться на этом адресе, что значительно повысит эффективность настройки блога.
Чтобы остановить serve, нажмите ctrl+c.
Если этот учебник помог вам создать свой личный блог, не стесняйтесь поставить звёздочку моему репозиторию на GitHub!
Потому что недавно я обнаружил, что количество форков приближается к сотне, плюс те, кто напрямую клонирует репозиторий — по скромным подсчётам, я помог более чем сотне людей успешно создать свои блоги, но количество звёзд составляет всего лишь 12! Возможно, я делаю что-то не так! Сейчас количество звёзд превысило сотню, спасибо за вашу поддержку!
Счастлив!
Чтобы изменить значок сайта, показанный на рисунке:
Найдите и замените файл favicon.ico в каталоге img блога. Размер значка должен быть 32x32.
Этот проект лицензирован под MIT. Подробнее см. в файле LICENSE.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )