Efu让我转载他之前写的Solitude配置教程,那我顺便汇总整理下,方便大家参考。

那年今日卡片

  1. source 文件夹下找到 _data 文件夹(没有先新建),找到 aside.yml 文件(没有先新建)。在 aside.yml 文件中添加如下代码:
    home: # 如果在首页显示
      noSticky: # 如果需要固定在右侧
        - class_name: card-history
          id_name:
          name: 那年今日
          icon: solitude st-clock-fill
          class_content:
          id_content: history-baidu
          style_content: 'height:100px;overflow:hidden'
          html: '<div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%;margin-top: 6px">
            <div id="history_container_wrapper" class="swiper-wrapper"></div>
          </div>'
  2. source 文件夹下找到 css 文件夹(没有先新建),找到 custom.css 文件(没有先新建)。在 custom.css 文件中添加如下代码:
    /**
    那年今日
    */
    
    #aside-content .card-history .swiper-wrapper {
        flex-direction: column
    }
    
    #aside-content .card-history .history_slide {
        text-align: left;
        display: flex!important;
        flex-direction: column;
        align-items: flex-start
    }
    
    #aside-content .card-history #history-baidu>.blog-slider__pagination {
        display: none
    }
    
    #aside-content .card-history .history_slide_time {
        color: var(--efu-secondtext);
        font-size: 14px;
        font-style: italic;
        font-weight: lighter
    }
    
    #aside-content .card-history .history_slide_link {
        line-height: 1.5;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical
    }
    
    #aside-content .card-history .history_slide_link a {
        color: var(--efu-main);
        padding: 0 4px;
        border-radius: 4px
    }
    
    #aside-content .card-history .history_slide_link a:hover {
        color: var(--efu-white);
        background: var(--efu-main)
    }
  3. source 文件夹下找到 js 文件夹(没有先新建),找到 custom.js 文件(没有先新建)。在 custom.js 文件中添加如下代码:
    // 那年今日
    (function() {
        async function fetchHistoryData() {
            const myDate = new Date();
            const myMonth = myDate.getMonth() + 1;
            const getDate = myDate.getDate();
            const getMonth = myMonth < 10 ? "0" + myMonth : "" + myMonth;
            const getDay = getDate < 10 ? "0" + getDate : "" + getDate;
            const getMonthDate = "S" + getMonth + getDay;
            const history_data_url = `https://fastly.jsdelivr.net/gh/Zfour/Butterfly-card-history@2.08/baiduhistory/json/${getMonth}.json`;
    
            const response = await fetch(history_data_url);
            const data = await response.json();
            return data[getMonthDate];
        }
    
        function append(parent, text) {
            const temp = document.createElement('div');
            temp.innerHTML = text;
            const frag = document.createDocumentFragment();
            while (temp.firstChild) {
                frag.appendChild(temp.firstChild);
            }
            parent.appendChild(frag);
        }
    
        function card_history() {
            if (document.getElementById('history-container')) {
                fetchHistoryData().then(data => {
                    const html_item = data.map(item => `
            <div class="swiper-slide history_slide">
                <span class="history_slide_time">A.D.${item.year}</span>
                <span class="history_slide_link">${item.title}</span>
            </div>
            `).join('');
                    const history_container_wrapper = document.getElementById('history_container_wrapper');
                    append(history_container_wrapper, html_item);
                    const swiper_history = new Swiper('.history_swiper-container', {
                        passiveListeners: true,
                        spaceBetween: 30,
                        effect: 'coverflow',
                        coverflowEffect: {
                            rotate: 30,
                            slideShadows: false,
                        },
                        loop: true,
                        direction: 'vertical',
                        autoplay: {
                            disableOnInteraction: true,
                            delay: 5000
                        },
                        mousewheel: false,
                    });
                    const history_container = document.getElementById('history-container');
                    history_container.onmouseenter = function () {
                        swiper_history.autoplay.stop();
                    };
                    history_container.onmouseleave = function () {
                        swiper_history.autoplay.start();
                    }
                });
            }
        }
    
        card_history();
    
        document.addEventListener('pjax:complete', card_history);
    })();
  4. 在主题配置文件_config.solitude.ymlextendshead 中添加如下:
    - <link rel="stylesheet" href="/css/custom.css">
  5. 在主题配置文件_config.solitude.ymlextendsbody 中添加如下:
    - <script src="/js/custom.js"></script>

如果你没有使用 即刻短文的话,还需要在 extendsbody 中添加如下:

- <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css">
- <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script>

可自行更换CDN。

个性定位卡片

