Hexo blog | how to make your valine look better

Posted by Raider on Mon, 13 Dec 2021 14:54:46 +0100

I wrote one before Code that can be used in blog (II) , this is the third article This article introduces valine's style optimization

Valine introduction

Valine Born on August 7, 2017, it is based on LeanCloud A fast, concise and efficient back-end comment free system. Theoretically, it supports but is not limited to static blogs. At present, Valine has been used by blog programs such as Hexo, Jekyll, Typecho, Hugo and Ghost.

Valine version

This article is based on valine 1.4 14 introduction

Valine added a word

The effect is shown in the figure:

Modification method:

Find the location where valine is added corresponding to the blog. For example, the theme of Ayer is located in hexo \ themes \ layer \ layout\_ partial\post\valine. ejs
Add a code inside:

<script type="text/javascript">
   fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
    })
    .catch(console.error)
</script>

Api interface description: (1) https://v1.hitokoto.cn/ (randomly selected from 7 categories) (2) https://v1.hitokoto.cn/?c=b (request a sentence classified as comics)

parameter	explain
a	animation
b	cartoon
c	game
d	literature
e	original
f	From the network
g	other
h	Movies
i	poetry
j	Netease cloud
k	Philosophy
l	Shake smart
other	Process as animation type

Multiple classifications can be selected, for example:? c=a&c=c

(3) https://v1.hitokoto.cn/?c=f&encode=text (request a sentence from the network and output it in plain text format)

Returned format description

Return parameter name	describe
id	One word logo
hitokoto	One word text. The encoding method is unicode. Use utf-8.
type	type
from	The source of a word
from_who	One word author
creator	Add by
creator_uid	Adder user ID
reviewer	Auditor identification
uuid	One word unique identification; Can link to https://hitokoto.cn?uuid=[uuid] view the complete information of this sentence
commit_from	Submission method
created_at	Add time
length	Sentence length

For example: the returned data, through data Hitokoto get sentence body

valine add Daily Verse

reference resources https://cungudafa.top/post/8202.html

The addition method is similar to the effect above. Just add it in

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
 jinrishici.load(function(result) {
     var jrsc_plac =  result.data.content + "\n「" + result.data.origin.title + "」" + result.data.origin.dynasty + " · " + result.data.origin.author;
     document.getElementById("veditor").setAttribute("placeholder",jrsc_plac);
 })
</script>

valine custom expression

First, you need a lot of expression packs You can fork some expression package warehouses on GitHub, and then use Jsdelivr CDN to call For example: my Fork https://github.com/blogimg/emotion
In Valine configuration, add emojiCDN and emojiMaps parameters

new Valine({
    el:'#vcomment',
    appId:'<Your_APP_ID>',
    appKey:'<Your_APP_KEY>',

    // CDN is set here. The default microblog expression is CDN
    emojiCDN: 'https://cdn.jsdelivr.net/gh/XXXXXX/emotion/', 
    // Expression title and image mapping
    emojiMaps: {
        "Black question mark":"bilibili/tv_Black question mark.png","applause":"bilibili/tv_applause.png"
        // ...  More expressions
    } 
})

The effect is shown in the figure:

valine background

The effect is shown in the figure

Add method, just add code in the same way

<style>
.v[data-class=v] .veditor {
    background-image: url(https://cdn.jsdelivr.net/gh/xxxxxx/xxxx/xxxx.xxx);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}
</style>

Programmer Think