hexo博客系列(四)测试博客功能

测试博客功能

测试图片

阿里云图片测试

得出结论,阿里云图床在github.io上无法显示，可能要使用国内的服务器才能比较快速响应

本地图片测试

由于github镜像源限制的问题，不推荐站主们使用github作为文件或者是图片的镜像源，而是使用比较正规的托管平台或者图片上传平台。

标签外挂测试图片

[{"url":"https://s2.loli.net/2024/06/14/4RrcPzbG3fsqyC6.png","alt":"3.png","title":""}]

图床图片测试

苍之彼方的四重奏.png

测试系列文章

标签外挂测试

本以下基于hexo+butterfly的主题，其他的主题请读者自行查阅有关资料

官方文档：Butterfly 文檔(四) 標簽外挂 | Butterfly

Note (Bootstrap Callout)

个人使用，感觉比较适合知识的分层结构，比如我博客里面的《英语语法(英语兔版)》

tag-hide

个人感觉比较适合于问答类型或者是部分内容较多，需要的时候再展开的文章内容。测试如下

Block测试

查看答案

答案就在你心中

Toggle测试

Butterfly安裝方法

在你的博客根目錄裏

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的 dev 分支，可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

Mermaid测试

这是和图表有关的标签，可以画流程图，时序图等

注意要先写{% mermaid %} {% endmermaid %} 然后就在这两个标签内写相关代码。

    
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

乐谱测试

测试自带的chartjs——可以实现动态效果，建议使用。

{
    "type": "pie",
    "data": {
        "labels": [
            "编程",
            "音乐",
            "阅读",
            "游戏",
            "健身",
            "旅游"
        ],
        "datasets": [
            {
                "label": "喜爱指数",
                "data": [
                    30,
                    24,
                    19,
                    14,
                    9,
                    4
                ],
                "backgroundColor": {
                    "dark-mode": [
                        "rgba(255, 99, 132, 0.5)",
                        "rgba(54, 162, 235, 0.5)",
                        "rgba(255, 206, 86, 0.5)",
                        "rgba(75, 192, 192, 0.5)",
                        "rgba(153, 102, 255, 0.5)",
                        "rgba(255, 159, 64, 0.5)"
                    ],
                    "light-mode": [
                        "rgba(255, 99, 132, 0.2)",
                        "rgba(54, 162, 235, 0.2)",
                        "rgba(255, 206, 86, 0.2)",
                        "rgba(75, 192, 192, 0.2)",
                        "rgba(153, 102, 255, 0.2)",
                        "rgba(255, 159, 64, 0.2)"
                    ]
                },
                "borderColor": {
                    "dark-mode": [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)"
                    ],
                    "light-mode": [
                        "rgba(255, 99, 132, 1)",
                        "rgba(54, 162, 235, 1)",
                        "rgba(255, 206, 86, 1)",
                        "rgba(75, 192, 192, 1)",
                        "rgba(153, 102, 255, 1)",
                        "rgba(255, 159, 64, 1)"
                    ]
                }
            }
        ]
    },
    "options": {
        "plugins": {
            "legend": {
                "labels": {
                    "color": {
                        "dark-mode": "rgba(255, 255, 255, 0.8)",
                        "light-mode": "rgba(0, 0, 0, 0.8)"
                    }
                }
            }
        }
    }
}

除了计算机编程外，我想不出还有其他让我感兴趣的工作。
我可以无中生有地创造出精美的范式和结构，
在此过程中也解决了无数的小谜团。
I can’t think of any other job other than computer programming that interests me.
I can create beautiful paradigms and structures out of nothing,
Countless small mysteries are also solved in the process.

tab演示

This is Tab 1.

This is Tab 2.

This is Tab 3.