Blog de embellecimiento del estilo de comentarios de Valine

Enlace original: /posts/763113948.html

Valine es un sistema de comentarios sin backend muy liviano. Actualmente, existen muchos blogs estáticos como Hexo, Jekyll, Hugo, etc. Todos son compatibles con Valine de forma nativa. El blog de Halo que uso me vuelve loco debido a la función de emoticonos del sistema de comentarios incorporado (lo que significa que no tiene uno), así que aún así elijo seguir usando Valine (gané). No digo que sea porque no quiero rendirme y ahorrarme mucho dinero (años de comentarios).

Documentación oficial de Valine

A partir de la actualización de este artículo, Valine se actualizó a la versión v1.4.14. Muchas funciones que anteriormente no eran compatibles se utilizaron continuamente durante la epidemia porque el autor estaba inactivo. en casa. Después de una versión, finalmente fue compatible. Por supuesto, hay algunas funciones pequeñas que también podemos encontrar y usar en Valine modificadas por otras.

El embellecimiento de esta interfaz es básicamente una cuestión de preferencia. A algunas personas les gusta la "sencillez" del Valine original, mientras que a otras les gusta cambiarlo según sus propios gustos. Las siguientes son todas las mejoras para el estilo de mi área de mensajes. Si también está usando la versión v1.4.14, puede usar los siguientes estilos directamente.

Esto ya admite la función de paquete de emoticones personalizados en la versión 1.4.5 de Valine. Configura principalmente dos elementos de configuración, emojiCDN y emojiMaps. Se recomienda leer la documentación. Lo que es más importante debería ser la fuente del paquete de emoticonos. Aquí recomendamos la interfaz del paquete de emoticonos CDN proporcionada por xaoxuu, que cubre aru, tieba, qq, weibo y otros paquetes de emoticones. El método actual para usar paquetes de emoticonos nativos es principalmente escribir rutas en emojiCDN y escribir relaciones de mapeo en emojiMaps. De esta manera, al agregar una gran cantidad de paquetes de emoticones en js, todavía resulta muy engorroso escribirlo, por lo que sugiero que lo haga. Lo mejor es modificar la configuración en el código fuente de Valine.

Primero ubique aquí en el código fuente y modifique la ruta del paquete de emoticonos original de Sina, correspondiente al campo emojiCDN en la configuración js:

Luego ubique aquí y modifique la ruta de mapeo del paquete de emoticonos Correspondiente al campo emojiMaps en js:

Modificar el código fuente anterior puede evitar escribir muchas configuraciones engorrosas en js. Los amigos que lo necesiten pueden considerarlo.

Debido a que se importa en js, no necesitamos agregar emoticonos uno por uno manualmente. Tomando el paquete de emoticones xaoxuu dado anteriormente como ejemplo, podemos escribir así:

. Después de agregar los emoticones arriba, la clasificación debería ser nuestra idea más intuitiva. Sin embargo, el autor de la Valine nativa actualmente no proporciona esta función. A continuación proporciono una MiniValine que puede implementar la función de clasificación de emoji.

Dirección de demostración de MiniValine

Este autor proporciona dos tipos de complementos de comentarios de Valine, uno es el estilo xCss, que es el autor del estilo nativo de Valine, el otro es el estilo DesertP; que también utilicé en mi blog anterior de Hexo (llamado Enhanced Valine). Dado que la funcionalidad de Valine nativo se ha puesto al día, volví al complemento Valine nativo escrito en xCss.

Voy demasiado lejos. Dicho esto, si desea utilizar este complemento de Valine con su propia función de clasificación de emoticones, puede consultar el documento de Github proporcionado por el autor. Esta versión de MiniValine no solo tiene clasificación de emoticones. Las funciones como la identificación de blogger y socio que se proporcionan a continuación se han integrado y siguen siendo muy útiles.

Copié esta foto del tío Drew (? Así de bonita es). Busqué muchas fotos antes, pero no pensé que se vieran muy bien. Después de elegir y elegir, finalmente me decidí. Usa la foto del tío Drew, que creo que se ve mejor.

Se recomienda que a la hora de buscar imágenes lo mejor sea buscar aquellas con fondo blanco o fondo transparente, de lo contrario se verán feas.

Para usarlo, agrega CSS al archivo de estilo de tu blog.

Las imágenes en la URL de arriba se pueden cambiar a tu gusto.

Puedes cambiar esto según tu propio gusto. Incluso puedes imitar a Disqus y poner estos tres cuadros de entrada en la misma línea que el botón de enviar.

Antes de usarlo, asegúrese de que la identificación del div comentado por Valine sea vcomments, es decir,

Esto es relativamente sencillo y además puede añadir algo de dinámica al blog.

Puedes darte cuenta de esto mirando el estilo de mi área de comentarios, por lo que no incluiré una imagen aquí.

Esta Valine nativa no es compatible. Necesitamos usar el archivo Valine modificado. Puede reemplazar directamente la Valine nativa con el siguiente archivo Valine.min.js.

En comparación con el nativo, tiene las siguientes funciones adicionales:

El método de uso es similar al nativo, excepto que puedes configurar varios parámetros más:

Ejemplo Por ejemplo, podemos agregar campos en la configuración js de Valine de la siguiente manera:

Lo anterior se puede lograr agregando parámetros a la configuración de Valine y no afectará otros parámetros nativos. Para el cifrado MD5, podemos recomendar un sitio web generado en línea. Sin embargo, el cifrado único frontal MD5 en sí no es seguro, pero la seguridad es relativa. Solo la información del correo electrónico en sí tiene poco valor. Si tiene requisitos relativamente altos para la seguridad del blog y espera que la dirección de correo electrónico de la persona que dejó el mensaje no se filtre (por supuesto, esto no se puede evitar por completo), todavía no se recomienda usarlo.

Esta función se implementa principalmente utilizando Service Sauce, que puede hacer que su blog reciba comentarios a través de WeChat o QQ. El artículo original escrito por el autor original Xiaokang Blog es muy detallado. Si necesita habilitar esta función, puede leerlo aquí. No dedicaré mucho tiempo a describir esta función.