Bienvenido de nuevo.
Así que vamos a continuar donde lo dejamos.
Hemos cubierto el índice de creación nueva.
Ahora estamos avanzando para mostrar.
Así que, de nuevo, el punto de la página del programa es que muestra toda la información
o más información en el índice sobre un elemento en particular y la ruta tiene una idea.
Entonces los nuestros serán bloggers. RE. ID inicialmente recibe una solicitud.
botón que diga leer más y que nos lleve a la página de la demostración y luego pasemos al estilo del programa plantilla solo un poco.
Fuimos unos pocos objetivos en la ruta del espectáculo de la plantilla, entonces queremos tener enlaces para
que en la página de índice podamos tener un
Comencemos definiendo la ruta.
Así que después de nuestra creación agregaremos otro comentario y este debe ser un actor. Los blogs de barra
oblicua reducen la solicitud y respuesta de ID de dos puntos y guardan y podemos hacer tan simple como esa página de mostrar de envío para comenzar.
Solo asegúrate de que esto funcione.
Así que reinicia el
servidor y podemos ir al blog para ver todo y ver la página de mostrar.
Por supuesto, las ideas serán ideas largas y mongoles que se verán así y no escribiremos esto, sino que haremos clic
en los enlaces para verlas.
Así que hagámoslo ahora, regresemos y agreguemos un enlace a la página de la demostración en el índice para que podamos tener
un botón que dice Leer más aquí mismo al lado de la publicación.
Eso nos llevará a la página del programa.
Entonces, en nuestra plantilla de índice, si lo abrimos en lugar de vistas, lo
primero que hará será que el cuerpo del blog agregue una etiqueta de anclaje y simplemente dirá leer más y la referencia H será registros de barras.
Pero esa identificación es variable a través de cada blog.
Entonces, necesitamos cada Sí.
Y eso necesita ser un punto de blog ID de subrayado guardará el reinicio.
Ahora tenemos un enlace y si hacemos clic en él, veremos que está todo recortado.
5 6 3 mientras bla, bla.
Lo mismo aquí con una ID diferente.
De acuerdo, ahora tenemos que completar la lógica de la ruta que se supone que debe tomar este ID.
Encontrar el blog correspondiente y luego renderizar la plantilla del espectáculo. Comencemos por encontrar el registro correcto dentro de
la ruta del programa.
Entonces, la metanfetamina que utilizamos es la búsqueda de punto blague por ID y eso toma dos argumentos, la identificación y la devolución
de llamada.
Entonces, la ID está aquí solicitando punto harams esa ID y nuestra tasa de devolución de llamada tendrá
un error y luego lo llamaremos bloqueo encontrado.
Aquí vamos.
Comprobaremos el error nuevamente si alguna vez lo hiciera.
Y hagamos algo simple.
Haremos un redireccionamiento a la página de índice.
Eventualmente mostraré un manejo de errores mucho más agradable donde podemos mostrar un mensaje que dice que no se encontró el registro o
lamento no poder encontrar ese blog y lo llevaré de vuelta a la página en la que acababa de ingresar.
Pero por ahora siempre volveremos a Smashbox pero no debería haber nada que cause un error en los
ratones.
Nuestra base de datos está completamente cerrada o algo así.
Así que esto realmente no nos importa en este punto, los demás rojos renderizan la plantilla del show y tenemos
que pasar el blog de sonido y simplemente lo llamaremos blog.
Entonces, el blog encontrado dentro de la plantilla se llamará Blog.
Ahora necesitamos esa plantilla de muestra.
Así que hagámoslo ahora.
Las vistas táctiles muestran que Aegeus lo abre y aquí
comenzaré a copiar lo que tengo en Nuevo, que es un formulario, y no queremos nada
de eso.
Entonces, lo que sí queremos es algunas de estas cosas básicas, como el segmento de contenedores de texto principal de la interfaz de
usuario del encabezado, que guardaremos por ahora.
de él en lugar de enorme, agreguemos el título de la publicación y el título debería ser el título del blog.
Pero dentro
Vamos a guardarlo
Y veamos si funciona.
Así que de nuevo el blog es lo que encontramos dentro del programa aquí.
Lo buscamos con el ID registrado buscando por ID si lo encontramos si no se pasó ningún error encontrado azotado a través
del registro de nombre a la plantilla del programa en la plantilla del programa.
Estamos usando blog.
Todo bien.
Momento de
la verdad, vamos rápido a uno de estos enlaces allí vamos la primera publicación.
Entonces, si hago clic en este, deberías ver mi nuevo perro.
Y lo hacemos
Estupendo.
Entonces tenemos lo básico.
La parte difícil realmente hecho.
Ahora solo se trata de mostrar la información que queremos mostrar.
Así que volveremos y definitivamente querremos mostrar la imagen.
Queremos mostrar el contenido también.
Así que robaré algo de eso del índice.
Ya tenemos todo esto escrito ahora y lo haremos un poco diferente aquí.
Aquí vamos.
Comenzaremos con esto.
Pero haremos que esto se vea mejor.
Veamos qué obtenemos si actualizamos.
Está nuestra publicación.
Aquí está nuestra página de espectáculos.
Una cosa que vale la pena destacar es que actualmente no muestra nada que no veamos en el índice y
eso se debe a que nuestro índice muestra todo.
Pero la mayoría de los blogs lo hacen porque muestran parte de la publicación.
Entonces, si tuviéramos una publicación de blog de 10000 líneas, no queremos que ocupe 10000 líneas aquí.
Más bien, es posible que tenga una vista previa de un párrafo y luego haga clic en leer más y lo haremos
en un momento.
Pero comencemos diseñando esto un poco.
Lo primero que tenemos es nuestro contenedor de texto principal.
Tenemos un gran encabezado.
Y luego dentro de eso puedes agregar otro div donde vamos a poner todo dentro
de ese div y darle una clase igual al segmento superior adjunto de UI.
Lo que hace el segmento es poner un pequeño borde alrededor de las cosas, así que parece
que en lugar de eso vas a agregar una clase div igual a un elemento y luego, en lugar del elemento, ponemos todo nuestro contenido.
una clase semántica llamada "Yo la centré", que es cuatro clases.
Entonces comenzaremos con la imagen y en lugar de solo mostrar la imagen completa, podemos agregar
Entonces tu imagen solo nos dará una imagen de IU semántica agradable, pero si la centramos, la imagen se centrará
en ese contenedor y, al redondearla, le dará algunas esquinas redondeadas.
No será circular.
Puedes hacer eso con la imagen del círculo o la imagen circular, pero redondeada solo cambia
las esquinas un poco.
Vamos a verificar eso para comenzar.
Aquí vamos.
Nos estamos acercando y luego vamos a entrar y agregar otro dispositivo.
Este será de clase igual al contenido si quieres saber de dónde estoy obteniendo esto.
Si continúa con el elemento de vistas de elementos en la interfaz de usuario semántica, aquí es donde lo estoy tomando.
Así que tenemos un elemento div en lugar de un elemento, podemos tener una imagen y luego contenido, que es exactamente lo que
hice.
Entonces tenemos un artículo con contenido adentro y ese no es realmente el propósito.
No vas a ser un experto en UI semántica después de esto.
mostrarte otro marco, pero no para hacerte saber para convertirte en un experto en semántica.
De nuevo, solo es para
Muy bien, así que en lugar de eso vamos a agregar en nuestro lapso lo que crearon así y ahorrará un
pequeño cambio, aunque es que esto no es realmente ideal para que un usuario vea que lo que podemos
hacer es cambiar muy fácilmente. eso en una fecha más legible.
Y hay algunos métodos con fechas de javascript.
Hay uno llamado dos cuerdas.
Hay una cadena llamada a la fecha que es lo que queremos y te mostraré cómo se ve.
llamo aquí y actualizo el aviso de que ahora tenemos una actualización y obtengo una buena versión en inglés de lectura humana.
Si simplemente lo
Domingo 1 de noviembre de 2015.
Perfecto.
Así que salvaremos eso.
Sigamos trabajando un poco aquí.
que se llama descripción y esta es
otra clase
semántica en lugar de allí y esta en nuestro párrafo así y actualice la página.
Añadamos otro div
Y tenemos una publicación de blog relativamente hecha por ahora.
Me desharé de este div con una línea dentro de él.
No necesitamos esa línea.
Y eso es del segmento que tenemos aquí.
Entonces, si nos deshacemos de eso y mantenemos el segmento externo, terminamos con esto o podemos ir al
revés y deshacernos del segmento externo y mantener el interior como este.
Lo que creas que se ve mejor.
Creo que volveré y mantendré seguro el exterior.
Totalmente si tu.
Todo bien.
Ahora vamos a publicar en nuestra base de datos que tengo texto más largo para mostrar o copiar algo de lorem ipsum.
Es como esto.
Y si volvemos a publicar algo nuevo esta vez, tengo una imagen diferente en la que te equivocas.
Me sorprenderé.
Y voy a llamar a esta nueva publicación con texto más largo.
Terrible título.
Envía y obtenemos esta imagen gigantesca aquí. No la estamos diseñando.
Y luego recibimos mucho texto.
Entonces, obviamente, no queremos que todo este texto en la página de índice funcione en eso.
Y si hago clic en leer más y ahora obtengo mi buena publicación en el blog aquí, pero observe que todo está condensado.
No tienes esas líneas de párrafo que queríamos.
No puedes agregar pausas en el medio.
visto si alguna vez publica alguna variante de HVM, algo así como Wordpress o si usa algo como medium.
Entonces, para hacer de esto un blog mejor y más útil, deberíamos permitir que los usuarios ingresen HVM,
lo que probablemente haya
Usted no escribe cada T. METRO. usted mismo, pero puede hacer que las cosas
en negrita puede incluir imágenes puede incluir párrafos en cursiva de texto.
Bueno, si hacemos eso ahora, si intentamos hacer una nueva publicación, mantendré la misma imagen otra vez.
Y robemos ese Lorem Ipsum de nuevo.
Solo parte de esto, hagamos algo obvio como una etiqueta fuerte sobre algo de esto.
Entonces, si funciona, veríamos un texto en negrita y lo enviaríamos, y me olvidé de ajustarlo.
Está bien.
Y verá que nuestro contenido se muestra pero no se ejecuta.
No se muestra como un tiempo de espera y hay una buena razón para eso, que no siempre es tan
seguro dejar que los usuarios simplemente ingresen su propio HVM en su propio código y lo ejecuten.
Y quizás pienses qué es lo peor que puede pasar.
Simplemente lo ha grabado.
Bueno, lo que puede suceder es que alguien pueda ingresar una etiqueta de script en ejecutar Javascript.
Entonces te mostraré eso más tarde.
Ahora mismo está bien porque no estamos visualizando la cantidad de HD.
Si quisiéramos, es un personaje de cambio realmente simple.
Entonces esa es la plantilla del show.
Y si miramos la plantilla del programa en este momento, estamos mostrando el blog dot body.
Si cambio este signo igual a un guión, lo que realmente hará es tomar el blog que ese cuerpo
devolvió y evaluarlo.
Ejecútelo como código en lugar de solo mostrar la cadena.
Entonces, si actualizo la página, obtenemos nuestra etiqueta fuerte allí mismo.
Y si lo esperaba, verías que es una etiqueta realmente fuerte.
Así que cambiarlo de un signo igual a un tablero es realmente poderoso.
En realidad, evalúa el código.
Entonces, si hacemos otra publicación con la misma imagen, esta vez hacemos un primer párrafo y el párrafo
de cierre y luego duplicamos eso y luego, una vez, tomamos algo de ipsum y robamos algunas de estas líneas.
Solo tendremos dos párrafos simples.
Verás que terminamos ahora después
de nuestras imágenes gigantes y terminamos con dos párrafos aquí.
Lo cual es genial porque ahora un usuario puede ingresar el contenido y especificar el estilo.
Pero aquí hay un problema.
Entonces, si introduzco algo aleatorio aquí, puedo hacer este script y puedo
escribir un código aquí y hacer algo estúpido como te pedí.
Por supuesto.
Todos estos están mal escritos.
Y si ingreso esto ahora, esto es HDMI, se ejecutará y es una etiqueta de script,
lo que significa que se ejecutará un script de trabajo.
Entonces, cuando voy a esa página ahora recibo esa alerta.
Obviamente, una sola alerta no es tan mala, pero probablemente puedas imaginar que las cosas pueden
escalar desde allí.
Hay formas de evitar el problema de deshacerse de las etiquetas de script.
Te mostraré cómo hacer eso al final es un video opcional en esta serie.
Se llama desinfectar nuestras entradas.
Allí si hay un paquete llamado Express sanitiser que lo hará por nosotros.
Simplemente le decimos que desinfecte su propiedad, lo que eliminará cualquier etiqueta de script dentro de ella.
No tenemos que escribir ese código.
DE ACUERDO.
Así que, volvamos, tenemos algunos problemas.
Una estas imágenes
Sí, volveremos a diseñar estos.
Pero empecemos por truncar estas publicaciones para que no veamos todo este contenido en la página de índice.
Dejémoslo a los primeros 100 caracteres y luego pongamos puntos suspensivos después.
Así que delimita una cadena.
En realidad es realmente simple.
Vimos desde el principio cuando hablamos de javascript utilizamos el método de subcadena.
Por lo tanto, en nuestra página de índice, en lugar de todo el cuerpo del blog, se saturará la subcadena del cuerpo cero del primer carácter hasta
ese momento.
Y queremos el personaje de cien años que está bien por ahora.
Y siempre me sale mal
Es una subcadena de minúsculas.
Parece que debería ser un camello, como dos palabras, pero no lo es.
Todo bien.
Entonces, si probamos esto, vemos que ahora tenemos estas publicaciones truncadas y simplemente agreguemos puntos suspensivos
simples aquí.
Así que substring y luego fuera de ese punto sí punto dot y luego tenemos nuestro enlace rebore.
Así que ahora nuestra página de muestra tiene un propósito en el que vemos un poco.
Y luego puede hacer clic en leer más y ver la publicación completa.
Estupendo.
Así que hemos cubierto mucho en este video.
Usted habló sobre el programa habló sobre el uso de la identificación en la ruta de cómo recibir solicitudes.
Configuramos la ruta en la que tomamos la identificación y encontramos el blog correspondiente y luego presentamos una plantilla.
Pero también hablamos sobre algunas cosas nuevas, incluida la plantilla del programa que usa el guión aquí en lugar de un
signo igual que en realidad representará el código para ejecutar el código y mostrar el resultado.
Y luego también vimos la cadena de fecha, que es una buena forma de transformar una fecha en un mejor formato.
Todavía no es tan flexible.
Hay grandes bibliotecas, una llamada Moment Jap, que le permite especificar el formato exacto
que desea.
Es posible que deseemos que algo que se parece al mes reduzca drásticamente el día, y que deseemos algo en el que se abrevie
el mes o podríamos querer todo el mes y todo el día de la
semana en lugar de Sun en noviembre.
Puede hacerlo con la forma mucho mejor de manejar fechas del momento J si desea ser muy explícito en
el formato que desea.
Es solo una biblioteca simple, puedes instalarlo como Jay Querrey o cualquier otra biblioteca del lado del cliente, pero vamos
a seguir con esto por ahora.
Incorporado en javascript
No necesitamos ningún código adicional que no sea una sola línea aquí.
Estupendo.
Y luego, lo último con el uso de la subcadena en lugar de un índice que es más para una vista que
no ha visto en un tiempo, pero lo vimos desde el principio.
El primer argumento es donde queremos hacer que el segundo argumento de primer corte sea donde queremos hacer el
segundo corte.
Tomamos todo en el medio.
Estupendo.
Todo bien.
¿El próximo video vamos a trabajar en la actualización y edición?