找资料的时候偶然发现一些博主的博客园博客相当好看，甚至看不出是博客园，我印象中博客园还是一个老套的UI。心血来潮就想着自己弄一个玩玩。
主题
博客园本身自己是有默认的100来个皮肤，但是都是上古时代的UI了。这里找到了一个主题——geek。
示例：
配置方法
具体配置方法可以参考作者文档
<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>const config = {// 默认启用皮肤 'reacg'// 在这里添加自定义配置// 当前为全部使用默认配置}$.awesCnb(config)
</script>
在页脚 HTML 代码中输入以上代码后就可以自己进行配置了，例子：
<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>const config = {theme: {name: 'geek',avatar: '',//头像headerBackground: ''//头部背景图},webTag: {enable: true,title: "网站标题",favicon: "https://xxx.ico",},//等等}$.awesCnb(config)
</script>
具体可以参考配置选项
顶部签名配置
signature: {enable: true,contents: ["This theme is built with <b style='color:#ff6b81'>awescnb</b>.","<b>console.log(🍺);</b>",],
},
作者给的模板是多个语句形成轮换效果，并且给出的签名写死在代码固定不变。这里采用一言优化一下。
根据一言接口说明可以得到一言语库的一个json返回。
{"id": 8577,"uuid": "204dea35-6cb9-4f0d-b4e3-09a6692feaba","hitokoto": "可总是有人来不及证明，就已被看腻。","type": "g","from": "狐狸","from_who": "薛之谦","creator": "iron","creator_uid": 10953,"reviewer": 1,"commit_from": "web","created_at": "1638522093","length": 17
}
因此在页脚 HTML 代码通过发送请求可以得到一言语料,并且把其加入到signature的contents中。
signature: {enable: true,contents: [] // 初始为空，后续会填充一言内容},//……// 发送请求获取一言内容fetch('https://v1.hitokoto.cn').then(response => response.json()).then(data => {let content = data.hitokoto;// 如果 from_who 不为空if (data.from_who) {content += ` —— ${data.from_who}`;}// 如果 from 不为空if (data.from) {content += `「${data.from}」`;}// 将拼接好的内容添加到配置对象中opts.signature.contents = [content];// 调用 $.awesCnb 初始化插件$.awesCnb(opts);}).catch(error => {console.error('获取一言内容时出错:', error);// 出错时可以使用默认内容opts.signature.contents = ["Always keep a beginner's mind, don't forget the beginner's mind."];$.awesCnb(opts);});
