Carregamento Dinâmico de Conteúdo

Este documento detalha a implementação de uma solução simples e funcional para gerenciar e exibir grande volume de conteúdo HTML dinamicamente em um site hospedado no GitHub Pages. A abordagem escolhida utiliza JavaScript (Fetch API) para carregar fragmentos de HTML conforme a necessidade do usuário, evitando um único arquivo HTML massivo e facilitando a manutenção.

O objetivo principal é dividir o extenso conteúdo sobre Dark Souls em arquivos HTML menores e organizados. Em vez de ter todo o texto e imagens em um único index.html, usamos JavaScript para "puxar" o conteúdo relevante de arquivos separados e inseri-lo na página principal quando um usuário clica em um item do menu, por exemplo.

index.html (Página Principal)


    <header>
        <h1>O Legado de Dark Souls</h1>
        <nav>
            <button onclick="loadContent('introducao')">Introdução</button>
            <button onclick="loadContent('personagens')">Personagens</button>
            <button onclick="loadContent('lore')">Lore</button>
            <button onclick="loadContent('armas')">Armas</button>
            </nav>
    </header>

    <main id="content-area">
        <p>Carregando conteúdo...</p>
    </main>

</body>
</html>

Arquivos de Conteúdo (content/*.html)

Cada arquivo nesta pasta deve conter apenas o fragmento HTML que você deseja exibir. Não inclua as tags <html>, <head>, ou <body> completas.

Exemplo: content/introducao.html

<section class="content-section">
    <h2>Bem-vindo a Lordran: O Início da Jornada</h2>
    <p>Lordran é uma terra amaldiçoada, onde os Undeads são marcados e forçados a uma peregrinação em busca do destino. Mergulhe em um mundo de ruínas, monstros e mistérios ancestrais...</p>
    <figure>
        <img src="assets/imagens/lordran_map.jpg" alt="Mapa de Lordran" style="max-width: 100%; height: auto; border-radius: 8px;">
        <figcaption>Mapa conceitual de Lordran, o reino em ruínas.</figcaption>
    </figure>
    <h3>A Maldição do Undead</h3>
    <p>A maldição se manifesta como uma marca escura, privando a morte verdadeira e condenando a uma existência cíclica de ressurreição e perda de humanidade.</p>
    </section>

script.js (Lógica de Carregamento)

Este arquivo contém a função JavaScript que faz a requisição para buscar o HTML e exibi-lo.


function loadContent(pageName) {
    const contentArea = document.getElementById('content-area');
    const filePath = `content/${pageName}.html`; // Constrói o caminho completo para o arquivo

    // Exibe uma mensagem de carregamento enquanto o conteúdo é buscado
    contentArea.innerHTML = '<p>Carregando...</p>';

    fetch(filePath)
        .then(response => {
            // Verifica se a requisição foi bem-sucedida (status HTTP 200-299)
            if (!response.ok) {
                // Lança um erro se a resposta não for OK, útil para depuração
                throw new Error(`Erro ao carregar o conteúdo: ${pageName}. Status: ${response.status}`);
            }
            return response.text(); // Extrai o corpo da resposta como texto (HTML)
        })
        .then(html => {
            // Insere o HTML carregado na área de conteúdo
            contentArea.innerHTML = html;
            // Opcional: Rola a página para o topo para melhor UX ao carregar novo conteúdo
            window.scrollTo({ top: 0, behavior: 'smooth' });
        })
        .catch(error => {
            // Captura e exibe qualquer erro que ocorra durante o processo de fetch
            console.error('Falha ao carregar conteúdo:', error);
            contentArea.innerHTML = `<p style="color: red; padding: 20px;">Não foi possível carregar o conteúdo "${pageName}". Por favor, verifique o caminho e o arquivo. Detalhes: ${error.message}</p>`;
        });
}

// Carrega o conteúdo da "introducao" automaticamente quando a página é carregada pela primeira vez.
document.addEventListener('DOMContentLoaded', () => {
    loadContent('introducao');
});