Saludos!! Es no es una entrada convencional para el blog, pero me gustaria documentar esto, ya que lo uso constantemente y quiero tenerlo a la mano, como el titulo lo dice este es el script que utilizo para mostrar los indices en varios lugares del blog.
Importante mencionar que no soy el autor de esto y tamposo soy un experto en el tema (simplemente es por que lo uso y me ha servido), en algun momento cuando lo empece a usar lo encontre en un blog, pero recientemente he tratado de visitarel link pero esta muerto. ¿Que fue lo hice? Lo he pasado por la IA para mejorar ciertos fallos que se tenia con el scirpt original.
- El primero y mas importate, no podia usarlo dos veces en un mismo lugar.
- Eliminar cierto texto del titulo.
NOTA: Los pasos que mostrare en el post son los que he usado, si en algun momento, tu lector estas replicandolo y NO usas escatamente lo mismo pero tienes dudas, yo no puedo ayudarte, como dije NO soy un experto. Sin mas prosigamos...
Codigo:
Uso de CDN:
Al copiar la URL tendremos algo similar a este enlace:
Con respecto al codigo, creo que se pueden hacer cambios y mejoras, pero de momento esto me funciona y asi he decidido dejarlo para actualizar mis indices en el blog. El script lo he dejado en Gits, asi que es el siguiente:
Uso de CDN:
Para usarlo primero debemos pasarlo por un CDN (si no sabes que es, andate a preguntarle a Sr.Google), buen yo voy a utilizar rawgit.hack pero debe de haber otras opciones.
Basta con copiar la URL de nuestro archivo "index-blogger.js" (por cierto puedes usar el archivo que he subido a mi Git o tu crear uno propio. Mas adelante vemos lo del URL) y pegarlo en rawgit.hack, para que nos de dos opciones a usar, yo he usado la de produccion.
NOTA: Una vez que pegas un enlace en rawgit.hack se queda almacenado (no recuerdo si lo lei en el sitio que hasta un año) y si estas probando (colores, texto, tamaños, nuevas funciones) y el enlace sigue siendo el mismo este no se vera reflejado, lo comento por que es lo que me paso cuando hacia pruebas. Ahorita vemos que hacer si la cagas como yo.
Obtener la URL:
Como mencione antes, usa mi archivo o tu archivo (cualquier opcion es valida) y vamos a dar click en la opcion Raw.
https://gist.githubusercontent.com/MrChunckuee/6e73c51071c65cea921a5ddce4abf651/raw/b7a647305824b2524df08794ca7dc88135036e97/index-blogger.js
Ahora bien si usamos tal cual esta la URL nos servira para hacer pruebas por el simple hecho que tiene esto "raw/b7a647305824b2524df08794ca7dc88135036e97" lo cual quiere decir que estas apuntando a la revision especifica.
Cada vez que editas tu Gist, se genera un ID de revisión nuevo por lo tanto esto va a cambiar y es ideal ya que rawgit.hack lo tomara como un enlace nuevo y podras ver los resultados al estar haciendo pruebas. Esto implica a que cada cambio que realices tienes que estar reemplazando tu URL en el lugar en donde lo este utilizando, pero una vez que tengas el resultado deseado puesdes usar el enlace sin el ID, por ejemplo:
https://gist.githubusercontent.com/MrChunckuee/6e73c51071c65cea921a5ddce4abf651/index-blogger.js
NOTA: Una vez que este URL y quieras hacer cambios no podraas ver los resultados por el motivo que mencione antes, el sitio tarda bastante tiempo en actualizar/limpiar el cache, aunque parece que si eres partner de rawgit.hack te puedes poner en contacto con ellos y lo limpian para que puedas volver a usarlo. En mi caso decidi usar la primera opcion con el ID.
El resultado final de usar rawgit.hack tendras algo como esto:
https://gistcdn.githack.com/MrChunckuee/6e73c51071c65cea921a5ddce4abf651/raw/cb0b0ab99aa1e83673d224bbfb48f05925ba8d30/index-blogger.js¿Como usarlo en blogger?
Llegado a este punto estamos listos para usar el script en nuestra entrada/pagina de blogger, para esto tenemos dos opciones. La primera ir directamente a nuestra entrada/pagina en donde queremos nuestro indice, entrar en modo "Vista en HTML" y pegar lo siguiente:
<div style="text-align: justify;"><b><span style="font-size: medium;">Titulo del indice:</span></b></div><div id="indice">Cargando...</div><script type="text/javascript">var confIndice = { sortBy: 'titleasc', lastPost: 2, newtab: false, date: false, newPost: ' - Nuevo!', cleanTitle: true};function cbIndice(json) { displayToc(json, confIndice, 'indice'); }</script><script src="/feeds/posts/summary/-/Proyectos?alt=json-in-script&callback=cbIndice"></script><script src="https://gistcdn.githack.com/MrChunckuee/6e73c51071c65cea921a5ddce4abf651/raw/fecb3a077dc7902ddb5dcea10a1513b47296aa3d/index-blogger.js"></script>
Con esto ya podras tener un indice en donde hayas colocado el codigo. Ahora bien si quieres tener mas indices en el mismo sitio basta con repetir el mismo codigo dos veces y cambiar ciertas cosas para que funcione, aca podemos ver como quedaria para un indice doble:
<div style="text-align: justify;"><b><span style="font-size: medium;">Microcontroladores:</span></b></div><div style="text-align: justify;"></div> <div id="contenedor-1">Cargando...</div><div style="text-align: justify;"><b><span style="font-size: medium;">Modulos:</span></b></div><div style="text-align: justify;"></div><div id="contenedor-2">Cargando...</div><script type="text/javascript">// Configuración y ejecución para la Lista 1var conf1 = { sortBy: 'titleasc', lastPost: 3, newtab: false, date: false, newPost: ' - Nuevo!', cleanTitle: true};function listaUno(json) { displayToc(json, conf1, 'contenedor-1'); }// Configuración y ejecución para la Lista 2var conf2 = { sortBy: 'dateoldest', lastPost: 3, newtab: false, date: false, newPost: ' - Nuevo!', cleanTitle: false};function listaDos(json) { displayToc(json, conf2, 'contenedor-2'); }</script><script src="/feeds/posts/summary/-/Microcontroladores?alt=json-in-script&callback=listaUno"></script><script src="/feeds/posts/summary/-/Modulos?alt=json-in-script&callback=listaDos"></script><script src="https://gistcdn.githack.com/MrChunckuee/6e73c51071c65cea921a5ddce4abf651/raw/fecb3a077dc7902ddb5dcea10a1513b47296aa3d/index-blogger.js"></script>
Notaran que de marcado cierto texrto en colores, aca la explicacion:
- Verde: Titulo del indice, puede ser cambiado a conveniencia, tambien esta en verde la palabra "Cargando..." este texto se mostrara mientras estas en la "vista de redaccion" y tambien mientras esta cargando la entrada/pagina.
- Naranja: Son las etiquetas que quieres mostrar en tu indice.
- Azul y Purpura: Esto es lo que hay de diferente entre tener uno o dos indices en el mismo lugar, de hecho puedes terner mas siempre y cuando etiquetas/nombres de este color sean diferentes.
Otra variante que se puede y es la que aplique en este blog, agregar el enlace directamente en la plantilla del blog, asi no sera necesario estarlo agregando cada que lo uses, punto a favor de esto es que si cambia esa dicreccion simplemente lo actualizas en un lugar y se ve reflejado en todo.
Para esto vamos a Tema >> Editar HTML y cuscamos la etiqueta "/head" y pegamos lo sugientes antes de esta etiqueta.
<script src="https://gistcdn.githack.com/MrChunckuee/6e73c51071c65cea921a5ddce4abf651/raw/fecb3a077dc7902ddb5dcea10a1513b47296aa3d/index-blogger.js"></script>
Por lo tanto con este cambio ya no sera necesario pegar esta linea en todos lados, lo dejamos en la cabecera y solo lo actualizamoscuando sea necesario.
Personalizar el indice
Para persoalidarlo vamos a modificar la siguiente linea "sortBy: 'dateoldest', lastPost: 3, newtab: false, date: false, newPost: ' - Nuevo!', cleanTitle: false" aca a detalle cada uno de los elementos:
- sortBy: 'dateoldest', es la forma en que se muestran las artÃculos publicados en el indice y se tiene las siguientes opciones.
- orderlabel: Ordena alfabéticamente por CategorÃas.
- titleasc: Ordena alfabéticamente por TÃtulo del Post (de A a Z).
- titledesc: Ordena alfabéticamente por TÃtulo del Post (de Z a A).
- dateoldest: Ordena el TÃtulo del Post por fecha de publicación (del más antiguo al más reciente).
- datenewest: Ordena el TÃtulo del Post por fecha de publicación (del más reciente al más antiguon.
- lastPost: 3, Numero de post a los que se les pone una marca. En este caso los ultimos 3 en publicarse.
- newtab: false, la forma de abir el enlace. Si es false, lo abre en la misma ventana, si es true lo abre en ventana nueva.
- date: false, es configurar si queremos mostrar la fecha de publicacion, se entiende que false no aparece y true mostrara la fecha.
- newPost: ' - Nuevo!', texto o marca que aparece en los últimos artÃculos, dejarlo bacio si no se desea mostrar nada.
- cleanTitle: true, Este es uno de los cambios que he realizado. Si es true elimina el texto a la izquierda de los dos puntos ":" en el titulo, si es false se deja el titulo intacto. Un ejemplo tomando el tieutlo de este post:
- true = Script para indices personalizados en el blog
- false = Blogger: Script para indices personalizados en el blog
Aca dejo un ejemplo de como queda el resultado:
Bueno por el momento es todo si tienes dudas, comentarios, sugerencias, inquietudes, traumas, etc. dejarlas y tratare de responder lo mas pronto posible.
Links:
0 Comentarios