🥇 Crie um tema de blog personalizado com Hexo.js

Hexo.js é uma plataforma de blog incrível. Se você já usou o Jekyl do Ruby, é assim, mas feito de javascript! Também é de código aberto e de uso gratuito.

Gere um blog

$ npm install -g hexo-cli
$ hexo init hexo-personal-site
$ cd hexo-personal-site
$ npm install
$ hexo server

Acesse localhost:4000e você verá o modelo de blog inicial! Muito fácil de colocar em funcionamento. Se você deseja usar um tema de construção de comunidade, vá para github / hexo / wiki / themes e escolha um da lista. Mude a linha 66 de _config.yml para o nome do tema que você deseja (o padrão é ‘paisagem’).

Crie seu próprio modelo

Documentos de temas Hexo

Podemos criar nosso próprio tema personalizado criando uma nova pasta no diretório themes / . Altere a linha ~ 68 em _config.yml para e , em seguida, crie uma pasta customTheme nos temas .theme: customTheme

$ mkdir themes/customTheme

Agora vamos criar o tema mais básico possível. Estamos usando o mecanismo de template EJS, então crie três arquivos na pasta themes / customTheme / layout . Um é chamado layout.ejs :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Use <%= page.title %> for dynamic title -->
    <title><%= config.title %></title>

    <!-- Twitter bootstrap (via cdn) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</head>
<body>
    <div class='container'>
        <%- body %>
    </div>
</body>
</html>

Então, aqui estamos pegando o bootstrap do Twitter e definindo o título da página. O blog será renderizado na tag do corpo.

O próximo arquivo é index.ejs e será a página inicial:

<div class='row text-center'>
    <h1><%= config.author %></h1>
    <p><%= config.subtitle %></p>

</div>
<div class='row'>
    <ul>
    <% page.posts.each(function(post){ %>
        <li>
            <h3>
                <a href="<%- url_for(post.path) %>">
                    <%= post.title %>
                </a>
            </h3>
            <div class='text-muted'>
                <%= date(post.date, config.date_format) %> 
            </div>

            <% if(post.excerpt) { %>
                <p>
                    <%- post.excerpt %>
                </p>
            <% } %>
        </li>
    <% }) %>
    </ul>
</div>

A configvariável vem de tudo o que definimos em config.yml . A <%-sintaxe vem diretamente da sintaxe EJS . Para ver um post.excerpt, adicione à linha 5 (ou em qualquer lugar) em source / _posts / hello-world.md . Para criar uma nova postagem, faça .$ hexo new "My Post Title"

Finalmente, há a página onde a postagem deve ser renderizada. Crie temas / customTheme / layout / post.ejs :

<div class='row'>
    <a class='btn btn-default' href='/'>< Home</a>
</div>
<div class='row'>
    <h1><%- page.title %></h1>
    <div class='text-muted'>
        <%= date(page.date, config.date_format) %> 
    </div>
    <%- page.content %>
</div>

Aqui, fazemos uso da pagevariável, que contém nosso post.

Conclusão

Este é um modelo muito básico. Há muito o que aprender com Hexo, mas é uma plataforma muito poderosa e personalizável. Você pode escolher um tema existente ou continuar a desenvolver este. O código-fonte deste artigo está no github .

Gere um blog

Crie seu próprio modelo

Conclusão

Related Posts