本文目的

我的个人博客已经搭建好了,使用的hugo+飞雪的主题。我看到有些博客上有些随机的名人名言,但是这个主题没有。遂自己写一个。

根据飞雪的主题自定义

飞雪主题的github: https://github.com/flysnow-org/maupassant-hugo

复制主题里的文件themes/maupassant/static到自己的博客根目录下。新增文件static/js/quotes.json,内容于下:

[
  ["时来谁不来,时不来谁来", "兰陵笑笑声", "金瓶梅"]
]

这是个json文件,内容格式是[["名言", "作者", "书名"]]

然后在static/js/totop.js 文件下,新增如下内容:


function randomQuotesIdx(start =0, end = 100) {
    return parseInt((end - start + 1) * Math.random() + start);
}

function getQuotesJsonArray(file, callback) {
    $.getJSON(file, function(data){
        callback(data)
    });
}

$(document).ready(function (){
    // var quotes = [
    //     ["时来谁不来,时不来谁来","兰陵笑笑声", "《金瓶梅》"],
    //     ["投资成功与否并非取决于你了解的东西,而在于你能否老老实实地承认你所不知道的东西!\n" +
    //     "投资人并不需要做对很多事情,重要的是不要犯重大的错误!", "巴菲特"],
    //     ["好的程序代码本身就是最好的文档", "Steve McConnell", "《代码大全》"],
    // ]
    getQuotesJsonArray("/js/quotes.json", function (quotes) {
        var idx = randomQuotesIdx(0,quotes.length-1)
        var quote = quotes[idx]
        var tmpHtml
        if (quote !== undefined) {
            tmpHtml =  quote[0] +  (quote[1] ? "\n" + " —— " + quote[1]: "") + (quote[2] ? " 《"+quote[2] +"》": "");
        }
        document.getElementById('quotes').innerText = tmpHtml
    })
})

执行hugo命令,重新生成public文件, 这样就能看到在博客页面上看到随机的名人名言, 如果想要新加名人名言,则在static/js/quotes.json文件新增如下格式的内容:

[
  ["名言", "作者", "书名"],
  ["名言", "作者", "书名"]
]

--完--