Bem vindo de volta.
Então, vamos pegar onde paramos.
Nós cobrimos o novo índice criativo.
Agora estamos passando para mostrar.
Então, novamente, o ponto da página de exibição é que ele mostra todas as informações
ou mais informações no índice sobre um item específico e o caminho tem uma idéia nele.
Assim, o nosso será blogueiro. D. O ID inicialmente recebe solicitação.
botão que diga ler mais e isso nos levará à página do show e então vamos ao estilo do show modelo apenas um pouco.
Nós tínhamos alguns objetivos na rota de exibição do modelo, então queremos ter links para
que, na página do índice, possamos ter um
Vamos começar definindo a rota.
Então, depois da nossa criação, vamos adicionar em outro comentário e isso precisa ser um ator para obter
barras de barras cortar pedido de identificação de cólon e resposta e salvar e podemos fazer tão simples quanto enviar a página de exibição para começar.
Certifique-se de que isso funciona.
Então, reinicie o servidor
e nós podemos ir ao blog qualquer coisa e ver a página do show.
É claro que as idéias serão idéias longas de mangustão que se parecem com isso e não estaremos digitando isso, mas estaremos
clicando em links para vê-los.
Então vamos fazer isso agora vamos voltar e adicionar um link para a página de exibição no índice para que possamos ter
um botão que diz Leia mais aqui mesmo ao lado da publicação.
Isso nos levará à página do show.
Então, em nosso modelo de índice, se abrimos isso em vez de pontos de vista, o
que acontecerá é apenas depois que o corpo do blog adiciona uma marca de âncora e apenas dirá ler mais e o H ref será um registro de barras.
Mas essa ID é variável através de cada blog.
Então precisamos de cada Sim.
E isso precisa ser um ponto de referência de blog, o ID irá salvar o reinício.
Agora temos um link e, se clicarmos sobre ele, assista a você que todos foram bloqueados.
5 6 3 enquanto blá blá.
A mesma coisa aqui com uma identificação diferente.
Tudo bem, então agora precisamos preencher a lógica na rota que é suposto levar essa Id encontrar
o blog correspondente e depois renderizar o modelo de exibição. Comece por encontrar o log correto dentro
dessa rota de exibição.
Então, o método de manglers que usamos é um blague dot find by ID e que leva dois argumentos para o ID e o
retorno de chamada.
Então, o ID está bem aqui, solicite o tipo de identificação que a ID e nossa taxa de retorno de chamada
haverá um erro e, em seguida, chamaremos isso de bloqueio.
Aqui vamos nós.
Verificaremos o erro novamente, se alguma vez.
E vamos fazer algo simples.
Vamos redirecionar para a página de índice.
Eventualmente, vou mostrar-lhe um tratamento de erro muito melhor, onde podemos mostrar uma mensagem que diz que o log não foi encontrado
ou desculpe, não consigo encontrar esse blog e o levarei de volta à página em que você estava apenas.
Mas, por enquanto, vamos sempre voltar para o Smashbox, mas não deve haver nada que cause um erro
nos ratos.
Nosso banco de dados está completamente desligado ou algo assim.
Então, isso realmente não importa para nós, neste momento, os Reds renderizam o modelo do show e precisamos passar
no blog de som e nós apenas chamaremos de blog.
Então o blog encontrado dentro do modelo será chamado de Blog.
Agora precisamos desse modelo de exibição.
Então vamos fazer isso agora.
As visualizações de toque mostram que Aegeus abre isso e aqui
vou começar a copiar o que eu tenho no Novo, que é uma forma e não queremos
nada disso.
Então, o que queremos é algumas dessas coisas básicas como o segmento de contêineres de texto principal do UI,
vamos manter isso por enquanto.
dele, em vez de muito, vamos adicionar o título da postagem e o título deve ser o título do blog.
Mas, dentro
Vamos salvá-lo.
E vamos ver se isso funciona.
Então, novamente, o blog é o que achamos dentro do show aqui.
Buscamos isso com a ID registrada encontrada por ID se encontrarmos se não houver nenhum erro passado encontrado flagelado
no registro de nome para o modelo de exibição no modelo de exibição.
Estamos usando o blog.
Tudo bem.
Momento da
Verdade, vamos rapidamente um desses links, vamos a primeira publicação.
Então, se eu clicar nisso, você deveria ver meu novo cachorro.
E nós fazemos.
Ótimo.
Então, temos o básico.
A parte difícil realmente foi feita.
Agora é apenas uma questão de exibir as informações que queremos exibir.
Então, vamos voltar e definitivamente queremos exibir a imagem.
Queremos exibir o conteúdo também.
Então eu vou roubar algo disso do índice.
Nós já temos tudo isso escrito agora e nós apenas o classificaremos um pouco diferente aqui.
Aqui vamos nós.
Vamos começar com isso.
Mas vamos fazer isso parecer melhor.
Vamos ver o que recebemos se atualizarmos.
Há nossa publicação.
Aqui está a nossa página de exibição.
Uma coisa que vale a pena notar é que isso atualmente não mostra nada que não vejamos no
índice e isso é porque nosso índice mostra tudo.
Mas a maioria dos blogs é que eles mostram parte da publicação.
Então, se tivéssemos uma publicação de blog 10000 Line, não queremos que ele ocupe mais de 10000 linhas aqui.
Em vez disso, você pode ter uma pré-visualização de um parágrafo ou então e depois clicar em ler mais e faremos isso em
apenas um momento.
Mas vamos começar escrevendo isso um pouco.
A primeira coisa que temos é o nosso recipiente de texto principal.
Nós temos um enorme cabeçalho.
E, em seguida, dentro de você, você pode adicionar outra div, onde vamos colocar tudo
dentro dessa div e dar uma classe igual ao segmento de UI superior.
O segmento faz é colocar uma pequena borda em torno de coisas, então parece que, em
vez disso, você vai adicionar uma classe div igual ao item e, em vez do item, estamos colocando todo o nosso conteúdo.
uma classe semântica chamada você centralizei a imagem, que é quatro classes.
Então, começará com a imagem e, ao invés de apenas exibir a imagem inteira como é, podemos adicionar
Então, você, a imagem, apenas nos dará uma imagem de UI semântica agradável, mas se a gente se concentrar, centrará
a imagem nesse recipiente em arredondado e dará alguns cantos arredondados.
Não será circular.
Você pode fazer isso com eu acho que a imagem do círculo ou a imagem circular, mas arredondada, apenas
altera os cantos um pouco.
Vamos verificar isso para começar.
Aqui vamos nós.
Estamos nos aproximando e depois entraremos aqui e adicionaremos outro dispositivo.
Este será classe igual ao conteúdo, se você quiser saber de onde eu estou recebendo.
Se você passar para o item de itens exibidos na UI semântica, é de onde eu estou tirando.
Então, temos um item div em vez de um item, podemos ter uma imagem e, em seguida, conteúdo que é exatamente o que eu
fiz.
Então, temos um item com conteúdo dentro e esse não é realmente o propósito.
Você não vai ser um especialista em UI semântica depois disso.
outro quadro, mas não para que você saiba fazer de você um especialista em semântica.
É novamente apenas para mostrar-lhe
Tudo bem, em vez disso, então, vamos adicionar em nossa extensão o que eles criaram assim e economizarão uma
pequena mudança, porém, é que isso não é realmente ideal para um usuário ver o que podemos fazer
é muito facilmente mudar isso em uma data mais legível.
E há alguns métodos com datas de javascript.
Há um chamado duas cordas.
Há uma corda chamada a data que é o que queremos e vou mostrar o que parece.
apenas chamar isso aqui e atualizar aviso, temos agora eu atualizo e recebo uma boa versão inglesa legível para humanos.
Se eu
Domingo 1 de novembro de 2015.
Perfeito.
Então, salvaremos isso.
Vamos continuar trabalhando um pouco aqui.
outro div é chamado de descrição e esta
é outra
classe semântica em vez de lá e isso em nosso parágrafo assim e atualizar a página.
Vamos adicionar em
E temos uma publicação de blog relativamente preparada por enquanto.
Vou me livrar desta div com uma linha dentro dela.
Não precisamos dessa linha.
E isso é do segmento que temos aqui.
Então, se nos livrarmos daquele e nós mantivemos o segmento externo, acabamos com isso ou podemos ir ao
contrário e nos livrar do segmento externo e manter o interior assim.
Seja o que quiser, parece melhor.
Eu acho que vou voltar e manter a certeza externa.
Totalmente se você.
Tudo bem.
Agora, obtenha algumas publicações em nosso banco de dados, que eu tenho algum texto mais longo para exibir ou copiar algum lorem ipsum.
É tipo isso.
E se voltarmos a nova postagem desta vez eu tenho uma imagem diferente, você está errado.
Eu ficarei surpreso.
E vou ligar para esta nova postagem com texto mais longo.
Terrível título.
Envie e nós recebemos essa imagem gigantesca aqui, nós não estamos desenhando isso.
E então recebemos muito texto.
Então, obviamente, não queremos todo esse texto na página de índice que funcionará sobre isso.
E se eu clicar em ler mais e agora recebo minha boa postagem no blog, mas observe que tudo está condensado.
Você não tem as linhas de parágrafo que queríamos.
Você não pode adicionar intervalos entre eles.
você alguma vez blogue alguma variante de HVM agora, algo como o Wordpress ou se você usar algo como meio.
Então, para tornar este um pouco mais um blog melhor usado, devemos deixar os usuários entrarem no HVM, o que
você provavelmente já viu, se
Você não escreve cada T. M. você mesmo, mas você pode fazer as coisas em
negrito, você pode incluir imagens que você pode incluir em itálico em itálico.
Bem, se fizermos isso agora, se tentarmos fazer uma nova publicação, eu continuarei com a mesma imagem novamente.
E vamos roubar aquele Lorem Ipsum de novo.
Apenas parte disso, vamos fazer algo óbvio como uma marca forte em torno disso.
Então, se funcionasse, veríamos algum texto em negrito e enviaríamos e eu esqueci de apertar.
Isso está ok.
E você verá que nosso conteúdo é exibido, mas não é executado.
Não é mostrado como um tempo limite e há uma boa razão para isso, o que é que nem
sempre é seguro deixar os usuários apenas inserirem seu próprio código HVM próprio e apenas executá-lo.
E você pode estar pensando o que é o pior que pode acontecer.
Está apenas gravado.
Bem, o que pode acontecer é que alguém realmente pode inserir uma tag de script no Javascript correto.
Então, eu vou te mostrar mais tarde.
No entanto, agora está bom porque na verdade não estamos exibindo o valor HD.
Se quisermos, é realmente uma mudança simples de um personagem na verdade.
Então esse é o modelo do show.
E se olharmos para o modelo de exibição agora, estamos exibindo o blog dot body.
Se eu mudar este sinal igual para um traço Bem, o que realmente fará é tomar qualquer blog que o corpo
retornou e avaliar isso.
Execute-o como código em vez de apenas exibir a string.
Então, se eu atualizar a página, agora temos nossa marca forte.
E se eu esperasse, você veria que é uma marca forte.
Então mudá-lo de um sinal de igual para um traço é realmente poderoso.
Em seguida, ele avalia o código.
Então, se fizermos outra postagem a mesma imagem e desta vez, fazemos um primeiro parágrafo e o parágrafo de
encerramento e, em seguida, duplicamos isso e, uma vez, obtemos um pouco de ipsum e apenas roubamos algumas dessas linhas.
Teremos apenas dois parágrafos simples.
Você verá que acabamos agora,
depois de nossas imagens gigantes, acabamos com dois parágrafos aqui.
O que é ótimo porque agora um usuário pode realmente entrar no conteúdo e especificar o estilo.
Mas aqui está um problema.
Então, se eu entrar em algo aleatório, posso fazer esse script e posso
digitar algum código aqui e fazer algo estúpido, como eu perguntei.
Certo.
Tudo isso está incorreto.
E se eu entrar neste agora, isso é HDMI, ele será executado e é uma tag de script,
o que significa que isso será executado um script de trabalho.
Então, quando eu vou para essa página agora recebo esse alerta.
Obviamente, um único alerta não é tão ruim, mas você provavelmente poderia imaginar que as coisas podem crescer
a partir daí.
Há maneiras de evitar essa questão de se livrar de qualquer tag de script.
Vou mostrar-lhe como fazer isso no final é um vídeo opcional nesta série.
É chamado de desinfetar nossos insumos.
Lá, se houver um pacote chamado de sanitizador Express que fará isso por nós.
Nós apenas dizemos para desinfetar o imóvel que acabará por se livrar de qualquer tag de script dentro dele.
Não precisamos escrever esse código.
ESTÁ BEM.
Então vamos voltar, embora tenhamos alguns problemas.
Uma dessas imagens.
Sim, voltaremos a denominá-los.
Mas comecemos por truncar essas postagens para que não vejamos todo esse conteúdo na página de índice.
Vamos deixá-lo para os primeiros 100 caracteres e, em seguida, colocar uma elipsis depois.
Então delimite uma string.
Na verdade é muito simples.
Nós vimos no início quando falamos sobre javascript que usamos o método de substring.
Então, na nossa página de índice, em vez de todo o corpo do blog, irá entupir a substring do corpo zero primeiro
caractere até.
E queremos o personagem cem ish que está bem por enquanto.
E sempre faço isso errado.
É uma substring de minúsculas.
Parece que deveria ser caso de camelo, como se fossem duas palavras, mas não é.
Tudo bem.
Então, agora, se experimentarmos isso, você verá que agora temos esses posts truncados e vamos apenas adicionar esses
simples elipses aqui.
Então substring e, em seguida, fora desse ponto de ponto de ponto sim e depois temos o nosso link de rebore.
Então, agora, nossa página de exibição serve um propósito em que vemos um pouco.
E então você pode clicar em ler mais e ver a publicação inteira.
Ótimo.
Então, cobrimos muito neste vídeo.
Você falou sobre o show falado sobre o uso do ID na rota como obter pedidos.
Configurámos a rota que levamos a identificação e encontramos o blog correspondente, em seguida, apresentamos um modelo.
Mas também falamos sobre algumas coisas novas, incluindo o modelo de exibição usando o traço aqui, em vez de um sinal
de igual, que realmente renderizará o código para executar o código e renderizar o resultado.
E então, também vimos uma string de data que é uma ótima maneira de transformar uma data em um formato melhor.
Ainda não é tão flexível.
Existem ótimas bibliotecas que se chama Moment Jap's, que permite especificar o formato exato que
você deseja.
Podemos querer algo que se pareça com o corte do mês no dia do corte do ano e podemos querer algo em que o
mês é abreviado ou podemos querer todo o mês e o dia inteiro da
semana em vez do Sol em novembro.
Você pode fazer isso com o momento, é uma maneira muito melhor de lidar com as datas, se você quiser ser muito explícito
no formato que deseja.
É apenas uma biblioteca simples que você pode instalá-la, como Jay Querrey ou qualquer outra biblioteca do lado do cliente,
mas vamos continuar com isso por enquanto.
Construído em javascript.
Não precisamos de nenhum código extra além de uma única linha aqui.
Ótimo.
E então, a última coisa com o uso de substring em vez de um índice que é mais para uma visualização,
você não viu isso há algum tempo, mas nós o vimos cedo.
O primeiro argumento é onde queremos fazer o primeiro segundo segundo corte, é o lugar onde queremos fazer o
segundo corte.
Levamos tudo no meio.
Ótimo.
Tudo bem.
O próximo vídeo que vamos trabalhar na atualização e edição