Include do MarkoJS | Node.js Parte 1: Inovando com JavaScript no backend

Solucionado (ver solução)

Solucionado
(ver solução)

7
respostas

por Leonardo Costa

| 229.8k xp | 25 posts

Fullstack Web Developer

Estou fazendo um projeto usando Marko, mas não consigo fazer um include de um cabeçalho e um menu em um certo layout... Eu faço o que fala na documentação e nada:

(layout.marko):

 <div class="container">
        <include(input.mynav)/>
        <div class="app_container">
            <main class="main_content">
                <h1 class="main_content-title">Dashboard</h1>
                <div class="divider"></div>
                <div class="main_content-body">
                </div>
            </main>
        </div>
    </div>

(nav.marko):

<include('./layout.marko')>
    <mynav>
       **conteudo HTML**
    </mynav>
</include>

Na minha rota, estou renderizando a pagina layout assim:

module.exports = (app) => {
    app.get('/', (req,res) => {
        res.marko(
            require('../views/layout.marko')
        );
    })    
}

Tudo o que ele renderiza é o conteudo do layout.marko. Nada do nav.marko é incluído.

7 respostas

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

17/11/2018

Boa tarde, Leonardo! Como vai?

Dá uma olhada nessa atividade do curso! Um dos pontos tratados é justamente a utilização do include!

Se ainda tiver problemas ou restar alguma dúvida, manda um aviso aqui que eu volto pra te tirar das trevas e levar pra luz!

Grande abraço e bons estudos, meu aluno!

por Leonardo Costa

| 229.8k xp | 25 posts

Fullstack Web Developer

17/11/2018

Olá, Prof. Gabriel! Eu já havia visto a atividade e seguido os passos tanto dela quanto da documentação oficial, mas sem nenhum êxito...

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

17/11/2018

Leonardo, se eu entendi bem, vc quer inserir o conteúdo do nav.marko no layout.marko. É isso mesmo? Se sim, tente fazer assim:

<!-- layout.marko -->

<div class="container">
   <include('./nav.marko')></include>

   <div class="app_container">
      <main class="main_content">
         <h1 class="main_content-title">Dashboard</h1>
         <div class="divider"></div>
         <div class="main_content-body"></div>
      </main>
   </div>
</div>

<!-- nav.marko -->

<html>
   <body>

      <mynav>
          **conteudo HTML da navegação**
      </mynav>

   </body>
</html>

Obs.: Esse código considera que tanto o nav.marko quanto o layout.marko estarão na mesma pasta.

Tente aí e veja se funciona do jeito que vc esperava! Qualquer coisa é só falar!

por Leonardo Costa

| 229.8k xp | 25 posts

Fullstack Web Developer

17/11/2018

Agora ele reconheceu. Mas para isso, tive que criar um arquivo chamado "html-elements.json" E escrever:

{
    "<mynav>":{},
}

Esse é o jeito correto de se importar um componente? E mais, as páginas não estão identificando nenhum CSS...

por Leonardo Costa

| 229.8k xp | 25 posts

Fullstack Web Developer

17/11/2018

Desenrolei o CSS. Tinha que colocar o "app.use(express.static('public'));", certo? Agora fica só a dúvida mesmo se essa maneira acima é o jeito mais fácil e correto de se importar componentes como headers e footers.

solução!

por Leonardo Costa

| 229.8k xp | 25 posts

Fullstack Web Developer

17/11/2018

Descobri como reutilizar o código! Vi que estava seguindo a documentação oficial de maneira errada. Segue o código:

-> Código a ser reutilizado:

<!--layout.marko-->

<!DOCTYPE html>
<html lang="en">
        <head>
              **Conteúdo do head**
        </head>
        <body>
        **Parte do contéudo**
                <div class="main_content-body">
                        <include(input.content)/>
                </div>
        **Outra parte do contéudo do body**
        </body>
</html>

-> Código que vai reutilizar o código acima:

<!--index.marko-->

<include('./layout.marko')>
    <@content>
        <h1>Hello Marko</h1>
    </@content>
</include>

->Código que vai renderizar o index:

//rotas.js

module.exports = (app) => {
    app.get('/', (req,res) => {
        res.marko(
            require('../views/index.marko')
        );
    })    
}

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

18/11/2018

Opa, Leonardo!

Desenrolei o CSS. Tinha que colocar o "app.use(express.static('public'));", certo?

Exato, meu aluno! Inclusive isso é mostrado mais pra frente no curso! Mais precisamente nessa aula.

Agora fica só a dúvida mesmo se essa maneira acima é o jeito mais fácil e correto de se importar componentes como headers e footers.

Mais uma vez, vc está correto! Utilizando a tag include disponibilizada pelo MarkoJS temos a melhor forma de incluir trechos de códigos que se repetem (como cabeçalhos e rodapés) em várias páginas!

Espero que esteja aproveitando bastante o conteúdo do curso! E sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos, meu aluno!