Visão Geral das Melhorias

Ao utilizar a versão 1.3.3 do tema Cnblogs-Theme-SimpleMemory, dois problemas principais de renderização podem ser identificados e corrigidos:

• Linhas de código duplicadas: Quando o destaque de sintaxe (hljs) está ativado, o editor padrão da plataforma também insere suas próprias linhas, resultando em duplicação visual. A solução remove as linhas nativas antes de aplicar o hljs.
• Snapshots de motores de busca ocultados: O CSS estático bloqueava a visualização correta nos caches dos buscadores. A correção move essas regras de ocultação para injeção dinâmica via JavaScript.
• Links externos: Hiperlinks em artigos Markdown agora abrem automaticamente em uma nova aba por padrão.

Configuração do Tema

1. CSS Personalizado

Insira o conteúdo do arquivo base.plus.css na área de CSS personalizado nas configurações do painel do Cnblogs.

2. Script da Barra Lateral

Adciione o seguinte bloco de código na seção de anúncios da barra lateral. Este script injeta regras CSS dinamicamente, ajusta links externos e inicializa a configuração do tema.

<script type="text/javascript">
// Injeção dinâmica de CSS para evitar problemas de snapshot
const primarySheet = document.styleSheets[0];
const ruleIndex = primarySheet.cssRules.length;

primarySheet.insertRule("body { overflow: hidden; }", ruleIndex);
primarySheet.insertRule("div#loading, a[name=top] { display: auto; }", ruleIndex + 1);
primarySheet.insertRule("#header, #leftcontentcontainer, #profile_block, .catListTitle, #comment_nav { display: none !important; }", ruleIndex + 2);

// Forçar abertura de links externos em nova aba no corpo do post Markdown
const markdownExternalLinks = document.querySelectorAll("div#cnblogs_post_body.blogpost-body.cnblogs-markdown a[href^='http']");
markdownExternalLinks.forEach(link => {
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'noopener noreferrer');
});
</script>

<script type="text/javascript">
window.cnblogsConfig = {
    GhUserName: 'seu-usuario',
    GhRepositories: 'Cnblogs-Theme-SimpleMemory',
    GhVersions: 'sua-branch',
    essayCodeHighlightingType: "highlightjs",
    essayCodeHighlighting: "vs2015",
    codeLineNumber: true
};
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.2/src/script/simpleMemory.min.js" defer></script>

3. HTML do Cabeçalho

Para otimizar o carregamento de recursos, adicione as seguintes diretivas de pré-busca e pré-carregamento no HTML do cabeçalho da página:

<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://at.alicdn.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://static.cnblogs.com/">
<link rel="preload" href="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" as="script">

Mecanismo de Remoção de Linhas Nativas

Análise do Problema

O editor padrão gera marcações HTML específicas para as linhas de código quando a opção de numeração está ativada. Originalmente, o formato era:

<span style="color: #008080;"> 3</span> 
<span style="color: #008080;">22</span>

Para evitar a duplicação com o Highlight.js, utilizamos expressões regulares para limpar o HTML antes da renderização do hljs.

Atualização Crítica: Padrão RGBA

Em atualizações recentes, a plataforma alterou o esquema de cores para usar o formato RGBA seguro. A nova estrutura gerada é:

<span style="color: rgba(0, 128, 128, 1)"> 4</span>

Portanto, a expressão regular deve ser ajustada para capturar essa nova sintaxe, lembrando de considerar o espaço em branco após a tag span:

const lineNumberPattern = /<span style="color: rgba\(0, 128, 128, 1\)[^>]*"> *\d+<\/span> /gm;

Implementação para a Versão 2.0.1+

Se você estiver utilizando a versão 2.0.1 ou superior do tema, o processo de limpeza pode ser integrado diretamente ao ciclo de vida do tema através do hook beforeCode. Isso torna a execução mais eficienet e organizada:

beforeCode: () => {
    console.time("Pré-processamento de Código");
    
    const nativeLinePattern = /<span style="color: rgba\(0, 128, 128, 1\)[^>]*"> *\d+<\/span> /gm;  
    const codeBlocks = $('#main pre');
    
    codeBlocks.each(function() {
        const currentBlock = $(this);
        const cleanedHtml = currentBlock.html().replace(nativeLinePattern, '');
        currentBlock.html(cleanedHtml);
    });
    
    console.timeEnd("Pré-processamento de Código");
}