Jekyll2017-01-31T13:44:58+00:00http://mateussmedeiros.github.io/blade-theme//blade-theme//Blade ThemeA simple Jekyll blog theme developed by Mateus MedeirosMateus Medeirosmateus.sousamedeiros@gmail.comExample content2017-01-31T11:00:09+00:002017-01-31T11:00:09+00:00http://mateussmedeiros.github.io/blade-theme//blade-theme/example<h1 id="h1---a-first-level-header">H1 - A First Level Header</h1>
<h2 id="h2--a-second-level-header">H2- A Second Level Header</h2>
<h3 id="h3---a-third-level-header">H3 - A Third Level Header</h3>
<h4 id="h4---a-fourth-level-header">H4 - A Fourth Level Header</h4>
<h5 id="h5---a-fifth-level-header">H5 - A Fifth Level Header</h5>
<h6 id="h6---a-sixed-level-header">H6 - A Sixed Level Header</h6>
<p>Text can be <strong>bold</strong>, <em>italic</em>, or <s>strikethrough</s>.</p>
<p><a href="#">Links</a> are blue with underline. When they hover over, the color changes to dark blue</p>
<p>There should be white spaces between paragraphs. There should be white spaces between paragraphs.
There should be white spaces between paragraphs. There should be white spaces between paragraphs.</p>
<p>There should be white spaces between paragraphs. There should be white spaces between paragraphs.
There should be white spaces between paragraphs. There should be white spaces between paragraphs.</p>
<hr />
<h3 id="blockquote">Blockquote</h3>
<blockquote>
<p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</p>
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.</p>
</blockquote>
<h3 id="unordered-lists">Unordered lists</h3>
<ul>
<li>Blue</li>
<li>Green</li>
<li>Yellow</li>
<li>More colors:
<ul>
<li>Red</li>
<li>Orange</li>
</ul>
</li>
<li>Most useds:
<ol>
<li>Black</li>
<li>White</li>
</ol>
</li>
</ul>
<h3 id="ordered-lists">Ordered lists</h3>
<ol>
<li>Blue</li>
<li>Green</li>
<li>Yellow</li>
<li>Red</li>
<li>More colors:
<ol>
<li>Orange</li>
<li>Pink</li>
</ol>
</li>
<li>Most useds:
<ul>
<li>Black</li>
<li>White</li>
</ul>
</li>
</ol>
<h3 id="task-list">Task List</h3>
<ul>
<li>[ ] Buy rice</li>
<li>[ ] Buy beans</li>
<li>[ ] Buy potato</li>
<li>[x] Buy noodles</li>
</ul>
<h3 id="tables">Tables</h3>
<table>
<thead>
<tr>
<th>Language</th>
<th>Code</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td><code class="highlighter-rouge"><p> Hello </p></code></td>
<td>Front End</td>
</tr>
<tr>
<td>CSS</td>
<td><code class="highlighter-rouge">p { color: blue; }</code></td>
<td>Front End</td>
</tr>
<tr>
<td>JavaScript</td>
<td><code class="highlighter-rouge">var msg = "Hello"</code></td>
<td>Front End</td>
</tr>
<tr>
<td>PHP</td>
<td><code class="highlighter-rouge">$msg = 'Hello';</code></td>
<td>Back End</td>
</tr>
<tr>
<td>Python</td>
<td><code class="highlighter-rouge">msg = "Hello"</code></td>
<td>Back End</td>
</tr>
</tbody>
</table>
<h3 id="code-blocks">Code blocks</h3>
<p>Here is an example of <code class="highlighter-rouge">Python</code>:</p>
<figure class="highlight"><pre><code class="language-python" data-lang="python"><span class="k">if</span> <span class="n">__name__</span> <span class="o">==</span><span class="s">'__main__'</span><span class="p">:</span>
<span class="n">img_thread</span> <span class="o">=</span> <span class="n">threading</span><span class="o">.</span><span class="n">Thread</span><span class="p">(</span><span class="n">target</span><span class="o">=</span><span class="n">downloadWallpaper</span><span class="p">)</span>
<span class="n">img_thread</span><span class="o">.</span><span class="n">start</span><span class="p">()</span>
<span class="n">st</span> <span class="o">=</span> <span class="s">'</span><span class="se">\r</span><span class="s">Downloading Image'</span>
<span class="n">current</span> <span class="o">=</span> <span class="mi">1</span>
<span class="k">while</span> <span class="n">img_thread</span><span class="o">.</span><span class="n">is_alive</span><span class="p">():</span>
<span class="n">sys</span><span class="o">.</span><span class="n">stdout</span><span class="o">.</span><span class="n">write</span><span class="p">(</span><span class="n">st</span><span class="o">+</span><span class="s">'.'</span><span class="o">*</span><span class="p">((</span><span class="n">current</span><span class="p">)</span><span class="o">%</span><span class="mi">5</span><span class="p">))</span>
<span class="n">current</span><span class="o">=</span><span class="n">current</span><span class="o">+</span><span class="mi">1</span>
<span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mf">0.3</span><span class="p">)</span>
<span class="n">img_thread</span><span class="o">.</span><span class="n">join</span><span class="p">()</span>
<span class="k">print</span><span class="p">(</span><span class="s">'</span><span class="se">\n</span><span class="s">Image of the day downloaded.'</span><span class="p">)</span></code></pre></figure>
<h3 id="images">Images</h3>
<p>Images are resized according to screen size.</p>
<p><img src="https://raw.githubusercontent.com/mateussmedeiros/blade-theme/master/assets/img/image-blog.png" alt="Image" /></p>Mateus Medeirosmateus.sousamedeiros@gmail.comH1 - A First Level HeaderWelcome to Jekyll!2017-01-25T17:00:09+00:002017-01-25T17:00:09+00:00http://mateussmedeiros.github.io/blade-theme//blade-theme/welcome-to-jekyll<p>You’ll find this post in your <code class="highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
<p>To add new posts, simply add a file in the <code class="highlighter-rouge">_posts</code> directory that follows the convention <code class="highlighter-rouge">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>
<p>Jekyll also offers powerful support for code snippets:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
<span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
<span class="c1">#=> prints 'Hi, Tom' to STDOUT.</span></code></pre></figure>
<p>Check out the <a href="http://jekyllrb.com/docs/home">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href="https://github.com/jekyll/jekyll">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href="https://talk.jekyllrb.com/">Jekyll Talk</a>.</p>Mateus Medeirosmateus.sousamedeiros@gmail.comYou’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.Criando um blog com Jekyll - Parte Final2016-01-24T20:06:00+00:002016-01-24T20:06:00+00:00http://mateussmedeiros.github.io/blade-theme//blade-theme/criando-um-blog-com-jekyll-parte-final<h2 id="introduo">Introdução</h2>
<p>Fala galera, chegamos à última parte desse tutorial de Jekyll, hoje irei ensinar como escrever <strong>posts</strong>, adicionar <strong>páginas</strong> e também subiremos ele para o <strong>GitHub</strong>. Vamos lá!</p>
<h2 id="como-escrever-posts">Como escrever posts</h2>
<p>Escrever posts no Jekyll é fácil, eles ficam na pasta <code class="highlighter-rouge">_posts</code> e são escritos em <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>. O nome do arquivo deve ser escrito da seguinte forma: <code class="highlighter-rouge">YYYY-MM-DD-nome-do-post.markdown</code>.</p>
<p>Cada arquivo no ínicio deve ter o <strong>Front-Matter</strong>. As informações devem ficar entre o par de três traços <code class="highlighter-rouge">---</code>. A sintaxe dele é a seguinte:</p>
<figure class="highlight"><pre><code class="language-yaml" data-lang="yaml"><span class="nn">---</span>
<span class="s">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="s">title</span><span class="pi">:</span> <span class="s">Meu primeiro post com Jekyll</span>
<span class="s">date</span><span class="pi">:</span> <span class="s">2016-01-24 17:22:00 -0300</span>
<span class="s">author</span><span class="pi">:</span> <span class="s">Mateus Medeiros</span>
<span class="s">description</span><span class="pi">:</span> <span class="s">Meu primeiro post com Jekyll.</span>
<span class="s">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">jekyll</span>
<span class="s">categories</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">Jekyll</span>
<span class="s">permalink</span><span class="pi">:</span> <span class="s">/meu-primeiro-post-com-jekyll/</span>
<span class="nn">---</span></code></pre></figure>
<p>Agora vamos escrever o <del>primeiro</del> post do nosso blog.</p>
<h2 id="escrevendo-nosso-primeiro-post">Escrevendo nosso primeiro post</h2>
<p>Na pasta <code class="highlighter-rouge">_posts</code>, crie o arquivo <code class="highlighter-rouge">2016-01-24-meu-primeiro-post-com-jekyll.markdown</code>. No ínicio do arquivo adicione o <strong>Front-Matter</strong> com as informações do post:</p>
<figure class="highlight"><pre><code class="language-yaml" data-lang="yaml"><span class="nn">---</span>
<span class="s">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="s">title</span><span class="pi">:</span> <span class="s">Meu primeiro post com Jekyll</span>
<span class="s">date</span><span class="pi">:</span> <span class="s">2016-01-24 17:22:00 -0300</span>
<span class="s">author</span><span class="pi">:</span> <span class="s">Mateus Medeiros</span>
<span class="s">description</span><span class="pi">:</span> <span class="s">Meu primeiro post com Jekyll.</span>
<span class="s">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">jekyll</span>
<span class="s">categories</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">Jekyll</span>
<span class="s">permalink</span><span class="pi">:</span> <span class="s">/meu-primeiro-post-com-jekyll/</span>
<span class="nn">---</span></code></pre></figure>
<p>Depois só escrever o post que desejar, lembrando que ele é escrito em <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>.</p>
<h2 id="como-adicionar-pginas">Como adicionar páginas</h2>
<p>Adicionar páginas também é fácil, elas podem ser escritas em <strong>Markdown</strong> ou em <strong>HTML</strong>. Elas também devem conter no ínicio o <strong>Front-Matter</strong>. Agora vamos adicionar algumas ao nosso blog, mas antes vamos editar a nossa página <code class="highlighter-rouge">about.md</code>.</p>
<h2 id="pgina-aboutmd">Página about.md</h2>
<p>Abra o arquivo <code class="highlighter-rouge">about.md</code> e abaixo do Front-Matter, adicione uma descrição sobre o assunto tratado no seu blog. O meu ficou assim:</p>
<figure class="highlight"><pre><code class="language-yaml" data-lang="yaml"><span class="nn">---</span>
<span class="s">layout</span><span class="pi">:</span> <span class="s">page</span>
<span class="s">title</span><span class="pi">:</span> <span class="s">Sobre</span>
<span class="s">permalink</span><span class="pi">:</span> <span class="s">/sobre/</span>
<span class="nn">---</span>
<span class="s">Tutorial de como criar um blog com Jekyll, feito por [Mateus Medeiros](http://devmateusmedeiros.com.br){:target="_blank"}. Você pode conferir esse tutorial em meu [blog](http://devmateusmedeiros.com.br){:target="_blank"}.</span>
<span class="s">Repositório no GitHub</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">Tutorial-Jekyll</span><span class="pi">]</span><span class="s">(https://github.com/mateussmedeiros/tutorial-jekyll){:target="_blank"}</span>
<span class="c1">## Partes do Tutorial:</span>
<span class="pi">-</span> <span class="pi">[</span><span class="nv">Criando um blog com Jekyll - Parte 1</span><span class="pi">]</span><span class="s">(http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-1/)</span>
<span class="pi">-</span> <span class="pi">[</span><span class="nv">Criando um blog com Jekyll - Parte 2</span><span class="pi">]</span><span class="s">(http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-2/)</span>
<span class="pi">-</span> <span class="pi">[</span><span class="nv">Criando um blog com Jekyll - Parte 3</span><span class="pi">]</span><span class="s">(http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-3/)</span>
<span class="pi">-</span> <span class="pi">[</span><span class="nv">Criando um blog com Jekyll - Parte Final</span><span class="pi">]</span><span class="s">(http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-final/)</span></code></pre></figure>
<h2 id="adicionando-novas-pginas">Adicionando novas páginas</h2>
<p>Vamos adicionar mais algumas páginas ao nosso blog:</p>
<ul>
<li><strong>tags.html</strong>: onde ficará as <strong>tags</strong> utilizadas no blog.</li>
<li><strong>categorias.html</strong>: onde ficará as <strong>categorias</strong> utilizadas no blog.</li>
<li><strong>contato.md</strong>: será a página de contato do nosso blog.</li>
</ul>
<p>Agora vamos lá!</p>
<h3 id="tagshtml">tags.html</h3>
<p>Iremos criar uma função que irá listar os posts com as tags listadas no blog e criará um menu de acesso rápido, ficando assim:</p>
<p><a href="#">Tag</a> <a href="#">Tag2</a></p>
<h2 id="tag">Tag</h2>
<p><a href="#">link-do-post</a>
<a href="#">link-do-post</a></p>
<h2 id="tag2">Tag2</h2>
<p><a href="#">link-do-post</a>
<a href="#">link-do-post</a></p>
<p>O arquivo ficou assim:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">---
layout: page
title: Tags
description: Procure os assuntos pelas tags usadas no blog
permalink: /tags/
---
<span class="nt"><h2></span> Procure os assuntos pelas tags usadas no blog <span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tags-list"</span><span class="nt">></span>
{% assign tags_list = site.tags %}
{% if tags_list.first[0] == null %}
{% for tag in tags_list %}
<span class="nt"><a</span> <span class="na">data-scroll</span> <span class="na">href=</span><span class="s">"#{{ tag }}"</span><span class="nt">></span>{{ tag }}<span class="nt"></a></span>
{% endfor %}
{% else %}
{% for tag in tags_list %}
<span class="nt"><a</span> <span class="na">data-scroll</span> <span class="na">href=</span><span class="s">"#{{ tag[0] }}"</span><span class="nt">></span>{{ tag[0] }}<span class="nt"></a></span>
{% endfor %}
{% endif %}
{% assign tags_list = nil %}
<span class="nt"></div></span>
{% for tag in site.tags %}
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"tag-title"</span> <span class="na">id=</span><span class="s">"{{ tag[0] }}"</span><span class="nt">></span>{{ tag[0] }}<span class="nt"></h2></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"posts"</span><span class="nt">></span>
{% assign pages_list = tag[1] %}
{% for post in pages_list reversed %}
{% if post.title != null %}
{% if group == null or group == post.group %}
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"{{ site.url }}{{ post.url }}"</span><span class="nt">></span>{{ post.title }}<span class="nt"><span</span> <span class="na">class=</span><span class="s">"date"</span><span class="nt">><time</span> <span class="na">datetime=</span><span class="s">"{{ post.date | date_to_xmlschema }}"</span> <span class="na">itemprop=</span><span class="s">"datePublished"</span><span class="nt">></span>{{ post.date | date: "%d %b, %Y" }}<span class="nt"></time></span></a></li></span>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
<span class="nt"></ul></span>
<span class="nt"></div></span>
{% endfor %}</code></pre></figure>
<p>Essa função peguei do blog do <a href="http://willianjusten.com.br" target="_blank">Willian Justen</a>.</p>
<h3 id="categoriashtml">categorias.html</h3>
<p>Com base na função criada acima, vamos criar a mesma função, mudando apenas a variável.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">---
layout: page
title: Categorias
description: Procure os assuntos pelas categorias usadas no blog.
permalink: /categorias/
---
<span class="nt"><h2></span> Procure os assuntos pelas categorias usadas no blog <span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"categories-list"</span><span class="nt">></span>
{% assign categories_list = site.categories %}
{% if categories_list.first[0] == null %}
{% for category in categories_list %}
<span class="nt"><a</span> <span class="na">data-scroll</span> <span class="na">href=</span><span class="s">"#{{ category }}"</span><span class="nt">></span>{{ category }}<span class="nt"></a></span>
{% endfor %}
{% else %}
{% for category in categories_list %}
<span class="nt"><a</span> <span class="na">data-scroll</span> <span class="na">href=</span><span class="s">"#{{ category[0] }}"</span><span class="nt">></span>{{ category[0] }}<span class="nt"></a></span>
{% endfor %}
{% endif %}
{% assign tags_list = nil %}
<span class="nt"></div></span>
{% for category in site.categories %}
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"category"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"category-title"</span> <span class="na">id=</span><span class="s">"{{ category[0] }}"</span><span class="nt">></span>{{ category[0] }}<span class="nt"></h2></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"posts"</span><span class="nt">></span>
{% assign pages_list = category[1] %}
{% for post in pages_list reversed %}
{% if post.title != null %}
{% if group == null or group == post.group %}
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"{{ site.url }}{{ post.url }}"</span><span class="nt">></span>{{ post.title }}<span class="nt"><span</span> <span class="na">class=</span><span class="s">"date"</span><span class="nt">><time</span> <span class="na">datetime=</span><span class="s">"{{ post.date | date_to_xmlschema }}"</span> <span class="na">itemprop=</span><span class="s">"datePublished"</span><span class="nt">></span>{{ post.date | date: "%d %b, %Y" }}<span class="nt"></time></span></a></li></span>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
<span class="nt"></ul></span>
<span class="nt"></div></span>
{% endfor %}</code></pre></figure>
<h3 id="contatomd">contato.md</h3>
<p>Vamos criar agora uma página de contato, ela será escrita em <strong>Markdown</strong>. A minha ficou assim:</p>
<figure class="highlight"><pre><code class="language-yaml" data-lang="yaml"><span class="nn">---</span>
<span class="s">layout</span><span class="pi">:</span> <span class="s">page</span>
<span class="s">title</span><span class="pi">:</span> <span class="s">Contato</span>
<span class="s">permalink</span><span class="pi">:</span> <span class="s">/contato/</span>
<span class="nn">---</span>
<span class="err">*</span><span class="nv">*Quer</span> <span class="s">falar comigo?**</span>
<span class="s">Entre em contato pelo e-mail</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">mateus.sousamedeiros@gmail.com</span><span class="pi">]</span><span class="s">(mailto:mateus.sousamedeiros@gmail.com)</span></code></pre></figure>
<p>Você pode editar do jeito que desejar.</p>
<h2 id="editando-o-menu">Editando o menu</h2>
<p>Criamos nossas páginas, agora vamos adicioná-las ao menu. Para isso, abra o arquivo <code class="highlighter-rouge">header.html</code>, e troque os links do menu, ficando assim:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Menu --></span>
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"menu"</span><span class="nt">></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/sobre"</span><span class="nt">></span> Sobre <span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/categorias"</span><span class="nt">></span> Categorias <span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/tags"</span><span class="nt">></span> Tags <span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"/contato"</span><span class="nt">></span> Contato <span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span></code></pre></figure>
<h2 id="subindo-para-o-github">Subindo para o GitHub</h2>
<p>Você pode subir seu blog para o GitHub e hospedá-lo com o GitHub Pages:</p>
<ol>
<li>Entre em sua conta no <a href="https://github.com/" target="_blank">GitHub</a>, caso não tenha, <a href="https://github.com/join" target="_blank">crie uma</a>.</li>
<li>Crie um repositório com o seguinte nome: <strong>seunomedeusuario.github.io</strong></li>
<li>Suba o seu blog - exceto a pasta <strong>_site</strong> - para o seu repositório usando o <strong>git</strong>, dessa forma:</li>
</ol>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="c"># Iniciar um repositório na pasta do projeto</span>
git init
<span class="c"># Adicionar todos os arquivos</span>
git add .
<span class="c"># Commitar os arquivos</span>
git commit -m <span class="s2">"Commit Inicial"</span>
<span class="c"># Adicionar o repositório</span>
git remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git
<span class="c"># Subir o seu blog</span>
git push -u origin master</code></pre></figure>
<p>Pronto, você subiu seu blog para o GitHub Pages, e agora é só esperar entre 20 e 30 minutos, e você poderá acessar seu blog através da url: http://seunomedeusuario.github.io</p>
<h2 id="concluso">Conclusão</h2>
<p>Chegamos ao fim do nosso tutorial, espero que eu tenha ajudado vocês à criarem um blog com Jekyll. Qualquer dúvida, comente aqui ou me mande um email: <a href="mailto:mateus.sousamedeiros@gmail.com">mateus.sousamedeiros@gmail.com</a>.</p>
<p>Você pode acessar o <a href="https://github.com/mateussmedeiros/tutorial-jekyll/" target="_blank">repositório</a> ou a <a href="http://devmateusmedeiros.com.br/tutorial-jekyll/" target="_blank">demo do tutorial</a>.</p>
<p><strong>Até a próxima!</strong></p>Mateus MedeirosIntroduçãoCriando um blog com Jekyll - Parte 32016-01-20T14:00:00+00:002016-01-20T14:00:00+00:00http://mateussmedeiros.github.io/blade-theme//blade-theme/criando-um-blog-com-jekyll-parte-3<h2 id="introduo">Introdução</h2>
<p>Fala galera, hoje daremos continuidade ao tutorial de como criar um blog com Jekyll. Nessa parte, vamos adicionar o nosso <strong>CSS</strong> utilizando o <strong>SASS</strong>, também vamos adicionar <strong>JavaScript</strong> (incluindo o plugin de pesquisa) e corrigir alguns erros nos arquivos. Deixarei a parte de escrever posts para a parte final junto com a parte de adicionar páginas.</p>
<p>Se você ainda não leu as outras partes, leia e depois volte aqui:</p>
<ul>
<li><a href="http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-1/" target="_blank">Parte 1</a>.</li>
<li><a href="http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-2/" target="_blank">Parte 2</a>.</li>
</ul>
<p>Agora, vamos lá!</p>
<h2 id="estilizando-o-blog-com-sass">Estilizando o blog com SASS</h2>
<p>Vamos começar pelo <strong>SASS</strong>, primeiramente você deve ter ele instalado em sua máquina, se você não tem veja como instalar <a href="http://tableless.com.br/instalando-sass-na-maquina-video/" target="_blank">aqui</a>.</p>
<p>Depois de instalado, vamos começar a estilizar. Abra o arquivo <code class="highlighter-rouge">main.scss</code>, que está na pasta <code class="highlighter-rouge">css</code>, que se encontra dentro da pasta <code class="highlighter-rouge">assets</code>. O arquivo ficou assim:</p>
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="nt">---</span>
<span class="nn">#</span> <span class="nt">Only</span> <span class="nt">the</span> <span class="nt">main</span> <span class="nt">Sass</span> <span class="nt">file</span> <span class="nt">needs</span> <span class="nt">front</span> <span class="nt">matter</span> <span class="o">(</span><span class="nt">the</span> <span class="nt">dashes</span> <span class="nt">are</span> <span class="nt">enough</span><span class="o">)</span>
<span class="nt">---</span>
<span class="k">@charset</span> <span class="s2">"utf-8"</span><span class="o">;</span>
<span class="cm">/*-------------------------
</span><span class="nt">----</span> <span class="nt">Fontes</span> <span class="nt">importadas</span> <span class="nt">----</span>
<span class="nt">-------------------------</span><span class="o">*/</span>
<span class="c1">// Open Sans
</span><span class="k">@import</span> <span class="s">url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);</span>
<span class="cm">/*-----------------
</span><span class="nt">----</span> <span class="nt">Vari</span><span class="err">á</span><span class="nt">veis</span> <span class="nt">----</span>
<span class="nt">-----------------</span><span class="o">*/</span>
<span class="c1">// Fontes
</span><span class="nv">$fonte-padrao</span><span class="p">:</span> <span class="s1">'Open Sans'</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="err">;</span>
<span class="c1">// Cores
</span><span class="nv">$azul</span><span class="p">:</span> <span class="mh">#3498db</span><span class="err">;</span>
<span class="nv">$azul-escuro</span><span class="p">:</span> <span class="mh">#1f74bf</span><span class="err">;</span>
<span class="nv">$branco</span><span class="p">:</span> <span class="mh">#fff</span><span class="err">;</span>
<span class="nv">$preto</span><span class="p">:</span> <span class="mh">#3c3c3c</span><span class="err">;</span>
<span class="c1">// Breakpoints
</span><span class="nv">$bp-celular</span><span class="p">:</span> <span class="m">600px</span><span class="err">;</span>
<span class="nv">$bp-tablet</span><span class="p">:</span> <span class="m">800px</span><span class="err">;</span>
<span class="cm">/*--------------------
</span><span class="nt">----</span> <span class="nt">Placeholders</span> <span class="nt">----</span>
<span class="nt">--------------------</span><span class="o">*/</span>
<span class="nv">%margins</span> <span class="err">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">1em</span> <span class="m">0</span><span class="err">;</span>
<span class="err">}</span>
<span class="cm">/*--------------
</span><span class="nt">----</span> <span class="nt">Mixins</span> <span class="nt">----</span>
<span class="nt">--------------</span><span class="o">*/</span>
<span class="k">@mixin</span> <span class="nf">media-query</span><span class="p">(</span><span class="nv">$device</span><span class="p">)</span> <span class="err">{</span>
<span class="k">@media</span> <span class="n">screen</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="nv">$device</span><span class="p">)</span> <span class="err">{</span>
<span class="k">@content</span><span class="o">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*--------------------------------
</span><span class="nt">----</span> <span class="nt">Arquivos</span> <span class="nt">SASS</span> <span class="nt">importados</span> <span class="nt">----</span>
<span class="nt">--------------------------------</span><span class="o">*/</span>
<span class="k">@import</span>
<span class="s2">"base"</span><span class="o">,</span>
<span class="s2">"layout"</span><span class="o">,</span>
<span class="s2">"syntax-highlighting"</span><span class="o">,</span>
<span class="s2">"responsive"</span>
<span class="o">;</span></code></pre></figure>
<p>Aqui definimos as variáveis que utilizaremos durante a estilização, criamos um <strong>placeholder</strong> para o tamanho das margens, também criamos um <strong>mixin</strong> para as nossas <strong>media queries</strong>. No final fazemos a importação dos arquivos que estão na pasta <code class="highlighter-rouge">_sass</code>.</p>
<p>Depois disso, abra a pasta <code class="highlighter-rouge">_sass</code>, dentro dela tem 3 arquivos:</p>
<ul>
<li>_base.scss</li>
<li>_layout.scss</li>
<li>_syntax-highlighting.scss</li>
</ul>
<p>Iremos adicionar um novo arquivo: <code class="highlighter-rouge">_responsive.scss</code>, que será o arquivo responsável pela estilização para dispositivos móveis.</p>
<h3 id="basescss">_base.scss</h3>
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="cm">/*-------------
</span><span class="nt">----</span> <span class="nt">Reset</span> <span class="nt">----</span>
<span class="nt">-------------</span><span class="o">*/</span>
<span class="o">*,</span> <span class="o">*</span><span class="nd">:before</span><span class="o">,</span> <span class="o">*</span><span class="nd">:after</span> <span class="err">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">button</span> <span class="err">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">overflow</span><span class="p">:</span> <span class="nb">visible</span><span class="err">;</span>
<span class="err">}</span>
<span class="cm">/*------------
</span><span class="nt">----</span> <span class="nt">Body</span> <span class="nt">----</span>
<span class="nt">------------</span><span class="o">*/</span>
<span class="nt">body</span> <span class="err">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="nv">$fonte-padrao</span><span class="err">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$preto</span><span class="err">;</span>
<span class="err">}</span>
<span class="cm">/*------------------
</span><span class="nt">----</span> <span class="nt">Tipografia</span> <span class="nt">----</span>
<span class="nt">------------------</span><span class="o">*/</span>
<span class="nt">h1</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">28pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">h2</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">20pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">24pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">h3</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">20pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">h4</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">16pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">h5</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">14pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">h6</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">12pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">p</span><span class="o">,</span> <span class="nt">a</span><span class="o">,</span> <span class="nt">li</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">18pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">p</span> <span class="err">{</span>
<span class="k">@extend</span> <span class="nv">%margins</span><span class="o">;</span>
<span class="err">}</span>
<span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span> <span class="err">{</span>
<span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="err">;</span>
<span class="err">}</span>
<span class="cm">/*-------------
</span><span class="nt">----</span> <span class="nt">Links</span> <span class="nt">----</span>
<span class="nt">-------------</span><span class="o">*/</span>
<span class="nt">a</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$azul</span><span class="err">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$azul-escuro</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*--------------
</span><span class="nt">----</span> <span class="nt">Listas</span> <span class="nt">----</span>
<span class="nt">--------------</span><span class="o">*/</span>
<span class="nt">ul</span> <span class="err">{</span>
<span class="nl">list-style</span><span class="p">:</span> <span class="nb">disc</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">ul</span><span class="o">,</span> <span class="nt">ol</span> <span class="err">{</span>
<span class="nl">padding-left</span><span class="p">:</span> <span class="m">20px</span><span class="err">;</span>
<span class="nt">li</span> <span class="err">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">5px</span> <span class="m">0</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*---------------
</span><span class="nt">----</span> <span class="nt">Imagens</span> <span class="nt">----</span>
<span class="nt">---------------</span><span class="o">*/</span>
<span class="nt">img</span> <span class="err">{</span>
<span class="nl">max-width</span><span class="p">:</span> <span class="m">100%</span><span class="err">;</span>
<span class="nl">vertical-align</span><span class="p">:</span> <span class="nb">middle</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">figure</span> <span class="o">></span> <span class="nt">img</span> <span class="err">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.center</span> <span class="err">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="err">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.right</span> <span class="err">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.left</span> <span class="err">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="err">;</span>
<span class="err">}</span>
<span class="cm">/*-------------------
</span><span class="nt">----</span> <span class="nt">Blockquotes</span> <span class="nt">----</span>
<span class="nt">-------------------</span><span class="o">*/</span>
<span class="nt">blockquote</span> <span class="err">{</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">4px</span> <span class="nb">solid</span> <span class="nv">$azul</span><span class="err">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="err">;</span>
<span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">-1px</span><span class="err">;</span>
<span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span><span class="err">;</span>
<span class="o">></span> <span class="nd">:last-child</span> <span class="err">{</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span></code></pre></figure>
<p>Aqui temos a base do estilo do blog, primeiro fazemos um <strong>reset</strong>, depois estilizamos a <strong>tipografia</strong>, <strong>links</strong>, <strong>listas</strong>, <strong>imagens</strong> e o <strong>blockquotes</strong>.</p>
<h3 id="layoutscss">_layout.scss</h3>
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="cm">/*-----------------------
</span><span class="nt">----</span> <span class="nt">Header</span> <span class="o">|</span> <span class="nt">Footer</span> <span class="nt">----</span>
<span class="nt">-----------------------</span><span class="o">*/</span>
<span class="nc">.header</span> <span class="err">{</span>
<span class="nt">a</span> <span class="err">{</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="nc">.footer</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="nl">text-shadow</span><span class="p">:</span> <span class="m">0px</span> <span class="m">2px</span> <span class="m">0px</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">31</span><span class="o">,</span> <span class="m">116</span><span class="o">,</span> <span class="m">191</span><span class="o">,</span> <span class="m">1</span><span class="p">)</span><span class="err">;</span>
<span class="nt">a</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">p</span> <span class="err">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="nc">.header</span><span class="o">,</span> <span class="nc">.footer</span> <span class="err">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="err">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="nv">$azul</span><span class="err">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="err">;</span>
<span class="err">}</span>
<span class="cm">/*-------------------
</span><span class="nt">----</span> <span class="nt">T</span><span class="err">í</span><span class="nt">tulo</span> <span class="nt">Site</span> <span class="nt">----</span>
<span class="nt">-------------------</span><span class="o">*/</span>
<span class="nc">.title</span> <span class="err">{</span>
<span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">20px</span> <span class="m">0</span><span class="err">;</span>
<span class="nt">a</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="nl">text-shadow</span><span class="p">:</span> <span class="m">0px</span> <span class="m">5px</span> <span class="m">0px</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">31</span><span class="o">,</span> <span class="m">116</span><span class="o">,</span> <span class="m">191</span><span class="o">,</span> <span class="m">1</span><span class="p">)</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">h1</span> <span class="nt">a</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">32pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">42pt</span><span class="err">;</span>
<span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">h2</span> <span class="nt">a</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">34pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*------------
</span><span class="nt">----</span> <span class="nt">Menu</span> <span class="nt">----</span>
<span class="nt">------------</span><span class="o">*/</span>
<span class="nc">.bt-menu</span> <span class="err">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.menu</span> <span class="err">{</span>
<span class="nt">li</span> <span class="err">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="err">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">15px</span> <span class="m">0</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="k">&</span><span class="nd">:last-child</span> <span class="err">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="nt">a</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="err">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="err">{</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">underline</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*----------------
</span><span class="nt">----</span> <span class="nt">Pesquisa</span> <span class="nt">----</span>
<span class="nt">----------------</span><span class="o">*/</span>
<span class="nc">.bt-search</span> <span class="err">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="err">;</span>
<span class="err">}</span>
<span class="nn">#search-container</span> <span class="err">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="err">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">fixed</span><span class="err">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="err">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="err">;</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">1</span><span class="err">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">)</span><span class="err">;</span>
<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">]</span><span class="err">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">400px</span><span class="err">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">30px</span><span class="err">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10px</span> <span class="nb">auto</span><span class="err">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="nb">transparent</span><span class="err">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="nl">outline</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="err">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="err">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="err">}</span>
<span class="na">:</span><span class="o">:-</span><span class="n">webkit-input-placeholder</span><span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="err">}</span>
<span class="na">:-ms-input-placeholder</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="err">}</span>
<span class="na">:</span><span class="o">:-</span><span class="n">ms-input-placeholder</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="err">}</span>
<span class="na">:</span><span class="o">:-</span><span class="n">moz-placeholder</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">a</span> <span class="err">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="err">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10px</span><span class="err">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="err">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$azul</span><span class="err">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">underline</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*------------------
</span><span class="nt">----</span> <span class="err">Í</span><span class="nt">cones</span> <span class="nt">SVG</span> <span class="nt">----</span>
<span class="nt">------------------</span><span class="o">*/</span>
<span class="nc">.icon-top</span> <span class="err">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">25px</span><span class="err">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">25px</span><span class="err">;</span>
<span class="na">fill</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.icon</span> <span class="err">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">40px</span><span class="err">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">40px</span><span class="err">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">5px</span><span class="err">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="err">;</span>
<span class="na">fill</span><span class="p">:</span> <span class="nv">$azul</span><span class="err">;</span>
<span class="err">}</span>
<span class="cm">/*---------------------
</span><span class="nt">----</span> <span class="nt">P</span><span class="err">á</span><span class="nt">gina</span> <span class="o">|</span> <span class="nt">Post</span> <span class="nt">----</span>
<span class="nt">---------------------</span><span class="o">*/</span>
<span class="nc">.home</span> <span class="err">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.page-content</span> <span class="err">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">35px</span> <span class="m">30px</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.post-content</span> <span class="err">{</span>
<span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span> <span class="err">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">20px</span> <span class="m">0</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="nc">.post-list</span> <span class="err">{</span>
<span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.page-title</span><span class="o">,</span>
<span class="nc">.post-title</span> <span class="err">{</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nv">$preto</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">5px</span> <span class="m">0</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.post-meta</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">10pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">16pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.post-link</span> <span class="err">{</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">28pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.tags</span> <span class="err">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">1em</span><span class="err">;</span>
<span class="nt">a</span> <span class="err">{</span>
<span class="nl">border-right</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nv">$azul</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="m">5px</span><span class="err">;</span>
<span class="k">&</span><span class="nd">:last-child</span> <span class="err">{</span>
<span class="nl">border-right</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*-------------
</span><span class="nt">----</span> <span class="nt">Autor</span> <span class="nt">----</span>
<span class="nt">-------------</span><span class="o">*/</span>
<span class="nc">.img-author</span> <span class="err">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">150px</span><span class="err">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">150px</span><span class="err">;</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="err">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">20px</span><span class="err">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">100%</span><span class="err">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">3px</span> <span class="nb">solid</span> <span class="nv">$azul</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.author</span> <span class="err">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="nf">darken</span><span class="p">(</span><span class="nv">$branco</span><span class="o">,</span> <span class="m">5%</span><span class="p">)</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span><span class="err">;</span>
<span class="k">@extend</span> <span class="nv">%margins</span><span class="o">;</span>
<span class="nc">.details</span> <span class="err">{</span>
<span class="k">@extend</span> <span class="nv">%margins</span><span class="o">;</span>
<span class="err">}</span>
<span class="nc">.name</span> <span class="nt">a</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18pt</span><span class="err">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*------------------------------------------------
</span><span class="nt">----</span> <span class="nt">Bot</span><span class="err">õ</span><span class="nt">es</span> <span class="nt">de</span> <span class="nt">Compartilhamento</span> <span class="o">|</span> <span class="nt">Coment</span><span class="err">á</span><span class="nt">rios</span> <span class="nt">----</span>
<span class="nt">------------------------------------------------</span><span class="o">*/</span>
<span class="nc">.share</span><span class="o">,</span> <span class="nc">.comments</span> <span class="err">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="err">;</span>
<span class="nl">border-top</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nv">$preto</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.share</span> <span class="err">{</span>
<span class="nt">a</span> <span class="err">{</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.icon</span> <span class="err">{</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">10px</span><span class="err">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="err">{</span>
<span class="na">fill</span><span class="p">:</span> <span class="nf">darken</span><span class="p">(</span><span class="nv">$azul</span><span class="o">,</span> <span class="m">15%</span><span class="p">)</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="err">}</span></code></pre></figure>
<p>Esse é o arquivo responsável pela estrutura do layout. Você pode estilizar do jeito que quiser, fiz conforme o layout que mostrei na <a href="http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-1/" target="_blank">primeira parte do tutorial</a>.</p>
<h3 id="responsivescss">_responsive.scss</h3>
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="k">@include</span> <span class="nd">media-query</span><span class="p">(</span><span class="nv">$bp-tablet</span><span class="p">)</span> <span class="err">{</span>
<span class="cm">/*------------
</span> <span class="nt">----</span> <span class="nt">Menu</span> <span class="nt">----</span>
<span class="nt">------------</span><span class="o">*/</span>
<span class="nc">.bt-menu</span> <span class="err">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.menu</span> <span class="err">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="err">;</span>
<span class="nt">li</span> <span class="err">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="err">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="err">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="k">&</span><span class="nd">:last-child</span> <span class="err">{</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="k">@include</span> <span class="nd">media-query</span><span class="p">(</span><span class="nv">$bp-celular</span><span class="p">)</span> <span class="err">{</span>
<span class="cm">/*-------------------
</span> <span class="nt">----</span> <span class="nt">T</span><span class="err">í</span><span class="nt">tulo</span> <span class="nt">Site</span> <span class="nt">----</span>
<span class="nt">-------------------</span><span class="o">*/</span>
<span class="nc">.title</span> <span class="err">{</span>
<span class="nt">h1</span> <span class="nt">a</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">32pt</span><span class="err">;</span>
<span class="nl">text-transform</span><span class="p">:</span> <span class="nb">capitalize</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">h2</span> <span class="nt">a</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16pt</span><span class="err">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">24pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*---------------------
</span> <span class="nt">----</span> <span class="nt">P</span><span class="err">á</span><span class="nt">gina</span> <span class="o">|</span> <span class="nt">Post</span> <span class="nt">----</span>
<span class="nt">---------------------</span><span class="o">*/</span>
<span class="nc">.page-content</span> <span class="err">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">25px</span> <span class="m">20px</span><span class="err">;</span>
<span class="err">}</span>
<span class="nc">.post-list</span><span class="o">,</span> <span class="nc">.post-container</span> <span class="err">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="err">}</span>
<span class="cm">/*----------------
</span> <span class="nt">----</span> <span class="nt">Pesquisa</span> <span class="nt">----</span>
<span class="nt">----------------</span><span class="o">*/</span>
<span class="nn">#search-container</span> <span class="err">{</span>
<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">text</span><span class="o">]</span><span class="err">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">80%</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*-------------
</span> <span class="nt">----</span> <span class="nt">Autor</span> <span class="nt">----</span>
<span class="nt">-------------</span><span class="o">*/</span>
<span class="nc">.author</span> <span class="err">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="err">;</span>
<span class="nc">.email</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12pt</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="nc">.img-author</span> <span class="err">{</span>
<span class="nl">float</span><span class="p">:</span> <span class="nb">none</span><span class="err">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="err">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span></code></pre></figure>
<p>Adaptamos o layout para os dispositivos móveis, incluimos os mixins que criamos no <code class="highlighter-rouge">main.scss</code> com os breakpoints que definimos também lá.</p>
<h3 id="syntax-highlightingscss">_syntax-highlighting.scss</h3>
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="cm">/*--------------
</span><span class="nt">----</span> <span class="nt">C</span><span class="err">ó</span><span class="nt">digo</span> <span class="nt">----</span>
<span class="nt">--------------</span><span class="o">*/</span>
<span class="nt">pre</span><span class="o">,</span>
<span class="nt">code</span> <span class="err">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">15px</span><span class="err">;</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nv">$azul</span><span class="err">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">3px</span><span class="err">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="mh">#272822</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">code</span> <span class="err">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">1px</span> <span class="m">5px</span><span class="err">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$branco</span><span class="err">;</span>
<span class="err">}</span>
<span class="nt">pre</span> <span class="err">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8px</span> <span class="m">12px</span><span class="err">;</span>
<span class="nl">overflow-x</span><span class="p">:</span> <span class="nb">auto</span><span class="err">;</span>
<span class="o">></span> <span class="nt">code</span> <span class="err">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">padding-right</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="nl">padding-left</span><span class="p">:</span> <span class="m">0</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">}</span>
<span class="cm">/*----------------------------------
</span><span class="nt">----</span> <span class="nt">Syntax</span> <span class="nt">highlighting</span> <span class="nt">styles</span> <span class="nt">----</span>
<span class="nt">----------------------------------</span><span class="o">*/</span>
<span class="nc">.highlight</span> <span class="err">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="mh">#272822</span><span class="err">;</span>
<span class="nc">.highlighter-rouge</span> <span class="k">&</span> <span class="err">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="mh">#272822</span><span class="err">;</span>
<span class="err">}</span>
<span class="err">.</span><span class="na">c</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#75715e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Comment</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">err</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#960050</span><span class="err">;</span> <span class="n">background-color</span><span class="o">:</span> <span class="mh">#1e0010</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Error</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">k</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#66d9ef</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Keyword</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">l</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#ae81ff</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">n</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">o</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f92672</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Operator</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">p</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Punctuation</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">cm</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#75715e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Comment</span><span class="o">.</span><span class="n">Multiline</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">cp</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#75715e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Comment</span><span class="o">.</span><span class="n">Preproc</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">c1</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#75715e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Comment</span><span class="o">.</span><span class="n">Single</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">cs</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#75715e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Comment</span><span class="o">.</span><span class="n">Special</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">ge</span><span class="err"> { </span><span class="nl">font-style</span><span class="p">:</span> <span class="nb">italic</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Generic</span><span class="o">.</span><span class="n">Emph</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">gs</span><span class="err"> { </span><span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Generic</span><span class="o">.</span><span class="n">Strong</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">kc</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#66d9ef</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Keyword</span><span class="o">.</span><span class="n">Constant</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">kd</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#66d9ef</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Keyword</span><span class="o">.</span><span class="n">Declaration</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">kn</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f92672</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Keyword</span><span class="o">.</span><span class="n">Namespace</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">kp</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#66d9ef</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Keyword</span><span class="o">.</span><span class="n">Pseudo</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">kr</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#66d9ef</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Keyword</span><span class="o">.</span><span class="n">Reserved</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">kt</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#66d9ef</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Keyword</span><span class="o">.</span><span class="n">Type</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">ld</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">Date</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">m</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#ae81ff</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">Number</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">s</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">na</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#a6e22e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Attribute</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nb</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Builtin</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nc</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#a6e22e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Class</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">no</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#66d9ef</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Constant</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nd</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#a6e22e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Decorator</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">ni</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Entity</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">ne</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#a6e22e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Exception</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nf</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#a6e22e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Function</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nl</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Label</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nn</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Namespace</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nx</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#a6e22e</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Other</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">py</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Property</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nt</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f92672</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Tag</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">nv</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Variable</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">ow</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f92672</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Operator</span><span class="o">.</span><span class="n">Word</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">w</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Text</span><span class="o">.</span><span class="n">Whitespace</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">mf</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#ae81ff</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">Number</span><span class="o">.</span><span class="n">Float</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">mh</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#ae81ff</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">Number</span><span class="o">.</span><span class="n">Hex</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">mi</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#ae81ff</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">Number</span><span class="o">.</span><span class="n">Integer</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">mo</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#ae81ff</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">Number</span><span class="o">.</span><span class="n">Oct</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">sb</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Backtick</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">sc</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Char</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">sd</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Doc</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">s2</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Double</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">se</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#ae81ff</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Escape</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">sh</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Heredoc</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">si</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Interpol</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">sx</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Other</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">sr</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Regex</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">s1</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Single</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">ss</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#e6db74</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">String</span><span class="o">.</span><span class="n">Symbol</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">bp</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Builtin</span><span class="o">.</span><span class="n">Pseudo</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">vc</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Variable</span><span class="o">.</span><span class="n">Class</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">vg</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Variable</span><span class="o">.</span><span class="n">Global</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">vi</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f8f8f2</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Name</span><span class="o">.</span><span class="n">Variable</span><span class="o">.</span><span class="n">Instance</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">il</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#ae81ff</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Literal</span><span class="o">.</span><span class="n">Number</span><span class="o">.</span><span class="n">Integer</span><span class="o">.</span><span class="n">Long</span> <span class="o">*/</span>
<span class="nc">.gh</span> <span class="err">{</span> <span class="err">}</span> <span class="o">/*</span> <span class="nt">Generic</span> <span class="nt">Heading</span> <span class="k">&</span> <span class="nt">Diff</span> <span class="nt">Header</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">gu</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#75715e</span><span class="err">;</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Generic</span><span class="o">.</span><span class="n">Subheading</span> <span class="o">&</span> <span class="n">Diff</span> <span class="n">Unified</span><span class="o">/</span><span class="n">Comment</span><span class="o">?</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">gd</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#f92672</span><span class="err">;</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Generic</span><span class="o">.</span><span class="n">Deleted</span> <span class="o">&</span> <span class="n">Diff</span> <span class="n">Deleted</span> <span class="o">*/</span>
<span class="err">.</span><span class="na">gi</span><span class="err"> { </span><span class="nl">color</span><span class="p">:</span> <span class="mh">#a6e22e</span><span class="err">;</span> <span class="err">}</span> <span class="o">/*</span> <span class="n">Generic</span><span class="o">.</span><span class="n">Inserted</span> <span class="o">&</span> <span class="n">Diff</span> <span class="n">Inserted</span> <span class="o">*/</span>
<span class="err">}</span></code></pre></figure>
<p>Por fim, estilizamos os <strong>highlights</strong> do blog, utilizei o mesmo que uso no <a href="http://devmateusmedeiros.com.br" target="_blank">meu blog</a>. E terminamos a estilização, vamos agora adicionar <strong>JavaScript</strong>.</p>
<h2 id="adicionando-javascript">Adicionando JavaScript</h2>
<p>Primeira coisa que iremos fazer é instalar o <strong>Bower</strong> para gerenciar as dependências do blog. Para instalar ele, você deve já ter instalado em sua máquina o <strong>Node.js</strong>, <strong>npm</strong> e <strong>Git</strong>. Com eles já instalados, digite no terminal:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm install -g bower</code></pre></figure>
<p>Para verificar se ele foi instalado com sucesso, digite:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">bower -v
<span class="c"># 1.6.8</span></code></pre></figure>
<p>Antes de instalar as dependências que iremos utilizar no blog, precisamos listá-las. Para isso digite o comando <code class="highlighter-rouge">bower init</code>. Ele irá nos fazer algumas perguntas, responda com as informações do seu blog (nem todas as perguntas precisam ser respondidas). Feito isso o bower irá criar o arquivo <code class="highlighter-rouge">bower.json</code>, você pode editá-lo como quiser.</p>
<p>Agora vamos instalar 2 dependências: o <strong>jquery</strong> e o <strong>Simple Jekyll Search</strong>. Para instalar e já listá-las no arquivo <code class="highlighter-rouge">bower.json</code>, digite o comando:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="c"># Instalar o Simple Jekyll Search</span>
bower install --save simple-jekyll-search
<span class="c"># Instalar o jQuery</span>
bower install --save jquery</code></pre></figure>
<p>Vamos mudar o diretório das nossas dependências, ele ficará no seguinte caminho: <code class="highlighter-rouge">/assets/components/</code>. Para isso crie um arquivo chamado <code class="highlighter-rouge">.bowerrc</code> e nele adicione:</p>
<figure class="highlight"><pre><code class="language-json" data-lang="json"><span class="p">{</span><span class="w">
</span><span class="nt">"directory"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"assets/components"</span><span class="w">
</span><span class="p">}</span></code></pre></figure>
<p>Feito isso, exclua a pasta <code class="highlighter-rouge">bower_components</code>.</p>
<p>No final, depois de editado, o meu arquivo <code class="highlighter-rouge">bower.json</code> ficou assim:</p>
<figure class="highlight"><pre><code class="language-json" data-lang="json"><span class="p">{</span><span class="w">
</span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Tutorial Jekyll"</span><span class="p">,</span><span class="w">
</span><span class="nt">"homepage"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.com/mateussmedeiros/tutorial-jekyll"</span><span class="p">,</span><span class="w">
</span><span class="nt">"authors"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="s2">"Mateus Medeiros <mateusdesousamedeiros@hotmail.com>"</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nt">"description"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Tutorial de como construir um blog com Jekyll"</span><span class="p">,</span><span class="w">
</span><span class="nt">"license"</span><span class="p">:</span><span class="w"> </span><span class="s2">"MIT"</span><span class="p">,</span><span class="w">
</span><span class="nt">"ignore"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="s2">"**/.*"</span><span class="p">,</span><span class="w">
</span><span class="s2">"node_modules"</span><span class="p">,</span><span class="w">
</span><span class="s2">"bower_components"</span><span class="p">,</span><span class="w">
</span><span class="s2">"test"</span><span class="p">,</span><span class="w">
</span><span class="s2">"tests"</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nt">"dependencies"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nt">"simple-jekyll-search"</span><span class="p">:</span><span class="w"> </span><span class="s2">"latest"</span><span class="p">,</span><span class="w">
</span><span class="nt">"jquery"</span><span class="p">:</span><span class="w"> </span><span class="s2">"latest"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span></code></pre></figure>
<p>Pronto, instalamos o <strong>jQuery</strong> e o <strong>Simple Jekyll Search</strong>. Agora vamos implementá-los.</p>
<h3 id="implementando-a-pesquisa">Implementando a Pesquisa</h3>
<p>Primeiramente, crie o arquivo <code class="highlighter-rouge">search.json</code>, e digite isso:</p>
<figure class="highlight"><pre><code class="language-json" data-lang="json"><span class="err">---</span><span class="w">
</span><span class="err">---</span><span class="w">
</span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">for</span><span class="w"> </span><span class="err">post</span><span class="w"> </span><span class="err">in</span><span class="w"> </span><span class="err">site.posts</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nt">"title"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"{{ post.title | escape }}"</span><span class="p">,</span><span class="w">
</span><span class="nt">"category"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"{{ post.category }}"</span><span class="p">,</span><span class="w">
</span><span class="nt">"tags"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"{{ post.tags | join: ', ' }}"</span><span class="p">,</span><span class="w">
</span><span class="nt">"url"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"{{ site.baseurl }}{{ post.url }}"</span><span class="p">,</span><span class="w">
</span><span class="nt">"date"</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="s2">"{{ post.date }}"</span><span class="w">
</span><span class="p">}</span><span class="w"> </span><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">unless</span><span class="w"> </span><span class="err">forloop.last</span><span class="w"> </span><span class="err">%</span><span class="p">},{</span><span class="err">%</span><span class="w"> </span><span class="err">endunless</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
</span><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">endfor</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
</span><span class="p">]</span></code></pre></figure>
<p>Depois dentro da pasta <code class="highlighter-rouge">assets/js</code>, crie um arquivo <code class="highlighter-rouge">script.js</code> e digite:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Abrir e Fechar - Barra de Pesquisa</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".bt-search"</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#search-container"</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search-container"</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s2">":visible"</span><span class="p">)</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".bt-search"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'aria-expanded'</span><span class="p">,</span> <span class="s1">'true'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".bt-close"</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#search-container"</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#search-container"</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s2">":hidden"</span><span class="p">)</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".bt-search"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'aria-expanded'</span><span class="p">,</span> <span class="s1">'false'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// Simple Jekyll Search</span>
<span class="nx">SimpleJekyllSearch</span><span class="p">({</span>
<span class="na">searchInput</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'search-input'</span><span class="p">),</span>
<span class="na">resultsContainer</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'results-container'</span><span class="p">),</span>
<span class="na">json</span><span class="p">:</span> <span class="s1">'/search.json'</span><span class="p">,</span>
<span class="na">searchResultTemplate</span><span class="p">:</span> <span class="s1">'<li><a href="{url}" title="{desc}">{title}</a></li>'</span><span class="p">,</span>
<span class="na">noResultsText</span><span class="p">:</span> <span class="s1">'Sem resultados'</span>
<span class="p">})</span></code></pre></figure>
<p>Primeiro criamos a função que abre e fecha a barra de pesquisa e depois implementamos o plugin Simple Jekyll Search.</p>
<h3 id="abrindo-e-fechando-o-menu">Abrindo e fechando o Menu</h3>
<p>Ainda no arquivo <code class="highlighter-rouge">script.js</code>, adicione isso:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Abrir e Fechar - Menu</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".bt-menu"</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".menu"</span><span class="p">).</span><span class="nx">toggle</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">".menu"</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s2">":visible"</span><span class="p">)</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".bt-menu"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'aria-expanded'</span><span class="p">,</span> <span class="s1">'true'</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".bt-menu"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'aria-expanded'</span><span class="p">,</span> <span class="s1">'false'</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">});</span>
<span class="c1">// Retirar o estilo com o redimensionamento da tela</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">resize</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="k">if</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span> <span class="o">></span> <span class="mi">800</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">".menu"</span><span class="p">).</span><span class="nx">removeAttr</span><span class="p">(</span><span class="s2">"style"</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#search-container"</span><span class="p">).</span><span class="nx">removeAttr</span><span class="p">(</span><span class="s2">"style"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></figure>
<p>Primeiro criamos a função que abre e fecha o menu e depois corrigimos um bug que é gerado quando redimensionamos a tela.</p>
<h3 id="chamando-os-arquivos-js">Chamando os arquivos js</h3>
<p>Já configuramos o nosso JavaScript, agora vamos chamar os arquivos. Para isso abra o arquivo <code class="highlighter-rouge">footer.html</code> e adicione as seguintes linhas:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"/assets/components/jquery/dist/jquery.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/assets/components/simple-jekyll-search/dest/jekyll-search.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"/assets/js/script.js"</span><span class="nt">></script></span></code></pre></figure>
<p>Pronto, agora nosso JavaScript já está funcionando corretamente!</p>
<h2 id="corrigindo-erros-no-arquivos">Corrigindo erros no arquivos</h2>
<p>Se você acessar o blog, vai perceber que os ícones SVG não estão aparecendo. Isso acontece porque não chamamos o arquivo <code class="highlighter-rouge">svg.html</code> no nosso <code class="highlighter-rouge">head.html</code>, para corrigir isso adicione <code class="highlighter-rouge"><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">include</span><span class="w"> </span><span class="err">svg.html</span><span class="w"> </span><span class="err">%</span><span class="p">}</span></code> no arquivo <code class="highlighter-rouge">head.html</code> e pronto, está corrigido!</p>
<h2 id="concluso">Conclusão</h2>
<p>Adicionamos <strong>CSS</strong> e <strong>JavaScript</strong> ao blog, agora ele já está praticamente pronto. Na próxima e última parte desse tutorial, irei ensinar como escrever <strong>posts</strong> e adicionar <strong>páginas</strong> ao blog, também iremos subir ele para o GitHub. <strong>Aguarde!</strong></p>
<p>Dúvidas? <strong>Comente!</strong></p>Mateus MedeirosIntroduçãoCriando um blog com Jekyll - Parte 22016-01-17T21:35:00+00:002016-01-17T21:35:00+00:00http://mateussmedeiros.github.io/blade-theme//blade-theme/criando-um-blog-com-jekyll-parte-2<h2 id="introduo">Introdução</h2>
<p>Dando continuidade ao tutorial de como criar um blog com Jekyll, hoje vamos configurar a pasta <code class="highlighter-rouge">_layouts</code> e a página inicial do blog, o arquivo <code class="highlighter-rouge">index.html</code>. Você pode acompanhar o andamento do nosso tutorial no <a href="https://github.com/mateussmedeiros/tutorial-jekyll" target="_blank">GitHub</a>. Se você ainda não viu a primeira parte, corre lá e depois volta aqui:</p>
<ul>
<li><a href="http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-1/" target="_blank">Parte 1</a>.</li>
</ul>
<h2 id="pasta-layouts">Pasta _layouts</h2>
<p>Na pasta <code class="highlighter-rouge">_layouts</code>, tem - por padrão - 3 arquivos:</p>
<ul>
<li><strong>default.html</strong>: estrutura padrão das páginas.</li>
<li><strong>page.html</strong>: estrutura de páginas secundárias.</li>
<li><strong>post.html</strong>: estrutura dos posts.</li>
</ul>
<p>Nós iremos manter todas elas, vamos agora editá-las. Lembrando que <strong>não existe</strong> espaço entre as chaves.</p>
<h3 id="defaulthtml">default.html</h3>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="c"><!-- Incui o arquivo head.html --></span>
{ % include head.html % }
<span class="nt"><body></span>
<span class="c"><!-- Inclui o arquivo header.html --></span>
{ % include header.html % }
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"page-content"</span><span class="nt">></span>
<span class="c"><!-- Inclui o conteúdo da página --></span>
{ { content } }
<span class="nt"></div></span>
<span class="c"><!-- Inclui o arquivo footer.html --></span>
{ % include footer.html % }
<span class="nt"></body></span>
<span class="nt"></html></span></code></pre></figure>
<p>Nós mantemos a maior parte do arquivo, apenas retiramos o <strong>wrapper</strong> da página. Aqui estamos incluindo os arquivos <code class="highlighter-rouge">head.html</code>, <code class="highlighter-rouge">header.html</code> e <code class="highlighter-rouge">footer.html</code> que estão na pasta <code class="highlighter-rouge">_includes</code> que configuramos na <a href="http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-1/" target="_blank">parte anterior</a>.</p>
<h3 id="pagehtml">page.html</h3>
<figure class="highlight"><pre><code class="language-html" data-lang="html">---
layout: default
---
<span class="nt"><article</span> <span class="na">class=</span><span class="s">"post"</span><span class="nt">></span>
<span class="c"><!-- Chamamos o título da página --></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"post-title"</span><span class="nt">></span>{ { page.title } }<span class="nt"></h1></span>
<span class="c"><!-- Incluimos o conteúdo da página --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"post-content"</span><span class="nt">></span>
{ { content } }
<span class="nt"></div></span>
<span class="nt"></article></span></code></pre></figure>
<p>Incluimos a estrutura do arquivo <code class="highlighter-rouge">default.html</code>, e colocamos uma estrutura simples com apenas o título e o conteúdo da página.</p>
<h2 id="posthtml">post.html</h2>
<figure class="highlight"><pre><code class="language-html" data-lang="html">---
layout: default
---
<span class="nt"><article</span> <span class="na">class=</span><span class="s">"post"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"http://schema.org/BlogPosting"</span><span class="nt">></span>
<span class="c"><!-- Chamamos o título do post --></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"post-title"</span> <span class="na">itemprop=</span><span class="s">"name headline"</span><span class="nt">></span>{ { page.title } }<span class="nt"></h1></span>
<span class="c"><!-- Incluimos a data e o autor do post --></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"post-meta"</span><span class="nt">><time</span> <span class="na">datetime=</span><span class="s">"{ { page.date | date_to_xmlschema } }"</span> <span class="na">itemprop=</span><span class="s">"datePublished"</span><span class="nt">></span>{ { page.date | date: "%-d %b, %Y" } }<span class="nt"></time></span>{ % if page.author % } | <span class="nt"><span</span> <span class="na">itemprop=</span><span class="s">"author"</span> <span class="na">itemscope</span> <span class="na">itemtype=</span><span class="s">"http://schema.org/Person"</span><span class="nt">><span</span> <span class="na">itemprop=</span><span class="s">"name"</span><span class="nt">></span>{ { page.author } }<span class="nt"></span></span></span>{ % endif % }<span class="nt"></p></span>
<span class="c"><!-- Icluimos o conteúdo do post --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"post-content"</span> <span class="na">itemprop=</span><span class="s">"articleBody"</span><span class="nt">></span>
{ { content } }
<span class="nt"></div></span>
<span class="c"><!-- Incluimos os botões de compartilhamento --></span>
{ % include share.html % }
<span class="c"><!-- Incluimos a seção com o autor do post --></span>
{ % include author.html % }
<span class="c"><!-- Incluimos os comentários --></span>
{ % include comments.html % }
<span class="nt"></article></span></code></pre></figure>
<p>Aqui também incluimos o arquivo <code class="highlighter-rouge">default.html</code>, abaixo do título incluimos a <strong>data</strong> e o <strong>autor</strong> do post. Depois do conteúdo, incluimos os arquivos que criamos na <a href="http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-1/" target="_blank">parte anterior</a>: <code class="highlighter-rouge">share.html</code>, <code class="highlighter-rouge">author.html</code> e <code class="highlighter-rouge">comments.html</code>.</p>
<h2 id="pgina-inicial-do-blog-indexhtml">Página inicial do blog: index.html</h2>
<p>Terminamos as estruturas dos layouts, agora vamos editar nossa página inicial. Ela ficou assim:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">---
layout: default
---
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"home"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"post-list"</span><span class="nt">></span>
<span class="c"><!-- Procura os posts no blog e lista eles --></span>
{ % for post in site.posts % }
<span class="nt"><li></span>
<span class="c"><!-- Inclui o título com link do post --></span>
<span class="nt"><h2></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"post-link"</span> <span class="na">href=</span><span class="s">"{ { post.url | prepend: site.baseurl } }"</span><span class="nt">></span>{ { post.title } }<span class="nt"></a></span>
<span class="nt"></h2></span>
<span class="c"><!-- Inclui a data e autor do post --></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"post-meta"</span><span class="nt">></span>{ { post.date | date: "%-d %b, %Y" } } { % if page.author % } | { { page.author } } { % endif % }<span class="nt"></span></span>
<span class="c"><!-- Inclui a descrição do post --></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"post-description"</span><span class="nt">></span>{ { post.description } }<span class="nt"></p></span>
<span class="c"><!-- Inclui um Leia mais com o link do post --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"{ { post.permalink | prepend: site.baseurl } }"</span><span class="nt">></span> Leia mais sobre { { post.title } }...<span class="nt"></a></span>
<span class="c"><!-- Inclui as tags do post --></span>
{ % include tags.html % }
<span class="nt"></li></span>
<span class="nt"><hr></span>
{ % endfor % }
<span class="nt"></ul></span>
<span class="c"><!-- Incrição do feed --></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"rss-subscribe"</span><span class="nt">></span> Inscreva-se <span class="nt"><a</span> <span class="na">href=</span><span class="s">"{ { "</span><span class="err">/</span><span class="na">feed</span><span class="err">.</span><span class="na">xml</span><span class="err">"</span> <span class="err">|</span> <span class="na">prepend:</span> <span class="na">site</span><span class="err">.</span><span class="na">baseurl</span> <span class="err">}</span> <span class="err">}"</span><span class="nt">></span>via RSS<span class="nt"></a></p></span>
<span class="nt"></div></span></code></pre></figure>
<p>Listamos os posts com:</p>
<ul>
<li><strong>Título</strong></li>
<li><strong>Data</strong> e <strong>autor</strong> do post</li>
<li><strong>Descrição</strong> do post</li>
<li><strong>Leia mais</strong> com o link do post</li>
<li><strong>Tags</strong> do post</li>
</ul>
<p>No final da página, tem um link para subscrição do <strong>feed</strong> do blog.</p>
<h2 id="concluso">Conclusão</h2>
<p>Chegamos ao final da segunda parte, configuramos a pasta <code class="highlighter-rouge">_layouts</code> e a página inicial do blog. Até agora já temos prontos as pastas: <code class="highlighter-rouge">_includes</code> e <code class="highlighter-rouge">_layouts</code> e os arquivos: <code class="highlighter-rouge">_config.yml</code> e <code class="highlighter-rouge">index.html</code>. Na próxima parte vamos editar nosso <strong>CSS</strong>, adicionar <strong>JavaScript</strong> e aprender a escrever posts.</p>
<p>Dúvida? Comente!</p>
<p><strong>Até a próxima!</strong></p>Mateus MedeirosIntroduçãoCriando um blog com Jekyll - Parte 12016-01-15T17:00:00+00:002016-01-15T17:00:00+00:00http://mateussmedeiros.github.io/blade-theme//blade-theme/criando-um-blog-com-jekyll-parte-1<h2 id="introduo">Introdução</h2>
<p>Fala galera, recebi vários feedbacks positivos do post anterior, o que me motivou ainda mais a continuar essa série sobre Jekyll. Vamos lá para esse segundo post, iremos aprender passo-a-passo como criar um blog com jekyll. Para não ficar muito longo, irei dividir esse tutorial em partes.</p>
<p>Nessa primeira parte, iremos configurar a pasta <code class="highlighter-rouge">_includes</code> e o arquivo <code class="highlighter-rouge">_config.yml</code>. Preparei um pequeno layout que servirá de base para a construção do nosso blog. Você pode conferir abaixo:</p>
<p><img src="/assets/img/layout-tutorial-jekyll.png" alt="Layout do nosso blog com Jekyll" class="center" /></p>
<p>Todo o código utilizado aqui, estará disponível no <a href="https://github.com/mateussmedeiros/tutorial-jekyll" target="_blank">repositório que criei no GitHub</a>.</p>
<h2 id="preparando-o-projeto">Preparando o projeto</h2>
<p>A primeira coisa que iremos fazer é criar a pasta do nosso blog, abra o seu terminal e digite:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">jekyll new tutorial-jekyll</code></pre></figure>
<p>O nome que escolhi para a minha pasta foi <strong>tutorial-jekyll</strong>, você pode escolher o nome que quiser para a sua pasta.</p>
<h2 id="gerando-o-servidor">Gerando o servidor</h2>
<p>Criado a pasta do nosso blog, vamos gerar um servidor para acompanharmos o andamento do desenvolvimento. Ainda no terminal digite:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="c"># Entrar na pasta do blog</span>
<span class="nb">cd </span>tutorial-jekyll
<span class="c"># Gerar o servidor</span>
jekyll serve</code></pre></figure>
<p>O servidor será criado na porta <strong>4000</strong> por padrão, para acessar entre em <a href="http://localhost:4000" target="_blank">http://localhost:4000</a> ou <a href="http://127.0.0.1:4000" target="_blank">http://127.0.0.1:4000</a>.</p>
<h2 id="configurando-o-blog">Configurando o blog</h2>
<p>Vamos agora configurar o nosso blog, abra o arquivo <code class="highlighter-rouge">_config.yml</code> no seu editor preferido e vamos lá.</p>
<p>O meu arquivo <code class="highlighter-rouge">_config.yml</code> ficou assim:</p>
<figure class="highlight"><pre><code class="language-yaml" data-lang="yaml"><span class="c1"># Site settings</span>
<span class="s">title</span><span class="pi">:</span> <span class="s">Tutorial Jekyll</span> <span class="c1"># Título do Blog</span>
<span class="s">subtitle</span><span class="pi">:</span> <span class="s">Como construir um blog com Jekyll</span> <span class="c1"># Subtítulo do Blog, opcional</span>
<span class="s">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Tutorial</span><span class="nv"> </span><span class="s">de</span><span class="nv"> </span><span class="s">como</span><span class="nv"> </span><span class="s">construir</span><span class="nv"> </span><span class="s">um</span><span class="nv"> </span><span class="s">blog</span><span class="nv"> </span><span class="s">com</span><span class="nv"> </span><span class="s">Jekyll,</span><span class="nv"> </span><span class="s">feito</span><span class="nv"> </span><span class="s">por</span><span class="nv"> </span><span class="s">Mateus</span><span class="nv"> </span><span class="s">Medeiros"</span> <span class="c1"># Descrição do Blog</span>
<span class="s">url</span><span class="pi">:</span> <span class="s2">"</span><span class="s">http://tutorial-jekyll.github.io"</span> <span class="c1"># Endereço do nosso blog</span>
<span class="c1"># Author Settings</span>
<span class="s">author</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Mateus Medeiros</span> <span class="c1"># Nome do autor</span>
<span class="s">img</span><span class="pi">:</span> <span class="s">/assets/img/perfil.jpg</span> <span class="c1"># Imagem do Autor</span>
<span class="s">blog</span><span class="pi">:</span> <span class="s">http://devmateusmedeiros.com.br</span> <span class="c1"># Blog do autor</span>
<span class="s">email</span><span class="pi">:</span> <span class="s">mateus.sousamedeiros@gmail.com</span> <span class="c1"># Email do autor</span>
<span class="s">twitter</span><span class="pi">:</span> <span class="s">mateussousam</span> <span class="c1"># Twitter do autor</span>
<span class="s">github</span><span class="pi">:</span> <span class="s">mateussmedeiros</span> <span class="c1"># GitHub do autor</span>
<span class="s">bio</span><span class="pi">:</span> <span class="s">Desenvolvedor Front End apaixonado por novas tecnologias. Sou apaixonado pelo que faço e procuro aprender cada dia mais.</span> <span class="c1"># Descrição do autor</span>
<span class="c1"># Build settings</span>
<span class="s">markdown</span><span class="pi">:</span> <span class="s">kramdown</span> <span class="c1"># Estilo do Markdown</span>
<span class="s">permalink</span><span class="pi">:</span> <span class="s">/:categories/:title/</span> <span class="c1"># Configuração dos links do blog</span>
<span class="s">css_folder</span><span class="pi">:</span> <span class="s2">"</span><span class="s">/assets/css"</span> <span class="c1"># Caminho dos arquivos css</span>
<span class="s">js_folder</span><span class="pi">:</span> <span class="s2">"</span><span class="s">/assets/js"</span> <span class="c1"># Caminho dos arquivos js</span>
<span class="s">img_folder</span><span class="pi">:</span> <span class="s2">"</span><span class="s">/assets/img"</span> <span class="c1"># Caminho das imagens</span>
<span class="s">sass</span><span class="pi">:</span>
<span class="s">style</span><span class="pi">:</span> <span class="s">compressed</span> <span class="c1"># Configuração dos arquivos css gerados pelo sass, compressed gera o css minificado</span></code></pre></figure>
<p>O código já está bastante comentado, você deve trocar os valores das variáveis de acordo com as informações do seu blog.</p>
<h2 id="configurando-as-pastas">Configurando as pastas</h2>
<p>Vamos agora configurar as nossas pastas. Primeiramente criaremos a pasta <code class="highlighter-rouge">assets</code>, dentro dela criaremos 2 pastas: <code class="highlighter-rouge">js</code> e <code class="highlighter-rouge">img</code>, também moveremos a pasta <code class="highlighter-rouge">css</code> para cá, ficando assim:</p>
<ul>
<li><strong>css</strong>: onde ficará o arquivo main.scss que o <strong>sass</strong> irá compilar.</li>
<li><strong>img</strong>: onde ficarão as imagens.</li>
<li><strong>js</strong>: onde ficarão os arquivos JavaScript.</li>
</ul>
<p>Feito isso, vamos configurar a pasta <code class="highlighter-rouge">_includes</code>.</p>
<h3 id="pasta-includes">Pasta _includes</h3>
<p>A nossa pasta <code class="highlighter-rouge">_includes</code> contém - por padrão - 7 arquivos:</p>
<ul>
<li><strong>footer.html</strong></li>
<li><strong>head.html</strong></li>
<li><strong>header.html</strong></li>
<li><strong>icon-github.html</strong></li>
<li><strong>icon-github.svg</strong></li>
<li><strong>icon-twitter.html</strong></li>
<li><strong>icon-twitter.svg</strong></li>
</ul>
<p>Iremos manter apenas o 3 primeiros arquivos e criar outros 5 arquivos, ficando assim:</p>
<ul>
<li><strong>author.html</strong>: é seção do autor de cada post.</li>
<li><strong>comments.html</strong>: é a seção de comentários nos posts.</li>
<li><strong>footer.html</strong>: é o footer do nosso blog.</li>
<li><strong>head.html</strong>: é o head do nosso blog.</li>
<li><strong>header.html</strong>: é o header do nosso blog, onde ficará também o nosso menu.</li>
<li><strong>share.html</strong>: é a seção de compartilhamento dos posts.</li>
<li><strong>svg.html</strong>: é o arquivo onde ficará os ícones svg.</li>
<li><strong>tags.html</strong>: é o arquivo onde ficará o laço <strong>for</strong> para listar todas as tags utilizadas no blog.</li>
</ul>
<p>Vamos configurar agora cada um dos nossos arquivos. Irei colocar como ficou cada arquivo, ele será comentado, então darei apenas uma breve explicação de cada arquivo.</p>
<p><strong>Aviso</strong>: Não existe espaço entre as chaves, coloquei porque uso Jekyll, então não iriam funcionar os exemplos.</p>
<h4 id="headhtml">head.html</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
<span class="c"><!-- Pega o título da página e exibe no title, se a página não tiver título, exibe o título do site --></span>
<span class="nt"><title></span>{ { page.title } }<span class="nt"></title></span>
<span class="c"><!-- Pega a descrição da página e exibe no title, se a página não tiver descrição, exibe a descrição do site --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"{ { page.description | strip_html | strip_newlines | truncate: 160 } }"</span><span class="nt">></span>
<span class="c"><!-- Caminho do arquivo CSS, pode ser alterado de acordo com o projeto --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"{ { "</span><span class="err">/</span><span class="na">assets</span><span class="err">/</span><span class="na">css</span><span class="err">/</span><span class="na">main</span><span class="err">.</span><span class="na">css</span><span class="err">"</span> <span class="err">|</span> <span class="na">prepend:</span> <span class="na">site</span><span class="err">.</span><span class="na">baseurl</span> <span class="err">}</span> <span class="err">}"</span><span class="nt">></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"canonical"</span> <span class="na">href=</span><span class="s">"{ { page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url } }"</span><span class="nt">></span>
<span class="c"><!-- Caminho do Feed do blog --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"alternate"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="na">title=</span><span class="s">"{ { site.title } }"</span> <span class="na">href=</span><span class="s">"{ { "</span><span class="err">/</span><span class="na">feed</span><span class="err">.</span><span class="na">xml</span><span class="err">"</span> <span class="err">|</span> <span class="na">prepend:</span> <span class="na">site</span><span class="err">.</span><span class="na">baseurl</span> <span class="err">|</span> <span class="na">prepend:</span> <span class="na">site</span><span class="err">.</span><span class="na">url</span> <span class="err">}</span> <span class="err">}"</span><span class="nt">></span>
<span class="c"><!-- Caminho do favicon do blog, também pode ser alterado --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"shortcut icon"</span> <span class="na">href=</span><span class="s">"/assets/img/favicon.ico"</span> <span class="na">type=</span><span class="s">"image/x-icon"</span><span class="nt">></span>
<span class="c"><!-- Social Meta Tags: Facebook | Twitter | Google+ / Já está configurado para o blog --></span>
<span class="c"><!-- Social: Facebook / Open Graph --></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"{ { page.title } }"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"article"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:url"</span> <span class="na">content=</span><span class="s">"{ { page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url } }"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:image"</span> <span class="na">content=</span><span class="s">"http://mateussmedeiros.github.io/blade-theme//blade-theme/assets/img/image-blog.png"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"{ { page.description | strip_html | strip_newlines | truncate: 160 } }"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:site_name"</span> <span class="na">content=</span><span class="s">"{ { site.title } }"</span><span class="nt">></span>
<span class="c"><!-- Social: Twitter --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:card"</span> <span class="na">content=</span><span class="s">"summary_large_image"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:site"</span> <span class="na">content=</span><span class="s">"{ { site.author.twitter } }"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:title"</span> <span class="na">content=</span><span class="s">"{ { site.title } }"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:description"</span> <span class="na">content=</span><span class="s">"{ { site.description } }"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"twitter:image:src"</span> <span class="na">content=</span><span class="s">"{ { site.url } }{ { post.image } }"</span><span class="nt">></span>
<span class="c"><!-- Social: Google+ / Schema.org --></span>
<span class="nt"><meta</span> <span class="na">itemprop=</span><span class="s">"name"</span> <span class="na">content=</span><span class="s">"{ { site.title } }"</span><span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">itemprop=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"{ { site.description } }"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">itemprop=</span><span class="s">"image"</span> <span class="na">content=</span><span class="s">"{ { post.image | prepend: site.baseurl | prepend: site.url } }"</span><span class="nt">/></span>
<span class="nt"></head></span></code></pre></figure>
<p>Esse arquivo não precisa de muita explicação, já está bem comentado. Ele já está com as <strong>Social Meta Tags</strong> configuradas, muito importante para o compartilhamento dos posts.</p>
<h4 id="headerhtml">header.html</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><header</span> <span class="na">class=</span><span class="s">"header"</span><span class="nt">></span>
<span class="c"><!-- Botão do Menu mobile --></span>
<span class="nt"><button</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"menu"</span> <span class="na">aria-label=</span><span class="s">"Clique para abrir o menu"</span> <span class="na">class=</span><span class="s">"bt-menu"</span><span class="nt">><svg</span> <span class="na">class=</span><span class="s">"icon-top icon-menu"</span><span class="nt">><use</span> <span class="na">xlink:href=</span><span class="s">"#icon-menu"</span><span class="nt">></use></svg></button></span>
<span class="c"><!-- Menu --></span>
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"menu"</span><span class="nt">></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span> Nav Item 1 <span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span> Nav Item 2 <span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span> Nav Item 3 <span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span> Nav Item 4 <span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
<span class="c"><!-- Botão da Pesquisa --></span>
<span class="nt"><button</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"search-container"</span> <span class="na">aria-label=</span><span class="s">"Pesquisar no Blog"</span> <span class="na">class=</span><span class="s">"bt-search"</span><span class="nt">><svg</span> <span class="na">class=</span><span class="s">"icon-top icon-search"</span><span class="nt">><use</span> <span class="na">xlink:href=</span><span class="s">"#icon-search"</span><span class="nt">></use></svg></button></span>
<span class="c"><!-- Container da Pesquisa --></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"search-container"</span><span class="nt">></span>
<span class="c"><!-- Barra de Pesquisa --></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"search-input"</span> <span class="na">placeholder=</span><span class="s">"Pesquisar posts no blog..."</span><span class="nt">></span>
<span class="c"><!-- Botão de fechamento do container da pesquisa --></span>
<span class="nt"><button</span> <span class="na">aria-label=</span><span class="s">"Fechar Barra de Pesquisa"</span> <span class="na">class=</span><span class="s">"bt-close"</span><span class="nt">><svg</span> <span class="na">class=</span><span class="s">"icon-top icon-close"</span><span class="nt">><use</span> <span class="na">xlink:href=</span><span class="s">"#icon-close"</span><span class="nt">></use></svg></button></span>
<span class="c"><!-- Lista de resultados --></span>
<span class="nt"><ul</span> <span class="na">id=</span><span class="s">"results-container"</span><span class="nt">></ul></span>
<span class="nt"></div></span>
<span class="c"><!-- Título do Blog --></span>
<span class="nt"><hgroup</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>
<span class="c"><!-- Título Principal --></span>
<span class="nt"><h1></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span> { { site.title } } <span class="nt"></a></span> <span class="nt"></h1></span>
<span class="c"><!-- Subtítulo --></span>
<span class="nt"><h2></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span> { { site.subtitle } } <span class="nt"></a></span> <span class="nt"></h2></span>
<span class="nt"></hgroup></span>
<span class="nt"></header></span></code></pre></figure>
<p>Esse é o arquivo do nosso <strong>header</strong>, nele temos:</p>
<ul>
<li><strong>Menu</strong>: ficará no topo à esquerda alinhado com o botão da pesquisa.</li>
<li><strong>Pesquisa</strong>: ficará fechado, se abrirá quando clicarmos no botão. Quando aberto, irá sobrepor a página inteira. Utilizaremos o plugin <a href="https://github.com/christian-fei/Simple-Jekyll-Search" target="_blank">Simple Jekyll Searching</a> para fazer a pesquisa dos posts.</li>
<li><strong>Título</strong>: ficará abaixo do menu e centralizado, utilizaremos uma sombra para destacá-lo. Nele há 2 variáveis: o <code class="highlighter-rouge"><span class="p">{</span><span class="w"> </span><span class="err">{</span><span class="w"> </span><span class="err">site.title</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="err">}</span></code> e o <code class="highlighter-rouge"><span class="p">{</span><span class="w"> </span><span class="err">{</span><span class="w"> </span><span class="err">site.subtitle</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="err">}</span></code>, essas variáveis foram definidas no arquivo <code class="highlighter-rouge">_config.yml</code>.</li>
</ul>
<h4 id="footerhtml">footer.html</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><footer</span> <span class="na">class=</span><span class="s">"footer"</span><span class="nt">></span>
<span class="nt"><p></span> <span class="ni">&copy;</span> 2016 { { site.title } } - { { site.subtitle } } | Todos os Direitos Reservados <span class="nt"></p></span>
<span class="nt"><p></span> Tutorial por <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://devmateusmedeiros.com.br"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">title=</span><span class="s">"Ir para o meu blog"</span><span class="nt">></span> Mateus Medeiros <span class="nt"></a></span> <span class="nt"></p></span>
<span class="nt"></footer></span></code></pre></figure>
<p>Utilizamos as mesmas variáveis que no <code class="highlighter-rouge">header.html</code>. Esse arquivo pode ser editado como você desejar.</p>
<h4 id="sharehtml">share.html</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><section</span> <span class="na">class=</span><span class="s">"share"</span><span class="nt">></span>
<span class="nt"><h3></span> Compartilhe <span class="nt"></h3></span>
<span class="c"><!-- Botões de Compartilhamento --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"share-buttons"</span><span class="nt">></span>
<span class="c"><!-- Twitter --></span>
<span class="nt"><a</span> <span class="na">aria-label=</span><span class="s">"Compartilhe no Twitter"</span> <span class="na">href=</span><span class="s">"https://twitter.com/intent/tweet?text=&quot;{ { page.twitter_text } }&quot;%20{ { site.url } }{ { page.url } }%20via%20&#64;{ { site.twitter_username } }&hashtags={ {tag}},{ {tag}},"</span>
<span class="na">onclick=</span><span class="s">"window.open(this.href, 'twitter-share');return false;"</span> <span class="na">title=</span><span class="s">"Compartilhe no Twitter"</span><span class="nt">></span>
<span class="nt"><svg</span> <span class="na">class=</span><span class="s">"icon icon-twitter"</span><span class="nt">><use</span> <span class="na">xlink:href=</span><span class="s">"#icon-twitter"</span><span class="nt">></use></svg></span>
<span class="nt"></a></span>
<span class="c"><!-- Facebook --></span>
<span class="nt"><a</span> <span class="na">aria-label=</span><span class="s">"Compartilhe no Facebook"</span> <span class="na">href=</span><span class="s">"https://www.facebook.com/sharer/sharer.php?u={ { site.url } }{ { page.url } }"</span>
<span class="na">onclick=</span><span class="s">"window.open(this.href, 'facebook-share');return false;"</span> <span class="na">title=</span><span class="s">"Compartilhe no Facebook"</span><span class="nt">></span>
<span class="nt"><svg</span> <span class="na">class=</span><span class="s">"icon icon-facebook"</span><span class="nt">><use</span> <span class="na">xlink:href=</span><span class="s">"#icon-facebook"</span><span class="nt">></use></svg></span>
<span class="nt"></a></span>
<span class="c"><!-- Google+ --></span>
<span class="nt"><a</span> <span class="na">aria-label=</span><span class="s">"Compartilhe no Google Plus"</span> <span class="na">href=</span><span class="s">"https://plus.google.com/share?url={ { site.url } }{ { page.url } }"</span>
<span class="na">onclick=</span><span class="s">"window.open(this.href, 'google-plus-share');return false;"</span> <span class="na">title=</span><span class="s">"Compartilhe no Google+"</span><span class="nt">></span>
<span class="nt"><svg</span> <span class="na">class=</span><span class="s">"icon icon-google-plus"</span><span class="nt">><use</span> <span class="na">xlink:href=</span><span class="s">"#icon-google-plus"</span><span class="nt">></use></svg></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></section></span></code></pre></figure>
<p>Criamos os botões de compartilhamento, utilizamos SVG para os ícones da redes sociais. Configuraremos os ícones SVG no arquivo <code class="highlighter-rouge">svg.html</code>.</p>
<h4 id="authorhtml">author.html</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><section</span> <span class="na">class=</span><span class="s">"author"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"details"</span><span class="nt">></span>
<span class="c"><!-- Imagem do autor --></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"{ { site.author.img } }"</span> <span class="na">alt=</span><span class="s">"{ { site.author.name } }"</span> <span class="na">class=</span><span class="s">"img-author"</span><span class="nt">></span>
<span class="nt"><p><b></span> Autor <span class="nt"></b></p></span>
<span class="c"><!-- Nome do autor com link para o blog do autor --></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"name"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"{ { site.author.blog } }"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">title=</span><span class="s">"Visite meu blog"</span><span class="nt">></span> { { site.author.name } } <span class="nt"></a></span>
<span class="nt"></h2></span>
<span class="c"><!-- Descrição do autor --></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"description"</span><span class="nt">></span>{ { site.author.bio } }<span class="nt"></p></span>
<span class="c"><!-- Email do autor --></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"email"</span> <span class="na">href=</span><span class="s">"mailto:{ { site.author.email } }"</span><span class="nt">></span>{ { site.author.email } }<span class="nt"></a></span>
<span class="c"><!-- Twitter do autor --></span>
<span class="nt"><p></span> Twitter: <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://twitter.com/{ { site.author.twitter } }"</span><span class="nt">></span> @{ { site.author.twitter } }<span class="nt"></a></p></span>
<span class="c"><!-- GitHub do autor --></span>
<span class="nt"><p></span> GitHub: <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://github.com/{ { site.author.github } }"</span><span class="nt">></span> { { site.author.github } }<span class="nt"></a></p></span>
<span class="nt"></div></span>
<span class="nt"></section></span></code></pre></figure>
<p>Esse já está bastante comentado, ele puxará os valores das variáveis do autor definidas no <code class="highlighter-rouge">_config.yml</code>.</p>
<h4 id="commentshtml">comments.html</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Utilizaremos o Disqus(disqus.com) para o sistema de comentários --></span>
<span class="nt"><section</span> <span class="na">class=</span><span class="s">"comments"</span><span class="nt">></span>
<span class="nt"><h2></span>Comentários<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"disqus_thread"</span><span class="nt">></div></span>
<span class="nt"></section></span>
<span class="c"><!-- Aqui vai o script fornecido pelo Disqus --></span></code></pre></figure>
<p>Utilizaremos o Disqus para os comentários, depois irei fazer um post ensinando como implementar ele no seu blog.</p>
<h4 id="svghtml">svg.html</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><svg</span> <span class="na">style=</span><span class="s">"position: absolute; width: 0; height: 0;"</span> <span class="na">width=</span><span class="s">"0"</span> <span class="na">height=</span><span class="s">"0"</span> <span class="na">version=</span><span class="s">"1.1"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">xmlns:xlink=</span><span class="s">"http://www.w3.org/1999/xlink"</span><span class="nt">></span>
<span class="nt"><defs></span>
<span class="c"><!-- Ícone do Menu --></span>
<span class="nt"><symbol</span> <span class="na">id=</span><span class="s">"icon-menu"</span> <span class="na">viewBox=</span><span class="s">"0 0 1024 1024"</span><span class="nt">></span>
<span class="nt"><title></span>menu<span class="nt"></title></span>
<span class="nt"><path</span> <span class="na">class=</span><span class="s">"path1"</span> <span class="na">d=</span><span class="s">"M64 192h896v192h-896zM64 448h896v192h-896zM64 704h896v192h-896z"</span><span class="nt">></path></span>
<span class="nt"></symbol></span>
<span class="c"><!-- Ícone de Fechamento --></span>
<span class="nt"><symbol</span> <span class="na">id=</span><span class="s">"icon-close"</span> <span class="na">viewBox=</span><span class="s">"0 0 1024 1024"</span><span class="nt">></span>
<span class="nt"><title></span>close<span class="nt"></title></span>
<span class="nt"><path</span> <span class="na">class=</span><span class="s">"path1"</span> <span class="na">d=</span><span class="s">"M1014.662 822.66c-0.004-0.004-0.008-0.008-0.012-0.010l-310.644-310.65 310.644-310.65c0.004-0.004 0.008-0.006 0.012-0.010 3.344-3.346 5.762-7.254 7.312-11.416 4.246-11.376 1.824-24.682-7.324-33.83l-146.746-146.746c-9.148-9.146-22.45-11.566-33.828-7.32-4.16 1.55-8.070 3.968-11.418 7.31 0 0.004-0.004 0.006-0.008 0.010l-310.648 310.652-310.648-310.65c-0.004-0.004-0.006-0.006-0.010-0.010-3.346-3.342-7.254-5.76-11.414-7.31-11.38-4.248-24.682-1.826-33.83 7.32l-146.748 146.748c-9.148 9.148-11.568 22.452-7.322 33.828 1.552 4.16 3.97 8.072 7.312 11.416 0.004 0.002 0.006 0.006 0.010 0.010l310.65 310.648-310.65 310.652c-0.002 0.004-0.006 0.006-0.008 0.010-3.342 3.346-5.76 7.254-7.314 11.414-4.248 11.376-1.826 24.682 7.322 33.83l146.748 146.746c9.15 9.148 22.452 11.568 33.83 7.322 4.16-1.552 8.070-3.97 11.416-7.312 0.002-0.004 0.006-0.006 0.010-0.010l310.648-310.65 310.648 310.65c0.004 0.002 0.008 0.006 0.012 0.008 3.348 3.344 7.254 5.762 11.414 7.314 11.378 4.246 24.684 1.826 33.828-7.322l146.746-146.748c9.148-9.148 11.57-22.454 7.324-33.83-1.552-4.16-3.97-8.068-7.314-11.414z"</span><span class="nt">></path></span>
<span class="nt"></symbol></span>
<span class="c"><!-- Ícone do Email --></span>
<span class="nt"><symbol</span> <span class="na">id=</span><span class="s">"icon-email"</span> <span class="na">viewBox=</span><span class="s">"0 0 1024 1024"</span><span class="nt">></span>
<span class="nt"><title></span>email<span class="nt"></title></span>
<span class="nt"><path</span> <span class="na">class=</span><span class="s">"path1"</span> <span class="na">d=</span><span class="s">"M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM256 256h512c9.138 0 18.004 1.962 26.144 5.662l-282.144 329.168-282.144-329.17c8.14-3.696 17.006-5.66 26.144-5.66zM192 704v-384c0-1.34 0.056-2.672 0.14-4l187.664 218.942-185.598 185.598c-1.444-5.336-2.206-10.886-2.206-16.54zM768 768h-512c-5.654 0-11.202-0.762-16.54-2.208l182.118-182.118 90.422 105.498 90.424-105.494 182.116 182.12c-5.34 1.44-10.886 2.202-16.54 2.202zM832 704c0 5.654-0.762 11.2-2.206 16.54l-185.6-185.598 187.666-218.942c0.084 1.328 0.14 2.66 0.14 4v384z"</span><span class="nt">></path></span>
<span class="nt"></symbol></span>
<span class="c"><!-- Ícone do Facebook --></span>
<span class="nt"><symbol</span> <span class="na">id=</span><span class="s">"icon-facebook"</span> <span class="na">viewBox=</span><span class="s">"0 0 1024 1024"</span><span class="nt">></span>
<span class="nt"><title></span>facebook<span class="nt"></title></span>
<span class="nt"><path</span> <span class="na">class=</span><span class="s">"path1"</span> <span class="na">d=</span><span class="s">"M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512v-384h-128v-128h128v-96c0-88.366 71.632-160 160-160h160v128h-160c-17.674 0-32 14.328-32 32v96h176l-32 128h-144v367.87c220.828-56.838 384-257.3 384-495.87 0-282.77-229.23-512-512-512z"</span><span class="nt">></path></span>
<span class="nt"></symbol></span>
<span class="c"><!-- Ícone do Twitter --></span>
<span class="nt"><symbol</span> <span class="na">id=</span><span class="s">"icon-twitter"</span> <span class="na">viewBox=</span><span class="s">"0 0 1024 1024"</span><span class="nt">></span>
<span class="nt"><title></span>twitter<span class="nt"></title></span>
<span class="nt"><path</span> <span class="na">class=</span><span class="s">"path1"</span> <span class="na">d=</span><span class="s">"M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM766.478 381.48c0.252 5.632 0.38 11.296 0.38 16.988 0 173.51-132.070 373.588-373.584 373.588-74.15 0-143.168-21.738-201.276-58.996 10.272 1.218 20.724 1.84 31.322 1.84 61.518 0 118.134-20.992 163.072-56.21-57.458-1.054-105.948-39.020-122.658-91.184 8.018 1.532 16.244 2.36 24.704 2.36 11.976 0 23.578-1.61 34.592-4.61-60.064-12.066-105.326-65.132-105.326-128.75 0-0.554 0-1.104 0.012-1.652 17.7 9.834 37.948 15.742 59.47 16.424-35.232-23.546-58.414-63.736-58.414-109.292 0-24.064 6.476-46.62 17.78-66.010 64.76 79.44 161.51 131.712 270.634 137.19-2.238-9.612-3.4-19.632-3.4-29.924 0-72.512 58.792-131.298 131.304-131.298 37.766 0 71.892 15.944 95.842 41.462 29.908-5.886 58.008-16.814 83.38-31.862-9.804 30.662-30.624 56.394-57.732 72.644 26.56-3.174 51.866-10.232 75.412-20.674-17.594 26.328-39.854 49.454-65.514 67.966z"</span><span class="nt">></path></span>
<span class="nt"></symbol></span>
<span class="c"><!-- Ícone do Google+ --></span>
<span class="nt"><symbol</span> <span class="na">id=</span><span class="s">"icon-google-plus"</span> <span class="na">viewBox=</span><span class="s">"0 0 1024 1024"</span><span class="nt">></span>
<span class="nt"><title></span>google-plus<span class="nt"></title></span>
<span class="nt"><path</span> <span class="na">class=</span><span class="s">"path1"</span> <span class="na">d=</span><span class="s">"M437.006 818.162c0 75.068-46.39 134.392-177.758 139.176-76.984-43.786-141.49-106.952-186.908-182.866 23.69-58.496 97.692-103.046 182.316-102.114 24.022 0.252 46.41 4.114 66.744 10.7 55.908 38.866 101 63.152 112.324 107.448 2.114 8.964 3.282 18.206 3.282 27.656zM512 0c-147.94 0-281.196 62.77-374.666 163.098 36.934-20.452 80.538-32.638 126.902-32.638 67.068 0 256.438 0 256.438 0l-57.304 60.14h-67.31c47.496 27.212 72.752 83.248 72.752 145.012 0 56.692-31.416 102.38-75.78 137.058-43.28 33.802-51.492 47.966-51.492 76.734 0 24.542 51.722 61.098 75.5 78.936 82.818 62.112 99.578 101.184 99.578 178.87 0 78.726-68.936 157.104-185.866 183.742 56.348 21.338 117.426 33.048 181.248 33.048 282.77 0 512-229.23 512-512s-229.23-512-512-512zM768 384v128h-64v-128h-128v-64h128v-128h64v128h128v64h-128zM365.768 339.472c11.922 90.776-27.846 149.19-96.934 147.134-69.126-2.082-134.806-65.492-146.74-156.242-11.928-90.788 34.418-160.254 103.53-158.196 69.090 2.074 128.22 76.542 140.144 167.304zM220.886 642.068c-74.68 0-138.128 25.768-182.842 63.864-24.502-59.82-38.044-125.29-38.044-193.932 0-56.766 9.256-111.368 26.312-162.396 7.374 99.442 77.352 176.192 192.97 176.192 8.514 0 16.764-0.442 24.874-1.022-7.95 15.23-13.622 32.19-13.622 49.982 0 29.97 16.488 47.070 36.868 66.894-15.402 0-30.27 0.418-46.516 0.418z"</span><span class="nt">></path></span>
<span class="nt"></symbol></span>
<span class="c"><!-- Ícone da Pesquisa --></span>
<span class="nt"><symbol</span> <span class="na">id=</span><span class="s">"icon-search"</span> <span class="na">viewBox=</span><span class="s">"0 0 1024 1024"</span><span class="nt">></span>
<span class="nt"><title></span>search<span class="nt"></title></span>
<span class="nt"><path</span> <span class="na">class=</span><span class="s">"path1"</span> <span class="na">d=</span><span class="s">"M992.262 871.396l-242.552-206.294c-25.074-22.566-51.89-32.926-73.552-31.926 57.256-67.068 91.842-154.078 91.842-249.176 0-212.078-171.922-384-384-384-212.076 0-384 171.922-384 384s171.922 384 384 384c95.098 0 182.108-34.586 249.176-91.844-1 21.662 9.36 48.478 31.926 73.552l206.294 242.552c35.322 39.246 93.022 42.554 128.22 7.356s31.892-92.898-7.354-128.22zM384 640c-141.384 0-256-114.616-256-256s114.616-256 256-256 256 114.616 256 256-114.614 256-256 256z"</span><span class="nt">></path></span>
<span class="nt"></symbol></span>
<span class="nt"></defs></span>
<span class="nt"></svg></span></code></pre></figure>
<p>Criamos os nossos ícones SVG, iremos estilizá-los depois com o <strong>SASS</strong>.</p>
<h4 id="tagshtml">tags.html</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"tags"</span><span class="nt">></span>
<span class="c"><!-- Procura as tags já utilizadas e monta uma lista com os links de todas elas --></span>
<span class="c"><!-- Não existe espaço entre {} e % --></span>
{ % for tag in post.tags % }
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/tags/#"</span><span class="nt">></a></span>
{ % endfor % }
<span class="nt"></div></span></code></pre></figure>
<p>Criamos um laço for, que irá procurar todas as tags já utilizadas no blog e irá montar uma lista de posts de cada tag encontrada.</p>
<h2 id="concluso">Conclusão</h2>
<p>Essa foi a primeira parte do tutorial, já temos pronto a configuração do nosso blog e a nossa pasta <code class="highlighter-rouge">_includes</code>. Na próxima parte, iremos configurar a pasta <code class="highlighter-rouge">_layouts</code> e o arquivo <code class="highlighter-rouge">index.html</code>, que é a página inicial do nosso blog.</p>
<p>Qualquer dúvida, é só comentar ou me enviar um email: <a href="mailto:mateus.sousamedeiros@gmail.com">mateus.sousamedeiros@gmail.com</a></p>
<p>Lembrando que todo o código utilizado aqui, está disponível no <a href="https://github.com/mateussmedeiros/tutorial-jekyll" target="_blank">GitHub</a>.</p>
<p><strong>Até a próxima parte!</strong></p>Mateus MedeirosIntroduçãoIniciando com Jekyll2016-01-13T20:53:00+00:002016-01-13T20:53:00+00:00http://mateussmedeiros.github.io/blade-theme//blade-theme/iniciando-com-jekyll<h2 id="introduo">Introdução</h2>
<p>Fala galera, como prometi que escreveria um post ensinado a usar o Jekyll, decidi não escrever apenas um post, mas uma série sobre Jekyll e esse é o primeiro post da série, nesse post irei ensinar o básico dessa íncrivel ferramenta.</p>
<p>O Jekyll é um gerador de páginas estáticas, você consegue criar páginas utilizando o HTML e CSS, depois disso o Jekyll converte todo o site em arquivos estáticos, pronto para ser colocado no ar. Ele utiliza <strong>Markdown</strong> para a formatação de textos e posts, um padrão de templates chamado <strong>Liquid</strong> e <strong>YAML</strong> para as variáveis.</p>
<p>Se quiser saber mais sobre o Jekyll e como ele funciona, basta acessar o <a href="http://jekyllrb.com" target="_blank">site oficial</a> (disponível em inglês), mas se você não souber inglês ou não entender muito bem, tem uma tradução ainda em andamento do site oficial sendo feita pela comunidade Jekyll Brasil, só acessar este <a href="http://jekyll-brasil.github.io/" target="_blank">link</a>.</p>
<h2 id="instalando-o-jekyll">Instalando o Jekyll</h2>
<p>Para instalar o Jekyll, você precisa ter o <strong>Ruby</strong> instalado em sua máquina, caso você não tiver ele instalado, só seguir os tutoriais abaixo:</p>
<ul>
<li><a href="http://michaelchelen.net/81fa/install-jekyll-2-ubuntu-14-04/" target="_blank">Linux</a> (Ruby + Jekyll)</li>
<li><a href="http://jekyll-windows.juthilo.com/" target="_blank">Windows</a> (Ruby + Jekyll)</li>
</ul>
<p>No Mac, o Ruby já vem instalado.</p>
<p>Após ter instalado o Ruby em sua máquina, abra o terminal e digite o seguinte comando:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem install jekyll</code></pre></figure>
<p>Caso você queira conferir se o Jekyll foi instalado, digite o seguinte comando no terminal:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">jekyll -v
<span class="c"># Jekyll 3.0.0</span></code></pre></figure>
<p>Pronto, Jekyll instalado, vamos iniciar nosso primeiro projeto.</p>
<p>##Iniciando um Projeto
Para inicar um novo projeto, digite no terminal:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">jekyll new nome-do-projeto</code></pre></figure>
<p>Feito isso, o Jekyll irá criar o diretório de pastas do projeto, como você pode conferir na imagem abaixo.</p>
<p><img src="/assets/img/diretorio-pastas-jekyll.JPG" alt="Diretório de pastas do Jekyll" class="center" /></p>
<h2 id="diretrio-de-pastas">Diretório de Pastas</h2>
<p>Como vocês puderam ver, o Jekyll cria várias pastas e arquivos, vamos entender o que cada um faz:</p>
<ul>
<li><strong>_includes</strong>: são os arquivos com os códigos que se repetem ao longo do projeto, como o <em>header</em> e o <em>footer</em>.</li>
<li><strong>_layouts</strong>: é a estrutura básica das páginas, por padrão vem 3 tipos: <strong>default</strong> para a página inicial e listagem de posts. A <strong>page</strong> para as páginas secundárias e <strong>post</strong> para as páginas de post.</li>
<li><strong>_posts</strong>: são os posts que escrevemos, em geral escrevemos em <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>.</li>
<li><strong>_sass</strong>: são os arquivos de estilização que geram o CSS, se você trabalha com <strong>sass</strong>, o Jekyll já compila para você.</li>
<li><strong>css</strong>: pasta para onde vai os arquivos gerados pelo sass.</li>
<li><strong>_config.yml</strong>: arquivo de configuração do seu blog, onde você colocará os dados referentes ao seu blog.</li>
<li><strong>about.md</strong>: arquivo do tipo <strong>page</strong> escrito em <strong>markdown</strong>, que gerencia a página /about.</li>
<li><strong>feed.xml</strong>: arquivo que gera o feed do seu blog, é importante para as pessoas conseguirem facilmente seguir seu blog.</li>
<li><strong>index.html</strong>: a página inicial do seu blog.</li>
</ul>
<h2 id="front-matter">Front-Matter</h2>
<p>O Jekyll utiliza o YAML, para guardar as informações. o Front-Matter deve ser a primeira coisa escrita no seu arquivo. As informações devem ficar entre o par de três traços <code class="highlighter-rouge">---</code>. A sintaxe dele é a seguinte:</p>
<figure class="highlight"><pre><code class="language-yaml" data-lang="yaml"><span class="nn">---</span>
<span class="s">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="s">title</span><span class="pi">:</span> <span class="s">Meu primeiro post com Jekyll</span>
<span class="nn">---</span></code></pre></figure>
<p>Colocamos a variável seguida de dois pontos e o valor dela ou conjunto de valores, por exemplo:</p>
<figure class="highlight"><pre><code class="language-yaml" data-lang="yaml"><span class="s">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="s">title</span><span class="pi">:</span> <span class="s">Meu primeiro post com Jekyll</span>
<span class="s">date</span><span class="pi">:</span> <span class="s">2016-01-13 18:00:00 -0300</span>
<span class="s">author</span><span class="pi">:</span> <span class="s">Mateus Medeiros</span>
<span class="s">description</span><span class="pi">:</span> <span class="s">Meu primeiro post com o gerador de páginas estáticas</span><span class="pi">:</span> <span class="s">Jekyll.</span>
<span class="s">tags</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">frontend</span>
<span class="pi">-</span> <span class="s">jekyll</span></code></pre></figure>
<h2 id="variveis">Variáveis</h2>
<p>No Jekyll, você pode usar variáveis pré-definidas ou criar suas próprias variáveis. Existem três tipos de variáveis: as <strong>variáveis globais</strong>, <strong>variáveis do site</strong> e <strong>variáveis da página</strong>. Vamos aprender algumas:</p>
<h3 id="variveis-globais">Variáveis Globais</h3>
<ul>
<li><strong>layout</strong>: indica qual modelo de layout você irá utilizar na página, por exemplo: <strong>post</strong>.</li>
<li><strong>permalink</strong>: define como será criado o link da página.</li>
<li><strong>category</strong> ou <strong>categories</strong>: define a categoria ou conjunto de categorias para o post.</li>
<li><strong>tags</strong>: define o conjunto de tags utilizadas no post.</li>
</ul>
<h3 id="variveis-do-site">Variáveis do Site</h3>
<ul>
<li><strong>site.posts</strong>: lista de todos os posts no site.</li>
<li><strong>site.pages</strong>: lista de todas as páginas no site.</li>
<li><strong>site.tags.TAG</strong>: lista de todos os posts daquela tag.</li>
<li><strong>site.categories.CATEGORIA</strong>: lista de todos os posts daquela categoria.</li>
</ul>
<h3 id="variveis-da-pgina">Variáveis da Página</h3>
<ul>
<li><strong>page.title</strong>: título da página.</li>
<li><strong>page.date</strong>: data da página, com a estrutura <strong>YYYY-MM-DD HH:MM:SS +/-TTTT</strong>.</li>
<li><strong>page.content</strong>: conteúdo da página.</li>
<li><strong>page.url</strong>: link da página.</li>
<li><strong>page.tags</strong>: mostra as tags utilizadas na página.</li>
</ul>
<p>Mais variáveis você pode encontrar na <a href="http://jekyllrb.com/docs/variables/" target="_blank">documentação</a>.</p>
<h3 id="utilizando-as-variveis">Utilizando as variáveis</h3>
<p>Depois de criadas, vamos utilizar as variáveis. A sua sintaxe é igual a de <em>mustache</em>, você abre duas chaves, coloca o nome da variável e fecha as chaves, ficando assim: <code class="highlighter-rouge"><span class="p">{</span><span class="w"> </span><span class="err">{</span><span class="w"> </span><span class="err">variável</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="err">}</span></code>.</p>
<p><strong>Aviso</strong>: Não existe espaço entre as chaves, coloquei pois como uso o jekyll, o exemplo não iria funcionar.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Variável Global --></span>
<span class="nt"><title></span> { { title } } <span class="nt"></title></span>
<span class="c"><!-- Variável da Página --></span>
<span class="nt"><time></span> { { page.date } } <span class="nt"></time></span>
<span class="c"><!-- Variável do Post --></span>
<span class="nt"><h1></span> { { post.title } } <span class="nt"></h1></span></code></pre></figure>
<h2 id="configurando-seu-blog">Configurando seu blog</h2>
<p>Como falei antes o arquivo <strong>_config.yml</strong> é o responsável pela configuração do seu blog, agora vamos aprender como configurá-lo. Abra o arquivo <strong>_config.yml</strong> no seu editor preferido e vamos lá.</p>
<p>Abrindo o arquivo, ele estará por padrão assim:</p>
<figure class="highlight"><pre><code class="language-yaml" data-lang="yaml"><span class="c1"># Welcome to Jekyll!</span>
<span class="c1">#</span>
<span class="c1"># This config file is meant for settings that affect your whole blog, values</span>
<span class="c1"># which you are expected to set up once and rarely need to edit after that.</span>
<span class="c1"># For technical reasons, this file is *NOT* reloaded automatically when you use</span>
<span class="c1"># 'jekyll serve'. If you change this file, please restart the server process.</span>
<span class="c1"># Site settings</span>
<span class="s">title</span><span class="pi">:</span> <span class="s">Your awesome title</span>
<span class="s">email</span><span class="pi">:</span> <span class="s">your-email@domain.com</span>
<span class="s">description</span><span class="pi">:</span> <span class="pi">></span> <span class="c1"># this means to ignore newlines until "baseurl:"</span>
<span class="no">Write an awesome description for your new site here. You can edit this</span>
<span class="no">line in _config.yml. It will appear in your document head meta (for</span>
<span class="no">Google search results) and in your feed.xml site description.</span>
<span class="s">baseurl</span><span class="pi">:</span> <span class="s2">"</span><span class="s">"</span> <span class="c1"># the subpath of your site, e.g. /blog</span>
<span class="s">url</span><span class="pi">:</span> <span class="s2">"</span><span class="s">http://yourdomain.com"</span> <span class="c1"># the base hostname & protocol for your site</span>
<span class="s">twitter_username</span><span class="pi">:</span> <span class="s">jekyllrb</span>
<span class="s">github_username</span><span class="pi">:</span> <span class="s">jekyll</span>
<span class="c1"># Build settings</span>
<span class="s">markdown</span><span class="pi">:</span> <span class="s">kramdown</span></code></pre></figure>
<p>Vamos entender o que cada variável faz:</p>
<ul>
<li><strong>title</strong>: é o título do seu blog.</li>
<li><strong>email</strong>: seu email para contato, é opcional.</li>
<li><strong>description</strong>: é a descrição do seu blog, muito importante para <strong>SEO</strong>, uma boa descrição é essencial para seu posicionamento no Google.</li>
<li><strong>baseurl</strong>: é a subpasta do seu site, caso você queira que seu blog seja acessado por um outro endereço, como por exemplo http://seusite.com/blog</li>
<li><strong>url</strong>: é o domínio do seu blog, por exemplo http://seusite.com</li>
<li><strong>twitter_username</strong>: seu nome de usuário no Twitter, é opcional.</li>
<li><strong>github_username</strong>: seu nome de usuário no GitHub, também é opcional.</li>
<li><strong>markdown</strong>: tipo de Markdown utilizado no seu projeto.</li>
</ul>
<p>Essas são as variáveis que já vem inclusas no jekyll. Mais opções você pode encontrar na <a href="http://jekyllrb.com/docs/configuration/" target="_blank">documentação do jekyll</a>.</p>
<h2 id="gerando-um-servidor">Gerando um servidor</h2>
<p>Vamos aprender agora como gerar um servidor para o seu ambiente de produção.</p>
<p>No terminal, digite o seguinte comando:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="c"># Entrar na pasta do projeto</span>
<span class="nb">cd </span>nome-do-projeto
<span class="c"># Gerar o servidor</span>
jekyll serve</code></pre></figure>
<p>Com esse comando, o jekyll irá gerar um servidor - por padrão, na porta <strong>4000</strong> - e ficará assistindo os arquivos. Para acessar seu projeto, entre no endereço: <a href="http://localhost:4000/" target="_blank">http://localhost:4000/</a> ou <a href="http://127.0.0.1:4000/" target="_blank">http://127.0.0.1:4000/</a>.</p>
<h2 id="gerando-os-arquivos-estticos">Gerando os arquivos estáticos</h2>
<p>Terminado o desenvolvimento do projeto, você pode gerar os arquivos estáticos do seu blog com o comando:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">jekyll build</code></pre></figure>
<p>Com esse comando o jekyll irá gerar a pasta <strong>_site</strong>, que contém os arquivos estáticos do seu blog.</p>
<h2 id="hospedando-seu-blog-no-github-pages">Hospedando seu blog no GitHub Pages</h2>
<p>Com o Jekyll, você pode facimente hospedar seu blog no GitHub Pages.</p>
<ol>
<li>Entre em sua conta no <a href="https://github.com/" target="_blank">GitHub</a>, caso não tenha, <a href="https://github.com/join" target="_blank">crie uma</a>.</li>
<li>Crie um repositório com o seguinte nome: <strong>seunomedeusuario.github.io</strong></li>
<li>Suba o seu blog - exceto a pasta <strong>_site</strong> - para o seu repositório usando o <strong>git</strong>, dessa forma:</li>
</ol>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="c"># Iniciar um repositório na pasta do projeto</span>
git init
<span class="c"># Adicionar todos os arquivos</span>
git add .
<span class="c"># Commitar os arquivos</span>
git commit -m <span class="s2">"Commit Inicial"</span>
<span class="c"># Adicionar o repositório</span>
git remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git
<span class="c"># Subir o seu blog</span>
git push -u origin master</code></pre></figure>
<p>Pronto, você subiu seu blog para o GitHub Pages, e agora é só esperar entre 20 e 30 minutos, e você poderá acessar seu blog através da url: http://seunomedeusuario.github.io</p>
<p>Se você quiser adicionar um domínio próprio no seu blog, siga <a href="http://willianjusten.com.br/dominio-proprio-no-github-pages/" target="_blank">esse passo-a-passo do Willian Justen</a>.</p>
<h2 id="concluso">Conclusão</h2>
<p>Esse foi o primeiro post da série sobre Jekyll, ensinado apenas o básico do Jekyll, se você quiser aprender mais detalhadamente, acesse a <a href="http://jekyllrb.com/docs/home" target="_blank">documentação do Jekyll</a>. Em breve, pretendo lançar um passo-a-passo de como criar um blog com Jekyll, aguarde!</p>
<p>Qualquer dúvida que aparecer, é só comentar ou me enviar um e-mail: <a href="mailto:mateus.sousamedeiros@gmail.com">mateus.sousamedeiros@gmail.com</a>.</p>
<p><strong>Até a próxima!</strong></p>Mateus MedeirosIntrodução
Fala galera, como prometi que escreveria um post ensinado a usar o Jekyll, decidi não escrever apenas um post, mas uma série sobre Jekyll e esse é o primeiro post da série, nesse post irei ensinar o básico dessa íncrivel ferramenta.