博客园美化方案，以及个性签名展示

找资料的时候偶然发现一些博主的博客园博客相当好看，甚至看不出是博客园，我印象中博客园还是一个老套的UI。心血来潮就想着自己弄一个玩玩。

2025/9/9更新 关于一些ui不显示

主题

博客园本身自己是有默认的100来个皮肤，但是都是上古时代的UI了。这里找到了一个主题——geek。
示例：
image

配置方法

具体配置方法可以参考作者文档

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>
<script>
  const config = {
    // 默认启用皮肤 'reacg'
    // 在这里添加自定义配置
    // 当前为全部使用默认配置
  }
  $.awesCnb(config)
</script>

在页脚 HTML 代码中输入以上代码后就可以自己进行配置了，例子：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
</head>

<body>
    <script>
        // 初始化配置对象
        const opts = {
            theme: {
                name: 'geek',
                url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
                log: true,
                avatar: "", // 头像
                headerBackground:
                    "", // 背景
            },
            darkMode: {
                enable: true,
                darkDefault: false,
                autoDark: false,
                autoLight: false
            },
            postSignature: {
                enable: false,
            },
            signature: {
                enable: true,
                contents: ["签名处"] 
            },
	  //等等其他配置
        };
	$.awesCnb(opts);
    </script>
</body>

</html>

具体可以参考配置选项

顶部签名配置

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);
            });

关于一些ui不显示

由于8 月 12 日字节的CDN下线(https://cdn.bytedance.com/) ，这个主题的一些ui无法使用了，悲！
image1
作者给出处理方式(https://www.yuque.com/awescnb/pugltk/vtkhly7thacap3p4)

posted @ 2025-02-12 23:14  eien  阅读(105)  评论(0)    收藏  举报