该教程调用青桔-API,无需自行申请Key,但有频率限制。

  1. source 文件夹下找到 _data 文件夹(没有先新建),找到 aside.yml 文件(没有先新建)。在 aside.yml 文件中添加如下代码:
    home: # 如果在首页显示
        Sticky:
          - class_name: card-welcome
            id_name:
            name: 来访者
            icon: solitude st-map-pin-fill
            class_content:
            id_content: 'welcome-info'
  2. source 文件夹下找到 css 文件夹(没有先新建),找到 custom.css 文件(没有先新建)。在 custom.css 文件中添加如下代码:
    #aside-content .card-welcome{
         padding: .4rem .6rem;
     }
     
     #aside-content .card-welcome #welcome-info{
         padding: 0 .4rem;
         font-size: .8rem;
     }
     
     #aside-content .card-welcome #welcome-info .ip{
         user-select: all;
         border-radius: 10px;
         background-color: var(--efu-main);
         word-wrap: break-word;
         color: var(--efu-main);
         box-shadow: 0 0 3px var(--efu-main-op);
         padding: 2px 4px;
         transition: all .3s ease-in-out;
     }
     
     #aside-content .card-welcome #welcome-info .ip:hover{
         color: var(--efu-card-bg);
     }
  3. source 文件夹下找到 js 文件夹(没有先新建),找到 custom.js 文件(没有先新建)。在 custom.js 文件中添加如下代码:
    (function () {
     const lng = '112.8455033596802'; // 经度
     const lat = '26.430308353457896'; // 纬度
     let ipStore = saveToLocal.get('location');
    
     (async function () {
         if (!ipStore) {
             await fetch(`https://api.qjqq.cn/api/Local`)
                 .then(res => res.json())
                 .then(data => {
                     if (data.code === "Success") {
                         ipStore = data;
                         saveToLocal.set('location', ipStore, 1);
                         showWelcome();
                     }
                 })
                 .catch(err => console.log(err));
         }
     })()
    
     function getDistance(e1, n1, e2, n2) {
         const R = 6371
         const {sin, cos, asin, PI, hypot} = Math
    
         let getPoint = (e, n) => {
             e *= PI / 180
             n *= PI / 180
             return {x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n)}
         }
    
         let a = getPoint(e1, n1)
         let b = getPoint(e2, n2)
         let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
         let r = asin(c / 2) * 2 * R
         return Math.round(r);
     }
    
     function showWelcome() {
         let dist = getDistance(lng, lat, ipStore.data.lng, ipStore.data.lat); //这里换成自己的经纬度
         let pos = ipStore.data.continent;
         let ip = ipStore.ip || "未知";
         let posdesc;
         //根据国家、省份、城市信息自定义欢迎语
         switch (ipStore.data.country) {
             case "日本":
                 posdesc = "よろしく,一起去看樱花吗";
                 break;
             case "美国":
                 posdesc = "Let us live in peace!";
                 break;
             case "英国":
                 posdesc = "想同你一起夜乘伦敦眼";
                 break;
             case "俄罗斯":
                 posdesc = "干了这瓶伏特加!";
                 break;
             case "法国":
                 posdesc = "C'est La Vie";
                 break;
             case "德国":
                 posdesc = "Die Zeit verging im Fluge.";
                 break;
             case "澳大利亚":
                 posdesc = "一起去大堡礁吧!";
                 break;
             case "加拿大":
                 posdesc = "拾起一片枫叶赠予你";
                 break;
             case "中国":
                 pos = ipStore.data.prov + " " + ipStore.data.city + " " + ipStore.data.district;
                 switch (ipStore.data.prov) {
                     case "北京市":
                         posdesc = "北——京——欢迎你~~~";
                         break;
                     case "天津市":
                         posdesc = "讲段相声吧";
                         break;
                     case "河北省":
                         posdesc = "山势巍巍成壁垒,天下雄关铁马金戈由此向,无限江山";
                         break;
                     case "山西省":
                         posdesc = "展开坐具长三尺,已占山河五百余";
                         break;
                     case "内蒙古自治区":
                         posdesc = "天苍苍,野茫茫,风吹草低见牛羊";
                         break;
                     case "辽宁省":
                         posdesc = "我想吃烤鸡架!";
                         break;
                     case "吉林省":
                         posdesc = "状元阁就是东北烧烤之王";
                         break;
                     case "黑龙江省":
                         posdesc = "很喜欢哈尔滨大剧院";
                         break;
                     case "上海市":
                         posdesc = "众所周知,中国只有两个城市";
                         break;
                     case "江苏省":
                         switch (ipStore.data.city) {
                             case "南京市":
                                 posdesc = "这是我挺想去的城市啦";
                                 break;
                             case "苏州市":
                                 posdesc = "上有天堂,下有苏杭";
                                 break;
                             default:
                                 posdesc = "散装是必须要散装的";
                                 break;
                         }
                         break;
                     case "浙江省":
                         posdesc = "东风渐绿西湖柳,雁已还人未南归";
                         break;
                     case "河南省":
                         switch (ipStore.data.city) {
                             case "郑州市":
                                 posdesc = "豫州之域,天地之中";
                                 break;
                             case "南阳市":
                                 posdesc = "臣本布衣,躬耕于南阳此南阳非彼南阳!";
                                 break;
                             case "驻马店市":
                                 posdesc = "峰峰有奇石,石石挟仙气嵖岈山的花很美哦!";
                                 break;
                             case "开封市":
                                 posdesc = "刚正不阿包青天";
                                 break;
                             case "洛阳市":
                                 posdesc = "洛阳牡丹甲天下";
                                 break;
                             default:
                                 posdesc = "可否带我品尝河南烩面啦?";
                                 break;
                         }
                         break;
                     case "安徽省":
                         posdesc = "蚌埠住了,芜湖起飞";
                         break;
                     case "福建省":
                         posdesc = "井邑白云间,岩城远带山";
                         break;
                     case "江西省":
                         posdesc = "落霞与孤鹜齐飞,秋水共长天一色";
                         break;
                     case "山东省":
                         posdesc = "遥望齐州九点烟,一泓海水杯中泻";
                         break;
                     case "湖北省":
                         switch (ipStore.data.city) {
                             case "黄冈市":
                                 posdesc = "红安将军县!辈出将才!";
                                 break;
                             default:
                                 posdesc = "来碗热干面~";
                                 break;
                         }
                         break;
                     case "湖南省":
                         switch (ipStore.data.city) {
                             case "长沙市":
                                 posdesc = "长沙斯塔克";
                                 break;
                             case "岳阳市":
                                 posdesc = "岳阳楼记";
                                 break;
                             case "衡阳市":
                                 posdesc = "大美雁城欢迎您!";
                                 switch (ipStore.data.district) {
                                     case "南岳区":
                                         posdesc = "南岳衡山,五岳之首";
                                         break;
                                     case "耒阳市":
                                         posdesc = "千年纸都欢迎您!";
                                         break;
                                     default:
                                         break;
                                 }
                                 break;
                             default:
                                 posdesc = "湖南人民好客,欢迎来湖南旅游";
                                 break;
                         }
                         break;
                     case "广东省":
                         switch (ipStore.data.city) {
                             case "广州市":
                                 posdesc = "看小蛮腰,喝早茶了嘛~";
                                 break;
                             case "深圳市":
                                 switch (ipStore.data.district) {
                                     case "坪山区":
                                         posdesc = "好巧!博主也在坪山区生活喔~";
                                         break;
                                     default:
                                         posdesc = "今天你996了嘛~";
                                         break;
                                 }
                                 break;
                             case "阳江市":
                                 posdesc = "阳春合水!博主家乡~ 欢迎来玩~";
                                 break;
                             default:
                                 posdesc = "来两斤福建人~";
                                 break;
                         }
                         break;
                     case "广西壮族自治区":
                         posdesc = "桂林山水甲天下";
                         break;
                     case "海南省":
                         posdesc = "朝观日出逐白浪,夕看云起收霞光";
                         break;
                     case "四川省":
                         posdesc = "康康川妹子";
                         break;
                     case "贵州省":
                         posdesc = "茅台,学生,再塞200";
                         break;
                     case "云南省":
                         posdesc = "玉龙飞舞云缠绕,万仞冰川直耸天";
                         break;
                     case "西藏自治区":
                         posdesc = "躺在茫茫草原上,仰望蓝天";
                         break;
                     case "陕西省":
                         posdesc = "来份臊子面加馍";
                         break;
                     case "甘肃省":
                         posdesc = "羌笛何须怨杨柳,春风不度玉门关";
                         break;
                     case "青海省":
                         posdesc = "牛肉干和老酸奶都好好吃";
                         break;
                     case "宁夏回族自治区":
                         posdesc = "大漠孤烟直,长河落日圆";
                         break;
                     case "新疆维吾尔自治区":
                         posdesc = "驼铃古道丝绸路,胡马犹闻唐汉风";
                         break;
                     case "台湾省":
                         posdesc = "我在这头,大陆在那头";
                         break;
                     case "香港特别行政区":
                         posdesc = "永定贼有残留地鬼嚎,迎击光非岁玉";
                         break;
                     case "澳门特别行政区":
                         posdesc = "性感荷官,在线发牌";
                         break;
                     default:
                         posdesc = "带我去你的城市逛逛吧!";
                         break;
                 }
                 break;
             default:
                 posdesc = "带我去你的国家逛逛吧";
                 break;
         }
    
         let timeChange;
         let date = new Date();
         if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span class='welcome-time'>🌤️ 早上好,一日之计在于晨</span>";
         else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span class='welcome-time'>☀️ 中午好,记得午休喔~</span>";
         else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span class='welcome-time'>🕞 下午好,饮茶先啦!</span>";
         else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span class='welcome-time'>🚶‍♂️ 即将下班,记得按时吃饭~</span>";
         else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span class='welcome-time'>🌙 晚上好,夜生活嗨起来!</span>";
         else timeChange = "<span class='welcome-time'>夜深了,早点休息,少熬夜</span>";
    
         document.getElementById("welcome-info").innerHTML =
             `<span>热烈欢迎来自~</span><br><b>${pos}</b> 的朋友</span><br><b>${posdesc}</b><br>您当前位置距博主约 <b>${dist}</b> 公里!<br><span>您的IP地址为:<b class="ip">${ip}</b></span><br>${timeChange}`;
     }
    
     const isWelcome = () => document.getElementById("welcome-info") && showWelcome();
    
     isWelcome();
     document.addEventListener('pjax:complete', isWelcome);
    })();
    • 只需把其中的经度、纬度替换成自己的即可。
    • 查获个人经纬度
  1. 自定义
    根据演示配置,可以自定义欢迎语,例如:
    switch (ipStore.data.prov) {
        case "湖南省":
            switch (ipStore.data.city) {
                case "长沙市":
                    posdesc = "长沙斯塔克";
                    break;
                case "岳阳市":
                    posdesc = "岳阳楼记";
                    break;
                case "衡阳市":
                    posdesc = "大美雁城欢迎您!";
                    switch (ipStore.data.district) {
                        case "南岳区":
                            posdesc = "南岳衡山,五岳之首";
                            break;
                        case "耒阳市":
                            posdesc = "千年纸都欢迎您!";
                            break;
                        default:
                            break;
                    }
            break;
    • 自定义样式,根据自己的要求修改即可。

新年倒计时卡片

参考

  1. source 文件夹下找到 _data 文件夹(没有先新建),找到 aside.yml 文件(没有先新建)。在 aside.yml 文件中添加如下代码:
    home:
     noSticky:
        - class_name:
          id_name: newYear
          name:
          icon:
          html: '<div id="newYear-main">
             <p class="title"></p>
             <div class="newYear-time"></div>
             <p class="today" style="text-align: right;"></p>
             </div>'
     Sticky:
  2. 新建 custom.css 文件在 [root]/source/css 目录下(如果没有css文件夹,请新建),添加如下内容:
    /* 新年侧边栏 */
    #newYear {
     color: var(--efu-card-bg);
     padding: 0 !important;
    }
    
    #newYear p,
    #newYear h3 {
     font-weight: normal;
     color: inherit;
     margin: 0;
    }
    
    #newYear .item-headline {
     display: none;
    }
    
    #newYear-main {
     min-height: 160px;
     padding: 1rem;
     position: relative;
     border-radius: 12px;
     background-color: var(--efu-theme);
    }
    
    #newYear-main * {
     position: relative;
     line-height: 1.3;
    }
    
    #newYear-main .newYear-time {
     font-weight: bold;
     text-align: center;
    }
    
    #newYear-main .time,
    #newYear-main .happyNewYear {
     font-size: 2rem;
     text-shadow: 2px 2px 2px red;
     margin: 1rem 0;
     display: block;
    }
    
    #newYear-main .day {
     font-size: 5rem;
    }
    
    #newYear-main .day .unit {
     font-size: 1rem;
    }
  3. source 文件夹下找到 js 文件夹(没有先新建),找到 custom.js 文件(没有先新建)。在 custom.js 文件中添加如下代码:
    let newYearTimer = null;
    var newYear = () => {
    clearTimeout(newYearTimer);
    if (!document.querySelector('#newYear')) return;
    // 新年时间戳 and 星期对象
    let newYear = new Date('2024-02-10 00:00:00').getTime() / 1000,
    week = { 0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六' }
    
        time();
    
        // 补零函数
        function nol(h) { return h > 9 ? h : '0' + h; };
    
        function time() {
            // 现在 时间对象
            let now = new Date();
    
            // 右下角 今天
            document.querySelector('#newYear .today').innerHTML = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日 ' + week[now.getDay()]
    
            // 现在与新年相差秒数
            let second = newYear - Math.round(now.getTime() / 1000);
    
            // 小于0则表示已经过年
            if (second < 0) {
                document.querySelector('#newYear .title').innerHTML = '喜迎新年';
                document.querySelector('#newYear .newYear-time').innerHTML = '<span class="happyNewYear">新年快乐!</span>';
            } else {
                // 大于0则还未过年
                document.querySelector('#newYear .title').innerHTML = '距离2024年春节:'
    
                // 大于一天则直接渲染天数
                if (second > 86400) {
                    document.querySelector('#newYear .newYear-time').innerHTML = `<span class="day">${Math.ceil(second / 86400)}<span class="unit">天</span></span>`
                } else {
                    // 小于一天则使用时分秒计时。
                    let h = nol(parseInt(second / 3600));
                    second %= 3600;
                    let m = nol(parseInt(second / 60));
                    second %= 60;
                    let s = nol(second);
                    document.querySelector('#newYear .newYear-time').innerHTML = `<span class="time">${h}:${m}:${s}</span></span>`;
                    // 计时
                    newYearTimer = setTimeout(time, 1000);
                }
            }
        }
    }
    newYear();
    
    document.addEventListener('pjax:complete', newYear);
  4. 在主题配置文件的 extendshead 中添加如下内容:
    - <link rel="stylesheet" href="/css/custom.css">
  5. 在主题配置文件的 extendsbody 中添加如下内容:
    - <script src="/js/custom.js"></script>

添加友链申请验证

直观地展示出友链申请条件,保证其他人能够看到并在同意后进行申请,有效节省双方的时间。

Solitude主题内置两套评论系统,下列配置按需选其一即可

  • Twikoo
**勾选** 你符合的条件:

<div id="friends_checkbox">
<p>
    <label><input type="checkbox" onclick="checkForm()"> 我已添加 <b>btwoa</b> 博客的友情链接</label>
</p>
<p>
    <label><input type="checkbox" onclick="checkForm()"> 我的链接主体为 <b>个人</b>,网站类型为<b>博客</b></label>
</p>
<p>
    <label><input type="checkbox" onclick="checkForm()"> 我的网站现在可以在中国大陆区域正常访问</label>
</p>
<p>
    <label><input type="checkbox" onclick="checkForm()"> 网站内容符合中国大陆法律法规</label>
</p>
</div>

<script>
function checkForm() {
    let comment = document.querySelector('.tk-submit');
    if(comment===null) return;
    let checkboxes = document.querySelectorAll('#friends_checkbox input[type="checkbox"]');
    let content = document.querySelector('.el-textarea__inner');
    let allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
    if (allChecked) {
        comment.style.display = 'block';
        content.value = "```yaml \n- name: \n  link: \n  avatar: \n  descr: \n```";
        content.style.height = '205px';
        content.focus();
    } else {
        comment.style.display = 'none';
        content.value = '';
    }
}
window.onload = checkForm;
document.addEventListener('pjax:complete', checkForm);
</script>
  • Waline
**勾选** 你符合的条件:

<div id="friends_checkbox">
<p>
    <label><input type="checkbox" onclick="checkForm()"> 我已添加 <b>btwoa</b> 博客的友情链接</label>
</p>
<p>
    <label><input type="checkbox" onclick="checkForm()"> 我的链接主体为 <b>个人</b>,网站类型为<b>博客</b></label>
</p>
<p>
    <label><input type="checkbox" onclick="checkForm()"> 我的网站现在可以在中国大陆区域正常访问</label>
</p>
<p>
    <label><input type="checkbox" onclick="checkForm()"> 网站内容符合中国大陆法律法规</label>
</p>
</div>

<script>
function checkForm() {
    let comment = document.querySelector('.wl-comment');
    if(comment===null) return;
    let checkboxes = document.querySelectorAll('#friends_checkbox input[type="checkbox"]');
    let content = document.querySelector('.wl-editor');
    let allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
    if (allChecked) {
        comment.style.display = 'block';
        content.value = "```yaml \n- name: \n  link: \n  avatar: \n  descr: \n```";
        content.focus();
    } else {
        comment.style.display = 'none';
        content.value = '';
    }
}
window.onload = checkForm;
document.addEventListener('pjax:complete', checkForm);
</script>

无障碍快捷菜单

  1. 主题内置了配置项,启用并配置即可。
    keyboard:
      enable: false # 是否开启键盘控制 / Whether to enable keyboard control
      # 键盘控制配置
      # Keyboard control configuration
      list:
      # name: 按键名称
      # name: Key name
      # key: 按键
      # key: Key
      # func: 方法
      # func: Function
      # sco: sco内置方法
      # sco: sco built-in method
      # url: 跳转链接
      # url: Jump link
      #    - name: 关闭快捷键功能
      #      key: K
      #      func: keyboard
      #    - name: 打开中控台
      #      key: A
      #      sco: showConsole
      #    - name: 播放/暂停音乐
      #      key: M
      #      sco: musicToggle
      #    - name: 打开友情链接
      #      key: L
      #      url: '/links/'
  2. list 可添加的方法包括
    func: 自己定义的方法,主题内自带的非Sco的方法
    sco: Sco内置的方法
    link: 可直接写链接

    只能添加一个方法,如果添加多个方法,只会执行最后一个方法

  3. 我的配置
    keyboard:
     enable: true
     list:
       - name: 关闭快捷键功能
         key: K
         func: keyboard
       - name: 打开中控台
         key: A
         sco: showConsole
       - name: 播放/暂停音乐
         key: M
         sco: musicToggle
       - name: 深色/浅色显示切换
         key: N 
         sco: switchDarkMode
       - name: 站内搜索
         key: S
         func: openSearch
       - name: 随机访问
         key: R
         func: toRandomPost
       - name: 返回首页
         key: H
         url: /
       - name: 友链鱼塘
         key: F
         url: '/moments/'
       - name: 友情链接
         key: L
         url: '/links/'
       - name: 关于本站
         key: P
         url: '/about/' 
  4. 保存后,重新部署即可。
  5. 参考
类型 方法 说明
func openSearch 打开站内搜索
func toRandomPost 随机访问
sco switchDarkMode 切换深色/浅色模式
sco switchKeyboard 切换快捷键开关
sco showConsole 打开中控台
sco musicToggle 播放/暂停音乐
sco switchCommentBarrage 切换弹幕开关
sco toTop 回到顶部
link 写需要跳转的地址

可拓展func ,自定义方法,方法名不能重复。

主题标签

Solitude 主题 Plugin Tags 部分移植来自店长的 hexo-butterfly-tag-plugins-plus,转载请注明出处。
使用方法和配置项基本相同

btn 按钮

{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认 style 时)
按钮字体和边框顔色(outline 时)
bg-default/bg-blue/bg-pink/bg-red/bg-purple/bg-orange/bg-green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为 line
block/留空
[position] : [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空
参数 含义
url 链接
text 按钮文字
icon [可选] 图标
color [可选] 按钮背景顔色(默认 style 时)按钮字体和边框顔色(outline 时)default/blue/pink/red/purple/orange/green
layout [可选] 按钮佈局 默认为 line block/留空
position [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center/right/留空
size [可选] 按钮大小 larger/留空

一组按钮

This is my website, click the btn

This is my website, click the btn

This is my website, click the btn

This is my website, click the btn

This is my website, click the btn

调整位置或大小

more than one btn in center

居中按钮

> 一组按钮

This is my website, click the btn {% btn 'https://google.com/',G %}
This is my website, click the btn {% btn 'https://google.com/',G,st-lightbulb-line %}
This is my website, click the btn {% btn 'https://google.com/',G,outline %}
This is my website, click the btn {% btn 'https://google.com/',G,st-lightbulb-line,outline %}
This is my website, click the btn {% btn 'https://google.com/',G,st-lightbulb-line,larger %}

> 调整位置或大小

{% btn 'https://google.com/',G,st-lightbulb-line,block %}
{% btn 'https://google.com/',G,st-lightbulb-line,block center larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,block right outline larger %}

> more than one btn in center

<span>
{% btn 'https://google.com/',G,st-lightbulb-line,larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,blue larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,pink larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,red larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,purple larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,orange larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,green larger %}
</span>

> 居中按钮

<div class="btn-center">
{% btn 'https://google.com/',G,st-lightbulb-line,outline larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,outline blue larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,outline pink larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,outline red larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,outline purple larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,outline orange larger %}
{% btn 'https://google.com/',G,st-lightbulb-line,outline green larger %}
</div>

image 单张图片

{% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %}
  1. 图片宽度高度:width=300px, height=32px
  2. 图片描述:alt=图片描述
  3. 占位背景色:bg=#f2f2f2

添加描述

每天下课回宿舍的路,没有什么故事。
每天下课回宿舍的路,没有什么故事。

指定宽度

设置占位背景色

优化不同宽度浏览的观感
优化不同宽度浏览的观感
> 添加描述

{% image https://ovo.btwoa.com/img/ovo/gvrfevec.png, alt=每天下课回宿舍的路,没有什么故事。 %}

> 指定宽度

{% image https://ovo.btwoa.com/img/ovo/gvrfevec.png, width=400px %}

> 设置占位背景色

{% image https://ovo.btwoa.com/img/ovo/gvrfevec.png, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

inlineimage 行内图片

{% inlineimage 图片链接, height=高度(可选) %}
  1. 高度:height=20px

这是 一段话。

这又是 一段话。

这是 {% inlineimage https://ovo.btwoa.com/img/ovo/gvrfevec.png %} 一段话。

这又是 {% inlineimage https://ovo.btwoa.com/img/ovo/gvrfevec.png, height=100px %} 一段话。

label 标签

{% label text color %}
参数 释义
text 文字
color 【可选】背景颜色,默认为 default,default/blue/pink/red/purple/orange/green

臣亮言: 创业未半,而 。今天下三分, ,此诚 也!然侍衞之臣,不懈于内; ,忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。
宫中、府中,俱为一体;陟罚臧否,不宜异同。若有 ,及为忠善者,宜付有司,论其刑赏,以昭陛下平明之治;不宜偏私,使内外异法也。

臣亮言:{% label 先帝 %}创业未半,而{% label 中道崩殂 blue %}。今天下三分,{% label 益州疲敝 pink %},此诚{% label 危急存亡之秋 red %}也!然侍衞之臣,不懈于内;{% label 忠志之士 purple %},忘身于外者,盖追先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。
宫中、府中,俱为一体;陟罚臧否,不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %},及为忠善者,宜付有司,论其刑赏,以昭陛下平明之治;不宜偏私,使内外异法也。

audio 直链音频

{% audio 音频链接 %}
{% audio 音频链接 %}

video 直链视频

{% video 视频链接 %}
  1. 对其方向:left, center, right
  2. 列数:逗号后面直接写列数,支持 1 ~ 4 列。

默认

50% 宽度

25 %

> 默认

{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}

> 50% 宽度

{% videos, 2 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% endvideos %}

> 25 %

{% videos, 4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% video https://ovo.btwoa.com/video/bvheajwcnKKWNEIOVR.mp4 %}
{% endvideos %}

p 段落文本

{% p 样式参数(参数以空格划分), 文本内容 %}
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right

red left

yellow center

green right

center h1

center ultra


{% p red left, red left %}

{% p yellow center, yellow center %}

{% p green right, green right %}

{% p center h1, center h1 %}

{% p center ultra, center ultra %}

Note (Bootstrap Callout)

{% note [class] %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, libero.
{% endnote %}
参数 含义
class 显示值

显示值:(中间空格)

  • 配色
    • default / primary / success / info / warning / danger
  • 样式
    • simple / modern / flat / disabled
  • 图标
    • noicon

默认样式

Demo 1 - default

Simple 样式

Demo 1 - default

Demo 2 - primary

Demo 3 - success

Demo 4 - info

Demo 5 - warning

Demo 6 - danger

Modern 样式

Demo 1 - default

Demo 2 - primary

Demo 3 - success

Demo 4 - info

Demo 5 - warning

Demo 6 - danger

Flat 样式

Demo 1 - default

Demo 2 - primary

Demo 3 - success

Demo 4 - info

Demo 5 - warning

Demo 6 - danger

Disabled 样式

Demo 1 - default

Demo 2 - primary

Demo 3 - success

Demo 4 - info

Demo 5 - warning

Demo 6 - danger

默认样式:
{% note default %}
Demo 1 - default
{% endnote %}

1. Simple 样式
   {% note default simple %}
   Demo 1 - default
   {% endnote %}

{% note primary simple %}
Demo 2 - primary
{% endnote %}

{% note success simple %}
Demo 3 - success
{% endnote %}

{% note info simple %}
Demo 4 - info
{% endnote %}

{% note warning simple %}
Demo 5 - warning
{% endnote %}

{% note danger simple %}
Demo 6 - danger
{% endnote %}

2. Modern 样式
   {% note default modern %}
   Demo 1 - default
   {% endnote %}

{% note primary modern %}
Demo 2 - primary
{% endnote %}

{% note success modern %}
Demo 3 - success
{% endnote %}

{% note info modern %}
Demo 4 - info
{% endnote %}

{% note warning modern %}
Demo 5 - warning
{% endnote %}

{% note danger modern %}
Demo 6 - danger
{% endnote %}

3. Flat 样式
   {% note default flat %}
   Demo 1 - default
   {% endnote %}

{% note primary flat %}
Demo 2 - primary
{% endnote %}

{% note success flat %}
Demo 3 - success
{% endnote %}

{% note info flat %}
Demo 4 - info
{% endnote %}

{% note warning flat %}
Demo 5 - warning
{% endnote %}

{% note danger flat %}
Demo 6 - danger
{% endnote %}

3. Disabled 样式
   {% note default disabled %}
   Demo 1 - default
   {% endnote %}

{% note primary disabled %}
Demo 2 - primary
{% endnote %}

{% note success disabled %}
Demo 3 - success
{% endnote %}

{% note info disabled %}
Demo 4 - info
{% endnote %}

{% note warning disabled %}
Demo 5 - warning
{% endnote %}

{% note danger disabled %}
Demo 6 - danger
{% endnote %}

tabs 分栏

分栏支持内置codesign图标,如果开启了 customicon 则可以使用自定义的图标,否则只能使用默内置codesign图标

{% tabs Unique name, [index] %}

<!-- tab [Tab caption] [@icon] -->

Any content (support inline tags too).

<!-- endtab -->

{% endtabs %}
  1. Unique name:不带逗号的选项卡块标记的唯一名称。
    1. 将在 #id 中用作每个选项卡及其索引号的前缀。
    2. 如果名称中有空格,则对于生成 #id 所有空格都将替换为破折号。
    3. 仅帖子/页面的当前网址必须是唯一的!
  2. [index]:活动选项卡的索引号。
    1. 如果未指定,将选择第一个选项卡 (1)。
    2. 如果 index 为 -1,则不选择任何选项卡。这将是剧透。
    3. 可选参数。
  3. [Tab caption]:当前选项卡的标题。
    1. 如果未指定标题,则带有选项卡索引后缀的唯一名称将用作选项卡的标题。
    2. 如果未指定标题,但指定了图标,则标题将为空。
    3. 可选参数。
  4. [@icon]:图标名称(全名,例如“solitude st-logo”)
    1. 可以指定有或没有空格;例如,“Tab caption @icon”类似于“Tab caption@icon”。
    2. 可选参数。

Demo 1 - 预设选择第一个【默认】

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - 没有预设值

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - 自定义Tab名 + icon + Tab名和icon

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 1 - 预设选择第一个【默认】


{% subtabs Demo1 %}
<!-- tab test1 -->
This is Tab 1.
<!-- endtab-->
<!-- tab test2 -->
This is Tab 2.
<!-- endtab-->
<!-- tab test3 -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

Demo 2 - 没有预设值

{% subtabs Demo2 %}
<!-- tab -->
This is Tab 1.
<!-- endtab-->
<!-- tab -->
This is Tab 2.
<!-- endtab-->
<!-- tab -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

Demo 3 - 自定义Tab名 + icon + Tab名和icon

{% subtabs Demo3 %}
<!-- tab test1  -->
This is Tab 1.
<!-- endtab-->
<!-- tab @st-mac -->
This is Tab 2.
<!-- endtab-->
<!-- tab Apple @st-mac -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

Timelne 时间轴

{% timeline title %}

{% timenode title %}

xxxx

{% endtimenode %}

{% timenode title %}

xxxx

{% endtimenode %}

{% endtimeline %}
参数 含义
title 节点名称
xxxx 内容区

1976.4

史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗纳德·韦恩创立了苹果公司

1996

苹果收购NeXT公司,乔布斯于隔年重返苹果公司

2007.1

苹果电脑公司正式推出其首款智能手机iPhone,并宣布更名为苹果公司

2020.6

库克宣布Mac将采用自研的ARM芯片

{% timeline %}

{% timenode 1976.4 %}

史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗纳德·韦恩创立了苹果公司

{% endtimenode %}

{% timenode 1996 %}
 
苹果收购NeXT公司,乔布斯于隔年重返苹果公司

{% endtimenode %}

{% timenode 2007.1 %}
 
苹果电脑公司正式推出其首款智能手机iPhone,并宣布更名为苹果公司

{% endtimenode %}

{% timenode 2020.6 %}
 
库克宣布Mac将采用自研的ARM芯片

{% endtimenode %}

{% endtimeline %}
{% link [title],[subtitle],[link] %}
参数 含义
title 标题
subtitle 简介
link 跳转链接
{% link Google,谷歌搜索,https://google.com/ %}

{% link AUR,archlinux user repository,https://aur.archlinux.org/ %}

fold 折叠块

{% fold title open %}

{% endfold %}
参数 含义
title 标题(可选)
oepn 是否打开(可选)不填默认不打开

Demo 1 - title

Demo1

Demo 2 - title + open

Demo2

Demo 1 - title

{% fold Demo1 %}

{% endfold %}

Demo 2 - title + open

{% fold Demo2 open %}

{% endfold %}

bvideo bilibili视频标签

{% bvideo [id] [time] %}
参数 含义
url bvid(例如视频链接后的:BV1k2421K7sQ)
{% bvideo BV1k2421K7sQ %}

checkbox 复选列表

{% checkbox 样式参数(可选), 文本内容 %}
  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

Katex

更换markdown-it渲染器

npm un hexo-renderer-marked --save
npm un hexo-renderer-kramed --save
npm i hexo-renderer-markdown-it --save
npm install katex @renbaoshuo/markdown-it-katex

根目录配置文件_config.yml中添加如下配置:

# markdown-it
markdown:
    preset: 'default'
    render:
        html: true
        xhtmlOut: false
        langPrefix: 'language-'
        breaks: true
        linkify: true
        typographer: true
        quotes: '“”‘’'
    enable_rules:
    disable_rules:
    plugins:
        - '@renbaoshuo/markdown-it-katex'
    anchors:
        level: 2
        collisionSuffix: ''
        permalink: true
        permalinkClass: 'headerlink'
        permalinkSide: 'left'
        permalinkSymbol: ''
        case: 0
        separator: '-'
    images:
        lazyload: true
        prepend_root: false
        post_asset: false
    inline: false   

若在博文中使用Katex,只需在文章头部Front Matter添加katex: true

---
katex: true
---

若在文章中使用Katex,只需使用$$包裹公式

$$
f(t)=\int_{-\infty}^\infty f(t) e^{-iwt}dt
$$

$$
\Bigg ( \bigg [ \Big \{ \big \langle \left | \| \frac{a}{b} \| \right | \big \rangle \Big \} \bigg ] \Bigg )
$$

$$
\begin{bmatrix} 0 & \cdots & 0 \\ \vdots & \ddots & \vdots \\ 0 & \cdots & 0 \end{bmatrix}
$$

效果如下所示:

f(t)=f(t)eiwtdtf(t)=\int_{-\infty}^\infty f(t) e^{-iwt}dt

([{ab}])\Bigg ( \bigg [ \Big \{ \big \langle \left | \| \frac{a}{b} \| \right | \big \rangle \Big \} \bigg ] \Bigg )

[0000]\begin{bmatrix} 0 & \cdots & 0 \\ \vdots & \ddots & \vdots \\ 0 & \cdots & 0 \end{bmatrix}

Mermaid

若启用gulp,则需跳过压缩mermaid展示页

- return gulp.src('./public/**/*.html')
+ return gulp.src(['./public/**/*.html','./public/skip path/skip.html'])

流程图

{% mermaid %}
flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
{% endmermaid %}
flowchart TD A[Start] --> B{Is it?} B -- Yes --> C[OK] C --> D[Rethink] D --> B B -- No ----> E[End]

时序图

{% mermaid %}
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you ?
    Bob->>Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl->>D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob->>Alice: I agree
{% endmermaid %}
sequenceDiagram Alice->>Bob: Hello Bob, how are you ? Bob->>Alice: Fine, thank you. And you? create participant Carl Alice->>Carl: Hi Carl! create actor D as Donald Carl->>D: Hi! destroy Carl Alice-xCarl: We are too many destroy Bob Bob->>Alice: I agree

Git图

{% mermaid %}
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release
{% endmermaid %}
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%% gitGraph commit branch hotfix checkout hotfix commit branch develop checkout develop commit id:"ash" tag:"abc" branch featureB checkout featureB commit type:HIGHLIGHT checkout main checkout hotfix commit type:NORMAL checkout develop commit type:REVERSE checkout featureB commit checkout main merge hotfix checkout featureB commit checkout develop branch featureA commit checkout develop merge hotfix checkout featureA commit checkout featureB commit checkout develop merge featureA branch release checkout release commit checkout main commit checkout release merge main checkout develop merge release

甘特图

{% mermaid %}
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :until isadded
    Functionality added                 :milestone, isadded, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
{% endmermaid %}
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid excludes weekends %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :until isadded Functionality added :milestone, isadded, 2014-01-25, 0d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h

类图

{% mermaid %}
classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label
{% endmermaid %}
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

状态图

{% mermaid %}
stateDiagram
   direction TB

   accTitle: This is the accessible title
   accDescr: This is an accessible description

   classDef notMoving fill:white
   classDef movement font-style:italic;
   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

   [*] --> Still:::notMoving
   Still --> [*]
   Still --> Moving:::movement
   Moving --> Still
   Moving --> Crash:::movement
   Crash:::badBadEvent --> [*]
{% endmermaid %}
stateDiagram direction TB accTitle: This is the accessible title accDescr: This is an accessible description classDef notMoving fill:white classDef movement font-style:italic; classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow [*] --> Still:::notMoving Still --> [*] Still --> Moving:::movement Moving --> Still Moving --> Crash:::movement Crash:::badBadEvent --> [*]

饼形图

{% mermaid %}
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%% pie showData title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

象限图

{% mermaid %}
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
{% endmermaid %}
quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78]

需求图

{% mermaid %}
    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    functionalRequirement test_req2 {
    id: 1.1
    text: the second test text.
    risk: low
    verifymethod: inspection
    }

    performanceRequirement test_req3 {
    id: 1.2
    text: the third test text.
    risk: medium
    verifymethod: demonstration
    }

    interfaceRequirement test_req4 {
    id: 1.2.1
    text: the fourth test text.
    risk: medium
    verifymethod: analysis
    }

    physicalRequirement test_req5 {
    id: 1.2.2
    text: the fifth test text.
    risk: medium
    verifymethod: analysis
    }

    designConstraint test_req6 {
    id: 1.2.3
    text: the sixth test text.
    risk: medium
    verifymethod: analysis
    }

    element test_entity {
    type: simulation
    }

    element test_entity2 {
    type: word doc
    docRef: reqs/test_entity
    }

    element test_entity3 {
    type: "test suite"
    docRef: github.com/all_the_tests
    }


    test_entity - satisfies -> test_req2
    test_req - traces -> test_req2
    test_req - contains -> test_req3
    test_req3 - contains -> test_req4
    test_req4 - derives -> test_req5
    test_req5 - refines -> test_req6
    test_entity3 - verifies -> test_req5
    test_req <- copies - test_entity2
{% endmermaid %}
requirementDiagram requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } functionalRequirement test_req2 { id: 1.1 text: the second test text. risk: low verifymethod: inspection } performanceRequirement test_req3 { id: 1.2 text: the third test text. risk: medium verifymethod: demonstration } interfaceRequirement test_req4 { id: 1.2.1 text: the fourth test text. risk: medium verifymethod: analysis } physicalRequirement test_req5 { id: 1.2.2 text: the fifth test text. risk: medium verifymethod: analysis } designConstraint test_req6 { id: 1.2.3 text: the sixth test text. risk: medium verifymethod: analysis } element test_entity { type: simulation } element test_entity2 { type: word doc docRef: reqs/test_entity } element test_entity3 { type: "test suite" docRef: github.com/all_the_tests } test_entity - satisfies -> test_req2 test_req - traces -> test_req2 test_req - contains -> test_req3 test_req3 - contains -> test_req4 test_req4 - derives -> test_req5 test_req5 - refines -> test_req6 test_entity3 - verifies -> test_req5 test_req <- copies - test_entity2

XY图

{% mermaid %}
---
config:
    xyChart:
        width: 900
        height: 600
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
---
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
{% endmermaid %}
--- config: xyChart: width: 900 height: 600 themeVariables: xyChart: titleColor: "#ff0000" --- xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

C4图

{% mermaid %}
    C4Context
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
        Person(customerB, "Banking Customer B")
        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {

          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

          System_Boundary(b2, "BankBoundary2") {
            System(SystemA, "Banking System A")
            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
          }

          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

          Boundary(b3, "BankBoundary3", "boundary") {
            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }

      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
{% endmermaid %}
C4Context title System Context diagram for Internet Banking System Enterprise_Boundary(b0, "BankBoundary0") { Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") Person(customerB, "Banking Customer B") Person_Ext(customerC, "Banking Customer C", "desc") Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.") System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") Enterprise_Boundary(b1, "BankBoundary") { SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") System_Boundary(b2, "BankBoundary2") { System(SystemA, "Banking System A") System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.") } System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") Boundary(b3, "BankBoundary3", "boundary") { SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.") SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") } } } BiRel(customerA, SystemAA, "Uses") BiRel(SystemAA, SystemE, "Uses") Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemC, customerA, "Sends e-mails to") UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10") UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

思维导图

{% mermaid %}
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
{% endmermaid %}
mindmap root((mindmap)) Origins Long history ::icon(fa fa-book) Popularisation British popular psychology author Tony Buzan Research On effectiveness<br/>and features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper Mermaid

时间线图

{% mermaid %}
timeline
        title England's History Timeline
        section Stone Age
          7600 BC : Britain's oldest known house was built in Orkney, Scotland
          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
        section Bronze Age
          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
                  : New styles of pottery and ways of burying the dead appear.
          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
{% endmermaid %}
timeline title England's History Timeline section Stone Age 7600 BC : Britain's oldest known house was built in Orkney, Scotland 6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers. section Bronze Age 2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking. : New styles of pottery and ways of burying the dead appear. 2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles. : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.

桑基图

{% mermaid %}
---
config:
  sankey:
    showValues: false
---
sankey-beta

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366
{% endmermaid %}
--- config: sankey: showValues: false --- sankey-beta Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 Biofuel imports,Liquid,35 Biomass imports,Solid,35 Coal imports,Coal,11.606 Coal reserves,Coal,63.965 Coal,Solid,75.571 District heating,Industry,10.639 District heating,Heating and cooling - commercial,22.505 District heating,Heating and cooling - homes,46.184 Electricity grid,Over generation / exports,104.453 Electricity grid,Heating and cooling - homes,113.726 Electricity grid,H2 conversion,27.14 Electricity grid,Industry,342.165 Electricity grid,Road transport,37.797 Electricity grid,Agriculture,4.412 Electricity grid,Heating and cooling - commercial,40.858 Electricity grid,Losses,56.691 Electricity grid,Rail transport,7.863 Electricity grid,Lighting & appliances - commercial,90.008 Electricity grid,Lighting & appliances - homes,93.494 Gas imports,Ngas,40.719 Gas reserves,Ngas,82.233 Gas,Heating and cooling - commercial,0.129 Gas,Losses,1.401 Gas,Thermal generation,151.891 Gas,Agriculture,2.096 Gas,Industry,48.58 Geothermal,Electricity grid,7.013 H2 conversion,H2,20.897 H2 conversion,Losses,6.242 H2,Road transport,20.897 Hydro,Electricity grid,6.995 Liquid,Industry,121.066 Liquid,International shipping,128.69 Liquid,Road transport,135.835 Liquid,Domestic aviation,14.458 Liquid,International aviation,206.267 Liquid,Agriculture,3.64 Liquid,National navigation,33.218 Liquid,Rail transport,4.413 Marine algae,Bio-conversion,4.375 Ngas,Gas,122.952 Nuclear,Thermal generation,839.978 Oil imports,Oil,504.287 Oil reserves,Oil,107.703 Oil,Liquid,611.99 Other waste,Solid,56.587 Other waste,Bio-conversion,77.81 Pumped heat,Heating and cooling - homes,193.026 Pumped heat,Heating and cooling - commercial,70.672 Solar PV,Electricity grid,59.901 Solar Thermal,Heating and cooling - homes,19.263 Solar,Solar Thermal,19.263 Solar,Solar PV,59.901 Solid,Agriculture,0.882 Solid,Thermal generation,400.12 Solid,Industry,46.477 Thermal generation,Electricity grid,525.531 Thermal generation,Losses,787.129 Thermal generation,District heating,79.329 Tidal,Electricity grid,9.452 UK land based bioenergy,Bio-conversion,182.01 Wave,Electricity grid,19.013 Wind,Electricity grid,289.366

框图

{% mermaid %}
block-beta
  columns 3
  a:3
  block:group1:2
    columns 2
    h i j k
  end
  g
  block:group2:3
    %% columns auto (default)
    l m n o p q r
  end
{% endmermaid %}
block-beta columns 3 a:3 block:group1:2 columns 2 h i j k end g block:group2:3 %% columns auto (default) l m n o p q r end