Como Desarrollar Plantilla Blogger con ReactJS - [Parte II]
En mi entrada anterior compartí el código de una plantilla ReactJS con Material UI para Blogger, sin embargo aún no se enlaza con el contenido de las entradas de Blogger. En esta entrada veremos como realizar la conexión entre el Front desarrollado y el Back de Blogger.
Comenzamos con los requisitos:
- Tener un blog de Blogger
- Configurar platillas clássicas en la sección de temas.
Modificaciones de código
Reutlizaremos gran parte del código de la platilla anterior, con la diferencia que a través de las tags de Blogger insertaremos el contenido de los posts en la forma de un objeto JSON. Para esto haremos una intercalación entre el código Javascript de ReactJS y las tags de Blogger.
La primera parte que modificaremos es justo antes de import de los componentes de Material UI. Agregamos dos lineas de código que van a generar una bandera con un valor que dependerá de si la página actual es un post o es el home. Las líneas de códgio son las siguientes:
const isHome = true;
const isHome = false;
Continuando con las modificaciones ahora hacemos los siguientes cambios en el componente Main. La intención de estos cambios es reaccionar a la bandera que hemos generado con las modificaciones de código anterior.
function Main(props) {
const classes = useStyles();
const { posts, title } = props;
const post = isHome ? '' :posts[0];
return (
<Grid item xs={12} md={8}>
<Typography variant="h6" gutterBottom>
{isHome? title : post.title}
</Typography>{!isHome && <i>{post.date}</i>}
<Divider />
{isHome && posts.map((post) => (
<div className={classes.markdown} key={post.url}>
<h3>{post.title}</h3>
<div dangerouslySetInnerHTML={{__html:post.content}} />
</div>
))}
{!isHome && <div dangerouslySetInnerHTML={{__html:post.content}} />}
</Grid>
);
}
Otra parte de la plantilla anterior que requiere cambios es el contenido de los posts. En la anterior era un arreglo de strings con texto simple. Ahora deberá contener un arreglo de objetos que representan el contenido de cada post del blog. A continuación los cambios que se requieren:
// Publicaciones recientes
const posts = [<Blogger>
{
date: "<$BlogItemDateTime$>",
postId:"<$BlogItemNumber$>",
title: "<$BlogItemTitle$>",
url: "<$BlogItemPermalinkUrl$>",
content: '<$BlogItemBody$>',
authorName: "<$I18NPostedByAuthorNickname$>"
},
</Blogger>];
Si realizamos correctamente los cambios y los aplicamos en blogger podemos ver que el contenido configurado como: titulo, descripción y entradas ahora aparecen visibles en el blog.
Código completo
El código completo de la plantilla lo comparto a continuación:
Si quieres verlo en el editor de Github abre blogger-template.html y modificalo a tu gusto.
Finalemente es necesario cargar el contenido completo de la plantilla en el editor de temas de Blogger. En mi entrada anterior expliqué el proceso de carga de la plantilla y lo puedes consultar aquí