the mvm.github.io
Initial Release of V2.0.0
Демо -сайт теперь отражен в IPFS!
Армандо Мэйнез на основе v1.0 Артема Шелудко.
Adam Blog 2.0 - это тема Jekyll, которая была создана на 100% совместимой с страницами GitHub. Если вы не знакомы с страницами GitHub, вы можете проверить их документацию для получения дополнительной информации. Руководство Джонатана Маклоуна по созданию и размещению личного сайта на GitHub также является хорошим ресурсом.
Jekyll-это простой статический генератор сайтов для личных, проектных или организационных сайтов, поддерживающий блог. По сути, Jekyll берет контент вашей страницы вместе с файлами шаблонов и производит полный веб -сайт. Для получения дополнительной информации посетите официальный сайт Jekyll для их документации. Codecademy также предлагает отличный курс о том, как развернуть сайт Jekyll для начинающих.
Красота размещения вашего сайта на GitHub заключается в том, что вам не нужно на самом деле устанавливать Jekyll на ваш компьютер. Все можно сделать с помощью редактора кода GitHub, с минимальными знаниями о том, как использовать Jekyll или командную строку. Все, что вам нужно сделать, это добавить свои сообщения в каталог _posts и отредактировать файл _config.yml , чтобы изменить настройки сайта. С некоторыми элементарными знаниями о HTML и CSS вы можете даже изменить сайт по своему вкусу. Все это можно сделать с помощью редактора кода GitHub, который действует как система управления контентом (CMS).
<tweet> </tweet> Tag в свою отметки.Проверьте тему в действии
Главная страница выглядит так:
Темный селектор режима в главном меню:
Страница пост выглядит:
Пользовательский отзывчивый 404:
Темный режим выглядит так:
Для полной локальной установки Adam Blog 2.0 загрузите свою собственную копию Adam Blog 2.0 и расстепьте его в свой собственный каталог. Оттуда откройте свой любимый инструмент командной строки, введите bundle install , а затем введите jekyll serve . Ваш сайт должен работать локально по адресу http: // localhost: 4000.
Если вы совершенно новичок в Jekyll, я рекомендую проверить документацию по адресу https://jekyllrb.com/ или есть учебник по Smashing Magazine.
Если вы размещаете свой сайт на страницах GitHub, то совершение изменения файла _config.yml (или любого другого файла) заставит перестроить ваш сайт с Jekyll. Любые внесенные изменения должны быть просмотрены вскоре после этого. Если вы размещаете свой сайт локально, то вы должны запустить jekyll serve снова для изменений.
Перейдите в каталог _posts , чтобы просмотреть все сообщения, которые в настоящее время находятся на веб -сайте, и чтобы увидеть примеры того, как обычно выглядят файлы. Вы можете просто дублировать шаблон и начать добавлять свой собственный контент.
Взимайте этот репозиторий в свой собственный аккаунт.
Вы можете размещать свой сайт Jekyll бесплатно с страницами GitHub. Нажмите здесь для получения дополнительной информации.
При разбейкинге, если вы используете в качестве назначения репозиторию с именем USERNAME.github.io , тогда ваш URL будет https://USERNAME.github.io/ , иначе https://USERNAME.github.io/REPONAME/ ), а ваш сайт будет опубликован в филиале Gh-pages. ПРИМЕЧАНИЕ. Если вы размещаете несколько сайтов под одно и то же имя пользователя GitHub, вам придется использовать страницы проекта вместо пользовательских страниц - просто измените имя репозитория на что -то другое, кроме 'http://username.github.io'.
В дополнение к вашему github-username.github.io Repo, который отображается на корневой URL, вы можете обслуживать сайты, используя филиал GH-Pages для других репо, поэтому они доступны на github-username.github.io/repo-name.
Это потребует от вас изменить _config.yml как SO:
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "Это гарантирует, что правильный относительный путь построен для ваших активов и постов.
Измените файл _config.yml , расположенный в корневом каталоге, с вашими данными.
# Site settings
title : The Title for Your Website
description : ' A description of your blog '
permalink : ' :title:output_ext ' # how the permalinks will behave
baseurl : " / " # the subpath of your site, e.g. /blog
url : " " # the base hostname & protocol for your site, e.g. http://example.com
logo : " " # the logo for your site
logo-icon : " " # a smaller logo, typically squared
logo-icon-SEO : " " # must be a non SVG file, could be the same as the logo-icon
# Night/Dark mode default mode is "auto", "auto" is for auto nightshift (19:00 - 07:00), "manual" is for manual toggle, and "on/off" is for default on/off. Whatever the user's choice is, it will supersede the default setting of the site and be kept during the visit (session). Only the dark mode setting is "manual", it will be always kept on every visit (i.e. no matter the browser is closed or not)
night_mode : " auto "
logo-dark : " /assets/img/branding/MVM-logo-full-dark.svg " # if you want to display a different logo when in dark mode
highlight_theme : syntax-base16.monokai.dark # select a dark theme for the code highlighter if needed
# Author settings
author : Your Name # add your name
author-pic : ' ' # a picture of you
about-author : ' ' # a brief description of you
# Contact links
email : [email protected] # Add your Email address
phone : # Add your Phone number
website : # Add your website
linkedin : # Add your Linkedin handle
github : # Add your Github handle
twitter : # Add your Twitter handle
bandcamp : # Add your Bandcamp username
# Tracker
analytics : # Google Analytics tag ID
fbadmin : # Facebook ID admin
# Paginate
paginate : 6 # number of items to show in the main page
paginate_path : ' page:num '
words_per_minute : 200 # default words per minute to be considered when calculating the read time of the blog posts Чтобы настроить информационный бюллетень, создайте учетную запись в https://mailchimp.com, настройте форму веб -регистрации и вставьте ссылку из формы ulced rew в файле config.yml :
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 " Чтобы настроить DISQUS, настройте сайт DISQUS с тем же именем, что и ваш сайт. Затем, в _config.yml , отредактируйте значение disqus_identifier , чтобы включить.
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directlyБолее подробную информацию о том, как настроить Disqus.
Настройте цвета сайта. Modify /assets/css/main.css main.css следующим образом:
html {
--shadow : rgba ( 32 , 30 , 30 , .3 );
--accent : # DB504A ; /* accent */
--accent-dark : # 4e3e51 ; /* accent 2 (dark) */
--main : # 326273 ; /* main color */
--main-dim : # 879dab ; /* dimmed version of main color */
--text : # 201E1E ;
--grey1 : # 5F5E58 ;
--grey2 : # 8D897C ;
--grey3 : # B4B3A7 ;
--grey4 : # DAD7D2 ;
--grey5 : # F0EFED ;
--background : # ffffff ;
}
html [ data-theme = "dark" ] {
--accent : # d14c47 ; /* accent */
--accent-dark : # CD8A7A ; /* accent 2 (dark) */
--main : # 4C6567 ; /* main color */
--main-dim : # 273335 ; /* dimmed version of main color */
--text : # B4B3A7 ;
--grey1 : # 8D897C ;
--grey2 : # 827F73 ;
--grey3 : # 76746A ;
--grey4 : # 66645D ;
--grey5 : # 4A4945 ;
--background : # 201E1E ;
--shadow : rgba ( 180 , 179 , 167 , .3 );
} Настройте шрифты сайта. Modify /assets/css/main.css main.css следующим образом:
...
--font1 : 'Lora' , charter , Georgia , Cambria , 'Times New Roman' , Times , serif ; /* body text */
- - font2 : 'Source Sans Pro' , 'Helvetica Neue' , Helvetica , Arial , sans-serif ; /* headers and titles */
- - font1 - light : 400;
- - font1 - regular : 400;
- - font1 - bold : 600;
- - font2 - light : 200;
- - font2 - regular : 400;
- - font2 - bold : 700;
... Если вы измените шрифты, вам необходимо также изменить /_includes/head.html следующим образом: не позаботиться и изменить следующую строку с помощью ваших новых шрифтов и шрифтов:
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " > Удалите все внутри <style></style> прямо перед строкой выше:
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style > Вы найдете примеры сообщений в вашем /_posts/ Directory. Идите дальше и отредактируйте любой пост и повторно создайте сайт, чтобы увидеть ваши изменения, для страниц GitHub это происходит автоматически с каждым коммитом. Вы можете восстановить сайт по-разному, но наиболее распространенным способом является запуск jekyll serve , который запускает веб-сервер и автоматически регенерирует ваш сайт при обновлении файла.
Чтобы добавить новые сообщения, просто добавьте файл в каталог _posts , который следует за соглашением YYYY-MM-DD-name-of-post.md и включает в себя необходимую переднюю вещество. Взгляните на любой примерный пост, чтобы получить представление о том, как он работает. Если у вас уже есть веб -сайт, построенный с Jekyll, просто скопируйте свои посты, чтобы перейти на Blog 2.0.
Параметры передней материи для каждого поста:
---
layout : post # ensure this one stays like this
read_time : true # calculate and show read time based on number of words
show_date : true # show the date of the post
title : Your Blog Post Title
date : XXXX-XX-XX XX:XX:XX XXXX
description : " The description of your blog post "
img : # the path for the hero image, from the image folder (if the image is directly on the image folder, just the filename is needed)
tags : [tags, of, your, post]
author : Your Name
github : username/reponame/ # set this to show a github button on the post
toc : yes # leave empty or erase for no table of contents
---Редактировать свой блог, используя Marckdown. Вот хорошее руководство о том, как его использовать.
Удалите изображения внутри /assets/img/posts/ и загрузите свои собственные изображения для своих сообщений.
Убедитесь, что страницы GitHub включены в настройках репозитория и указывают на главную или главную ветвь (где вы клонировали это репо).
Если вы знакомы с Jekyll, то структура каталогов ADAM Blog 2.0 не должна быть слишком сложной для навигации. Следующие некоторые основные моменты различий, которые вы можете заметить между структурой каталога по умолчанию. Более подробную информацию о том, что делают эти папки и файлы, можно найти на сайте документации Jekyll.
Adam Blog 2.0/
├── _includes # Theme includes
├── _layouts # Theme layouts (see below for details)
├── _posts # Where all your posts will go
├── assets # Style sheets and images are found here
| ├── css # Style sheets go here
| | └── _sass # Folder containing SCSS files
| | └── main.css # Main SCSS file
| | └── highlighter # Style sheet for code syntax highlighting
| └── img #
| └── posts # Images go here
├── _pages # Website pages (that are not posts)
├── _config.yml # Site settings
├── Gemfile # Ruby Gemfile for managing Jekyll plugins
├── index.html # Home page
├── LICENSE.md # License for this theme
├── README.md # Includes all of the documentation for this theme
├── feed.xml # Generates atom file which Jekyll points to
├── 404.html # custom and responsive 404 page
├── all-posts.json # database of all posts used for infinite scroll
├── ipfs-404.html # 404 page for IPFS
├── posts-by-tag.json # database of posts by tag
├── robots.txt # SEO crawlers exclusion file
├── search.json # database of posts used for search
└── sitemap.xml # automatically generated sitemap for search engines Чтобы полностью начать с нуля, просто удалите все файлы в папках _posts , assets/img/posts и добавьте свой собственный контент. Все в файле _config.yml может быть отредактировано в соответствии с вашими потребностями. Также измените файл favicon.ico на свой собственный Favicon.
Если у вас есть твитная цитата в своем сообщении в блоге и вы хотите включить ее в виде блока Tweet, вам просто нужно использовать теги <tweet></tweet> , все между ними будет преобразовано в поле твита.
Можно отслеживать статистику вашего сайта через Google Analytics. Подобно DISQUS, вам придется создать учетную запись для Google Analytics и ввести правильный идентификатор Google для вашего сайта в google-ID в файле _config.yml . Более подробную информацию о том, как настроить Google Analytics.
Atom поддерживается по умолчанию через Jekyll-Feed. С помощью Jekyll-Feed вы можете установить переменные конфигурации, такие как «заголовок», «Описание» и «Автор», в файле _config.yml .
Ваш файл подачи Atom будет жить по адресу https://your.site/feed.xml Пример.
Все иконки социальных сетей предоставлены Font Awesome. Вы можете изменить, какие значки появляются, а также учетную запись, на которую они ссылаются, в файле _config.yml .
Adam Blog 2.0 выходит из коробки с MathJax, который позволяет отображать математические уравнения в ваших постах с помощью LaTex. Просто добавьте Mathjax: yes в переднем крае вашего поста.
< p style = " text-align : center " >
( theta _ {t+1} = theta _ {t} - dfrac{eta}{sqrt{hat{v} _ t} + epsilon} hat{m} _ t ) .
</ p >
Adam Blog 2.0 предоставляет синтаксис, выделяющий огороженные кодовые блоки. Синтаксическое выделение позволяет отображать исходный код в разных цветах и шрифтах в зависимости от того, что отображается язык программирования. Вы можете найти полный список поддерживаемых языков программирования здесь. Другой вариант - встроить ваш код через GIST.
Вы можете выбрать цветовую тему для выделения синтаксиса в файле _config.yml :
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighterСм. Справочник Highlighter для справки по опциям.
Jekyll предлагает поддержку Github Flasting Markdown, которая позволяет форматировать ваши посты с помощью синтаксиса Markdown.
Проверьте документы Jekyll для получения дополнительной информации о том, как получить максимальную отдачу от Jekyll. Задайте все запросы на ошибки/функции в jekyll Github Repo. Если у вас есть вопросы, вы можете задать их о Jekyll Talk.
Если вы хотите сделать запрос на функцию или сообщить об ошибке или опечатку в документации, отправьте проблему GitHub. Если вы хотите внести вклад, то не стесняйтесь отправлять запрос на привлечение - в качестве бонуса, я причудлю всех участников ниже! Если это ваш первый запрос на притяжение, может быть полезно сначала прочитать по потоку GitHub.
Adam Blog 2.0 был разработан в качестве базы для пользователей, чтобы настроить и соответствовать своим собственным уникальным потребностям. Пожалуйста, имейте это в виду при запросе функций и/или отправки запросов на притяжение. Некоторые примеры изменений, которые я хотел бы видеть, - это вещи, которые облегчат использование сайта, или лучшие способы ведения дел. Пожалуйста, избегайте изменений, которые не приносят пользы большинству пользователей.
Эта тема полностью бесплатная и программное обеспечение с открытым исходным кодом. Вы можете использовать его так, как хотите, так как он распространяется по лицензии MIT. Если у вас есть какие -либо проблемы, какие -либо вопросы или предложения, не стесняйтесь подать проблему GitHub.
