Até este ponto, nossos representantes expressos enviaram completamente desconhecidos. Não há javascript incluído, não C Ss
apenas puro h t m l.
Neste vídeo, vou mostrar-lhe como podemos começar a incluir ativos como uma folha de estilo ou algum Javascript.
E eu também vou mostrar-lhe como podemos secar nossos modelos usando o que são conhecidos como Parshall's.
Então vamos começar.
Estou usando o mesmo aplicativo que eu tenho usado nos últimos dois vídeos, onde temos nosso aplicativo.
Sim e temos três rotas principais.
tem um H1 e a adorável imagem do Palm C e depois também nos apaixonamos por Slash.
Nós temos a rota rota que torna a casa que Ejay como modelo que
A variável coisa rota que irá renderizar o amor em relação a cada modelo e mostrará que você se apaixonou e,
então, o que quer que escrevemos na rota.
E, em seguida, se declaração e, em seguida, um pequeno parágrafo na parte inferior e, em seguida, também temos a rota de mensagens em
barra que faz as postagens E. J. como modelo e dentro disso.
Nós temos dois loops.
Agora, digamos que queremos incluir alguns estilos.
Então, como você sabe, eu gosto da cor roxa.
Digamos que eu queria fazer todos os corpos roxos toda a cor do texto em todos os modelos
diferentes devem ser roxos.
Vamos começar com a página Post e o que eu poderia fazer é incluir uma etiqueta de estilo para que o
estilo abrisse e feche e então eu posso escrever meu estilo aqui corpo e farei cor prateada assim e salve.
E lembre-se de que esta não é realmente a maneira ideal de incluir estilos e eu estou mostrando isso
para você primeiro por um motivo, porque vamos refatorá-lo e melhorá-lo em apenas um momento, mas vamos garantir
que ele funcione.
Então, cor roxa no corpo.
Vamos começar o aplicativo do nó do servidor.
Sim, vamos ao navegador e atualizamos na página do Post e você pode ver que ficamos roxos.
E se eu fosse para outra rota eu não ficava com roxo.
E é porque eles são modelos totalmente separados e nós só adicionamos a tag de estilo ao modelo de postagem.
Então, se eu quiser que tudo seja púrpura em todos os três modelos, eu poderia adicionar em outra etiqueta de estilo
em casa que Ejay nós e a mesma tag de estilo em amor.
Sim e salve a reinicialização do servidor atualizar minha página e recebo um H-1 roxo aqui e se eu me apaixonar por Rusty eu
também recebo texto roxo aqui a partir dessa etiqueta de estilo.
Há dois principais problemas que enfrentamos aqui.
Um deles é o problema que este código está sendo repetido três vezes diferentes.
Se você quiser estilos idênticos em três modelos diferentes, tem que haver uma maneira melhor de conseguir
isso.
E aqui está.
E vamos abordar esse segundo.
Vamos começar abordando esta questão de usar a tag de estilo, o que não é uma boa idéia.
fazer em vez disso, é usar uma folha de estilo externa e vinculada a essa folha de estilo usando a tag de link.
O que queremos
Então, vou escrever essa tag de link primeiro, o que não funcionará porque ainda não temos uma folha de estilo,
mas vamos criar esse segundo.
Então, faça o link e precisamos fornecer uma folha de estilo igual e então.
E isso precisa ser o nome da nossa folha de estilo e nós apenas chamaremos Dot.
SS Ok, então isso é apenas no E. do Correio. J. Como o modelo economizará agora.
E vamos criar esse apt.
vamos chamá-lo de público e eles podem ser nomeados, mas o público é um nome muito comum e convencional para este diretório.
C Ss, exceto em vez de criá-lo no mesmo diretório que é ap J Sim, nós realmente
vamos fazer outro diretório onde colocaremos todas as nossas folhas de estilo todos os javascript
que escrevemos e, em seguida, quaisquer outros ativos que queremos são disponíveis e
Bem, certifique-se de onde é o lugar certo.
E, em seguida, faça o diretório público e também crie dentro de um aplicativo de barra pública pública público que veja avaliar qual é o
nome do nosso arquivo aqui e salvar e você pode estar pensando OK, aguarde um
minuto, não seja isso público.
Slash avalia.
E, infelizmente, a resposta é não.
Vamos deixá-lo como apto upsy SS vai dizer expressar que nossas folhas de estilo e javascript estão dentro do diretório
público e ele servirá o diretório público para nós para que possamos ligar para as coisas apenas usando os
nomes dos arquivos, então eu vou mostre isso em apenas um momento.
Abrimos o aplicativo barra pública que vê o arquivo SS e adiciona alguns estilos.
Vamos fazer algo diferente.
Vai fazer corpo ou fundo.
Vai ser horrível.
Vamos fazer o fundo amarelo e cor ainda roxo.
Ok então agora temos um estilo realmente grosseiro que ela definiu, podemos fechar daqui e saberemos se está funcionando.
Se esta postagem E. J. Como o modelo aparece com um horrível fundo amarelo
no texto roxo, não vai funcionar ainda, mas vou mostrar-lhe apenas para que você veja isso por si mesmo.
Então, Noad apt.
J. S. e voltamos e atualizamos a página e precisamos ir para a página da publicação e não recebemos nada.
E se abrir o cônsul aqui recebo um erro que diz que não foi possível carregar pesquisas.
O servidor respondeu o status de 404 e não conseguiu encontrar o sucesso do apparat.
E o motivo disso é bem direto.
Quando você cria um aplicativo da Web e usamos o Express para iniciar um servidor web, ele não serve
apenas automaticamente todos os arquivos que ele vê, não sabe que queremos fazer isso.
E o padrão é não servir nada.
Além do diretório de visualizações.
Então, se queremos mais alguma coisa, precisamos dizer expressamente explicitamente, eu preciso que você sirva meu diretório público
ou qualquer outro diretor que possamos.
expresso que faça isso e, provavelmente, expressar uma maneira fácil de fazer isso dentro de nosso ato.
Precisamos dizer ao
Sim, eu vou adicionar um aplicativo para usar e depois entre parênteses.
EXPRESSE é estático.
E, em parênteses novamente, a palavra público, que é o nome do nosso diretório.
E isso indicará expressar para servir o conteúdo do diretório público.
E agora, se eu reiniciar meu servidor e atualizar a página aqui, feche o consulado, obtemos o
nosso fundo amarelo e nossa fonte roxa e não temos erros no conselho.
folhas de estilo em outras páginas, basta ir e copiar essa tag de link e colocá-la no topo.
E se você deseja incluir essas
E é claro que poderíamos ter vários tipos de estilos também se desejássemos e
pudéssemos apenas relacioná-los, dando-lhes nomes diferentes e assegurando-se de que ambos estejam no diretório público.
Antes de passar para a Parshall, queremos dar um momento para lhe mostrar uma coisa muito rápida que podemos fazer para que seu código seja um pouco
mais curto que estamos escrevendo para casa que cada E. J. sim amado.
E. J. publicou E. J. Sim, isso
é realmente menor, mas podemos realmente dizer expressar que vamos usar o Ejay com antecedência e podemos
deixar isso e simplesmente escrever em casa e evoluir e esperará automaticamente que os arquivos sejam arquivos do Ejaz.
E para fazer isso, usamos o mecanismo de exibição de conjunto de dados do aplicativo e então passamos o segundo argumento como E. J. é
assim.
E se conservarmos o reinício, o servidor agora espera que esses arquivos sejam arquivos Ejaz.
E se atualizarmos.
Nada deve mudar.
Ainda funciona.
E agora não precisamos dizer explicitamente que a Usay nós.
Então, essa é uma mudança muito pequena.
A próxima coisa que quero te
mostrar é um pouco mais significativa e nos ajudará a esconder o nosso modelo.
Agora, temos essa folha de estilo.
Este link para a folha de estilo
repetido em todos os modelos, mas também há algo muito mais significativo que estamos perdendo, que é toda a nossa placa de caldeira do tempo.
Nós estamos perdendo a fita adesiva aqui.
Andrew faltam estão envelhecendo com etiquetas antigas
e com todos os boilerplate regulares que esperamos cabeça e dentro da cabeça.
Precisamos do título e daremos ao nosso aplicativo o título.
Ligue para o aplicativo de demonstração e então precisamos do corpo também.
E, em seguida, dentro do corpo, devemos colocar esse conteúdo
e então precisamos fazer exatamente o mesmo em todos os outros arquivos.
E não vou fazer isso
porque é uma perda de tempo e há uma solução mais fácil, na qual não precisamos copiar este código e colocá-lo em
cada modelo, assim como não devemos copiar essa tag de link único e coloque isso em cada modelo único também.
modelos criará um modelo que se parece com isso.
E a maneira como nos deparamos é usando o que chamamos de
Parshall e Parshall são basicamente modelos de arquivos que podemos escrever que podemos incluir em outros
Então, teremos a metade superior da nossa placa de caldeira tudo na cabeça.
Isso quase sempre será o mesmo em cada página que criamos em um determinado site.
A mesma folha de estilo do mesmo título.
Então, vamos fazer deste modelo próprio.
E então, na parte inferior, vamos fazer deste seu próprio modelo aqui.
que estamos ou dependendo da página em que estamos.
E, então, entre os dois, nosso conteúdo será alterado de acordo com o modelo em
Então, o que faremos é basicamente transformar este em seu próprio modelo.
Transforme isso em seu próprio modelo e, em
seguida, nós apenas usamos os modelos que nos referimos a eles em cada um desses arquivos.
Então, nós diriamos
algo como E este não é um código válido, mas nós faremos algo como incluir o modelo de cabeçalho e, em seguida, na parte inferior faria a mesma coisa, exceto para o rodapé.
Então, precisamos criar esses modelos ou o Parshall e fazer isso, faremos um novo
diretório em vez de visualizações e chamaremos esse diretório Parshall's.
Então, vamos fazer e fazer as visualizações do diretório cortar o Parshall assim.
E então, em vez de Parshall, vamos fazer dois arquivos e o primeiro
será o uso da barra de compartilhamento da Parshall, que cada um de nós e, em
seguida, faremos outra exceção parcial, exceto o rodapé, e você também pode chamar isso como superior e inferior Ejaz primeiro e
segundo o que você quer chamá-los, mas cabeçalho e rodapé é definitivamente o nome padrão.
Então eu vou fazer esses
dois arquivos e depois vou abri-los e desta vez na escola por aqui e
abrir o cabeçalho e eu vou copiar neste boilerplate basta cortá-lo e colocar isso aqui em vez de cabeçalho.
Então, isso é
o que queremos no topo de cada página e, em vez do rodapé, tudo o que realmente queremos é a parte inferior do nosso modelo, que é apenas o corpo e a etiqueta final da equipe.
Bem desse jeito.
E se queríamos algo mais.
Então farei algo um pouco mais óbvio.
Vamos apenas fazer um parágrafo
na parte inferior que diz algo como marca registrada ou algum outro texto no rodapé que veríamos em um site.
Vamos deixar isso com isso.
E então esperamos ver isso em todas as páginas onde incluímos o rodapé.
Parcial.
ESTÁ BEM.
Então, os dois parciais estão concluídos.
Feche isso.
Corrija isso assim.
Tudo bem, salve.
E agora queremos incluir os parciais.
Então vamos começar com nosso amor.
Cada um de nós e agora vamos incluir esse cabeçalho parcial.
Então, precisamos usar um novo código no Ejay, como incluem etiquetas.
E, em seguida, o nome do arquivo que é apenas o mais importante e não
temos que adicionar aquele Ejay porque já está procurando por arquivos Ejaz.
Então, apenas inclua cabeçalho e isso realmente não funcionará imediatamente e vou mostrar-lhe o porquê.
Deixe-me colocar o rodapé um aqui dentro.
E se eu começar o servidor, certifique-se de limpar um pouco de espaço aqui e depois nó.
Apogee Sim.
E se você atualizar a página e isso só está incluído no estudo do amor J. S. modelo.
Então, precisamos ir para cortar.
Apaixonar-se por resti e cometemos um erro.
Não existe tal arquivo ou diretório.
Sim, as barras de demonstração visualizam a barra.
E. J. Sim.
Então isso nos diz duas coisas.
Um sabe que é suposto ser um arquivo Ejaz.
Está procurando um cabeçalho.
Sim, mas está olhando diretamente no diretório do usuário.
Mas queremos que ele veja as barras de vista
da barra de Parshall, o heterodoxo, e, como você pode ver aqui, as barras de vista da Parshall.
Então, precisamos mudar
nosso caminho aqui um pouco e precisamos mudá-lo para dizer a barraca de Parshall e o rodapé da barraca de Parshall.
No entanto, isso ainda não vai consertá-lo.
E eu vou te mostrar uma vez
mais o que acontece quando eu começar isso novamente e atualizar o parcial foi incluído bem.
E se nós vamos aos elementos, você pode ver que nós temos o rodapé na parte inferior e nós temos o corpo.
E cada vez que fecham as tags, mas os estilos não estão sendo aplicados.
Deve ser roxo e amarelo e é apenas preto e branco.
E se olharmos na cabeça, temos nossa marca de link e está vinculando um arquivo chamado apcupsd.
SS Mas isso não está funcionando.
o conteúdo principal e também tem o rodapé.
E se olharmos para a guia de fontes, você verá que temos esse arquivo Rustie que foi enviado de volta e tem nosso cabeçalho e tem
Então, este é como o arquivo montado porque lembre-se de enviar uma coisa de volta a uma resposta.
Então, isso torna este um arquivo para nós com os nossos três parshall's
ou dois Parshall's Plus nosso conteúdo e ele envia isso de volta.
E então também há este ACT-UP veja diz que está totalmente vazio.
E o que isso significa é que nós ligamos ao nosso APS-C avaliado incorretamente.
Então está aparecendo como um arquivo vazio e é
uma solução muito simples, embora precisemos fazer é adicionar uma barra aqui.
Passo por tudo isso por
uma razão que é mostrar-lhe a importância dos caminhos e garantir que tenhamos nossos caminhos configurados corretamente.
Portanto, há uma diferença entre o sucesso ACT-UP e a barra depois da avaliação quando adicionamos a barra.
Ele basicamente diz que nos busca diz não no mesmo
diretório que você está agora, mas no diretório raiz.
Deixe-me mostrar uma ilustração melhor.
Agora, está procurando sucesso no mesmo diretório que esse modelo Rusti.
Agora, se eu salvar-lo com a barra e reiniciar o servidor, eles voltarão aqui e eu atualizo agora.
Dê uma olhada.
Nossos estilos funcionam.
Observe também que temos
o arquivo com o h t m l e nós temos o nosso apt o SS que agora está fora desse diretório, não está
na mesma pasta e tem os estilos corretos, o que significa que ele encontrou o arquivo que precisávamos encontrar.
Então, essa lama parece ser muito pequena, mas é realmente um detalhe importante.
Então corte e, em seguida, o nome da nossa folha de estilo qualquer coisa dentro do diretório público.
onde nós temos o nosso código fonte para cortar scripts slash maynt.
Então, eventualmente, parecerá algo como Slash stylesheets slash ACT-UP veja avaliar e então teremos uma tag de script
Sim.
E assim teremos dentro do diretório de scripts de diretório público e diretório de folhas de estilo.
Por enquanto, apenas temos uma folha de estilo para que a deixemos assim.
Vamos terminar rapidamente e adicionar os parciais aos outros arquivos também.
Então, neste neste nosso lar, que cada um de nós pagará,
e então, no fundo, colado em uma inundação e alterá-lo para rodar e salvar e depois publicá-lo.
Sim.
Mesma coisa.
Queremos o cabeçalho e o rodapé.
Livrar-se disso também em todos os arquivos.
Parshall's slash footer.
E isso deve ser bom para nós.
Vamos voltar a reiniciar o servidor aqui e isso deve parecer o mesmo.
Agora, se vamos ao caminho certo, também obtemos
nossos estilos e, se formos a barras, também obtemos os estilos.
Tudo bem.
Então vamos recapitular tudo isso.
Uma das primeiras coisas que fizemos foi criar o diretório
público e adicionar uma folha de estilo dentro dela e para que isso funcionasse, nós precisávamos ter certeza de dizer ao expresso para servir o diretório público.
Então, uma vez que fizemos, fizemos uma pequena mudança, que era dizer expressar
que todos os nossos modelos serão sim, a menos que seja indicado.
Portanto, não precisamos escrever cada Sim após cada nome do modelo.
E então, a grande mudança que fizemos foi a introdução do Parshall's.
Então, fizemos um diretório chamado Parshall, pode ser nomeado qualquer coisa.
Algumas pessoas chamam de layouts Parshall's também é muito comum.
E então nós tínhamos dois arquivos ou cabeçalho e rodapé e todo
o objetivo disso era apenas ajudar a esconder nosso código para que não tivéssemos que adicionar isso a cada modelo.
Em vez disso, nós vamos para o nosso modelo e tudo o
que temos a fazer é escrever incluir o bloqueio da Parshall e não estamos limitados apenas ao cabeçalho e rodapé, nós
podemos ter um para a barra de navegação se tivermos uma barra de navegação em cada página.
Poderíamos ter outro parcial que incluíssemos a antiga barraca de Parshall.
Portanto, não há regras sobre o que podemos e não podemos fazer.
Mas o mais comum é cabeçalho e rodapé.
Tudo bem, então é isso