How-To #2 - Página de Status e atalho de publicação no dashboard do BearBlog
Embora o plano de internalizar o sistema de status no site já estivesse no papel, só coloquei isso em prática depois que chamaram minha atenção para um detalhe interessante ao qual eu sequer tinha dado importância.
O Status Café, sistema que eu utilizava anteriormente para publicação de status, não possui nenhuma área para solicitação de exclusão de conta e nem ao menos um bulk delete de todos os status. Não que eu ligue muito para isso. Minha intenção de internalizar essa função sempre foi a de saber que meus status estariam salvos e não se perderiam, algo que pode acontecer caso o criador da plataforma decida simplesmente encerrá-la.
Mas como achei esse fato estranho, e também por não ter conseguido rastrear nenhuma informação de contato do admin/criador da plataforma ou algo semelhante, decidi colocar em prática o quanto antes a internalização da função e da página de status no meu blog.
Com isso, convido você a criar e editar uma página de Status do zero, separada dos seus posts normais e com um atalho no dashboard para acelerar o processo de publicação.
Índice
O que é uma página de Status?
A ideia é simples: um feed de posts curtos, sem título elaborado, sem a pressão de escrever um artigo completo.
Pense nisso como um post no Twitter (R.I.P.), mas hospedado no seu próprio blog.
No BearBlog, alcancei esse objetivo usando o sistema de tags. Cada post marcado com uma tag específica, no meu caso Status, aparece automaticamente na sua página de status, sem nenhuma configuração extra depois da implementação.
Obs: embora eu chame de "Status", algumas pessoas também se referem a esse tipo de conteúdo como Microblog.
Parte 1 — Criando a página de Status
1.1 Crie uma nova página
No seu dashboard, vá em Pages → New Page e crie uma nova página configurando o header da forma que preferir.
No meu caso, utilizei o seguinte:
title: Status
link: status
is_page: true
lang: pt-BR
make_discoverable: false
No corpo da página, utilize o shortcode de lista de posts embutida do BearBlog para exibir automaticamente todos os posts com a tag definida, no meu caso Status:
{{ posts | tag:Status }}
Lembrando que esse é apenas um código simples configurando a exibição exclusiva de posts com a tag Status. Você pode fazer outras personalizações seguindo as regras de embedding de posts disponíveis na documentação oficial.
Publique a página. Seu feed de status já estará disponível.
1.2 Escondendo os status da HomePage
Por padrão, os posts de status vão aparecer misturados com seus posts normais, principalmente se você utiliza um bloco de últimos posts na HomePage.
Para evitar essa espécie de spam, troque o shortcode padrão por um que exclua a tag Status:
{{ posts | tag:-Status }}
Assim:
A home continua exibindo apenas os seus posts normais
Os status ficam restritos à página
/status
1.3 Criando posts de status
Cada status é apenas um post normal, mas com a tag definida.
Exemplo de header que utilizo:
title: ☕ #0
link: status0
published_date:
lang: pt-BR
tags: Status
make_discoverable: false
A numeração #0, #1, #2 etc. é apenas uma convenção que uso para identificar cada status em ordem cronológica.
O emoji no título também é uma escolha pessoal.
O corpo do post é simplesmente o conteúdo do status. Optei por manter um padrão em texto puro.
Parte 2 — Quick Status Plugin (atalho no dashboard)
Publicar um status manualmente seguindo o modelo correto pode ser desanimador, chato e nada prático.
Então criei um pequeno plugin que adiciona um botão "Novo Status 💭" direto no dashboard. Esse botão abre o formulário de novo post já preenchido com o template correto e ainda calcula automaticamente o número sequencial do status.
Obs: esse plugin está configurado para usar o template que eu mesmo utilizo. Sinta-se à vontade para editar o código e adaptar ao seu próprio padrão, inclusive removendo a numeração sequencial se preferir.
2.1 Configurando o plugin
No dashboard, vá em:
Customise → Dashboard footer content
Cole o código abaixo, não esquecendo da tag de script:
/*
Plugin name: Quick Status
Description: Adiciona um botão no Dashboard para agilizar posts de Status.
Author: TechDemo aka. Felipe.
*/
(function () {
'use strict';
const isNewPost = window.location.pathname.includes('/dashboard/posts/new') ||
window.location.pathname.endsWith('/dashboard/new/');
const isPostList = window.location.pathname.includes('/dashboard/posts/') &&
!window.location.pathname.includes('/new') &&
!window.location.pathname.match(/\/posts\/\d+\//);
// ===== BOTÃO NA LISTA DE POSTS =====
if (isPostList) {
document.addEventListener('DOMContentLoaded', function () {
const nav = document.querySelector('header nav') || document.querySelector('nav');
if (!nav) return;
const btn = document.createElement('a');
btn.href = window.location.pathname + 'new/?quick_status=1';
btn.textContent = 'Novo Status 💭';
btn.style.cssText = `
display: inline-block;
margin-left: 12px;
padding: 4px 10px;
background: #3273dc;
color: #fff;
border-radius: 4px;
font-size: 0.85em;
text-decoration: none;
`;
btn.addEventListener('mouseover', () => btn.style.opacity = '0.85');
btn.addEventListener('mouseout', () => btn.style.opacity = '1');
nav.appendChild(btn);
});
return;
}
// ===== TEMPLATE NA PÁGINA DE NOVO POST =====
if (!isNewPost) return;
const params = new URLSearchParams(window.location.search);
if (!params.has('quick_status')) return;
document.addEventListener('DOMContentLoaded', function () {
const headerContent = document.getElementById('header_content');
const bodyContent = document.getElementById('body_content');
if (!headerContent || !bodyContent) return;
fetch(window.location.pathname.replace('/posts/new/', '/posts/'))
.then(res => res.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const posts = Array.from(doc.querySelectorAll('ul.post-list li a, ul li a'));
const statusNumbers = posts
.map(a => a.textContent.match(/#(\d+)/))
.filter(Boolean)
.map(m => parseInt(m[1]));
const nextNumber = statusNumbers.length > 0
? Math.max(...statusNumbers) + 1
: 0;
fillTemplate(nextNumber);
})
.catch(() => fillTemplate('?'));
function fillTemplate(number) {
headerContent.innerText =
`title: ☕ #${number}\n` +
`link: status${number}\n` +
`published_date: \n` +
`lang: pt-BR\n` +
`tags: Status\n` +
`make_discoverable: false\n`;
bodyContent.value = '';
}
});
})();
Atenção: substitua "/dashboard/posts/" pelo caminho do seu próprio dashboard caso ele seja diferente.
2.2 Como usar
Acesse Dashboard → Posts
O botão "Novo Status 💭" aparecerá no nav do dashboard
Clique nele e o formulário abrirá já preenchido com:
título com emoji e número sequencial automático
link no formato
statusNtag
Statusmake_discoverable: falsecampo de texto vazio para escrever o status
Escreva seu status e publique
2.3 Atalho direto
Para facilitar ainda mais, salve a página "Novo Status 💭" como favorito ou atalho no seu navegador.
Resumo
Com esse processo você:
cria uma página dedicada de status/microblog
mantém os status separados dos posts normais
evita poluir a home do blog
adiciona um atalho direto no dashboard
automatiza o template e a numeração dos status
O resultado é um sistema simples de status/microblog hospedado no seu próprio site, sem depender de plataformas externas.
Espero que esse tutorial rápido dê um norte para quem quiser ter sua própria página de status/microblog. Explorem o código, façam suas próprias alterações e, se criarem uma versão melhorada, me avisem!!.
Até a próxima （￣︶￣)↗