Solitude主题杂项配置指南
Efu让我转载他之前写的Solitude配置教程，那我顺便汇总整理下，方便大家参考。
那年今日卡片
- 在
source文件夹下找到_data文件夹（没有先新建），找到aside.yml文件（没有先新建）。在aside.yml文件中添加如下代码：- name: history title: 那年今日 class: card-history id: icon: solitude st-clock-fill content_class: content_id: history-baidu content_css: 'height:80px;overflow:hidden' content_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>' - 在
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)
}/**
那年今日
*/
#aside-content .card-history .swiper-wrapper {
flex-direction: column
}
#aside-content .card-history .item-headline {
margin-left: 0;
}
#aside-content .card-history .history_slide {
text-align: left;
display: flex !important;
flex-direction: column;
align-items: flex-start
}
#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)
}- 在
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);
})();// 那年今日
document.addEventListener('DOMContentLoaded', function () {
async function cardHistory() {
const historyContainer = document.getElementById('history-container');
if (!historyContainer) return;
const data = await fetchHistoryData();
const html = 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 swiperContainer = document.querySelector('.history_swiper-container');
document.getElementById('history_container_wrapper').innerHTML = html
const swiperHistory = new Swiper(swiperContainer, {
loop: true,
direction: 'vertical',
autoplay: {disableOnInteraction: true, delay: 5000},
mousewheel: false,
});
historyContainer.onmouseenter = () => swiperHistory.autoplay.stop();
historyContainer.onmouseleave = () => swiperHistory.autoplay.start();
async function fetchHistoryData() {
const myDate = new Date();
const formattedDate = 'S' + `${myDate.getMonth() + 1}`.padStart(2, '0') + `${myDate.getDate()}`.padStart(2, '0');
const historyDataUrl = `https://fastly.jsdelivr.net/gh/Zfour/Butterfly-card-history@2.08/baiduhistory/json/${myDate.getMonth() < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1}.json`;
const response = await fetch(historyDataUrl);
const data = await response.json();
return data[formattedDate];
}
}
cardHistory()
document.addEventListener('pjax:complete', cardHistory);
})- 在主题配置文件
_config.solitude.yml的extends的head中添加如下：- <link rel="stylesheet" href="/css/custom.css"> - 在主题配置文件
_config.solitude.yml的extends的body中添加如下：- <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>无障碍快捷菜单
- 主题内置了配置项，启用并配置即可。
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/' - list 可添加的方法包括
func: 自己定义的方法，主题内自带的非Sco的方法sco: Sco内置的方法link: 可直接写链接只能添加一个方法，如果添加多个方法，只会执行最后一个方法
- 我的配置
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/' - 保存后，重新部署即可。
- 参考
| 类型 | 方法 | 说明 |
|---|---|---|
| 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=占位颜色（可选） %}- 图片宽度高度：width=300px, height=32px
- 图片描述：alt=图片描述
- 占位背景色：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=高度（可选） %}- 高度：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 视频链接 %}- 对其方向：left, center, right
- 列数：逗号后面直接写列数，支持 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 样式参数(参数以空格划分), 文本内容 %}- 字体: logo, code
- 颜色: red,yellow,green,cyan,blue,gray
- 大小: small, h4, h3, h2, h1, large, huge, ultra
- 对齐方向: 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 %}- Unique name：不带逗号的选项卡块标记的唯一名称。
- 将在 #id 中用作每个选项卡及其索引号的前缀。
- 如果名称中有空格，则对于生成 #id 所有空格都将替换为破折号。
- 仅帖子/页面的当前网址必须是唯一的！
- [index]：活动选项卡的索引号。
- 如果未指定，将选择第一个选项卡 （1）。
- 如果 index 为 -1，则不选择任何选项卡。这将是剧透。
- 可选参数。
- [Tab caption]：当前选项卡的标题。
- 如果未指定标题，则带有选项卡索引后缀的唯一名称将用作选项卡的标题。
- 如果未指定标题，但指定了图标，则标题将为空。
- 可选参数。
- [@icon]：图标名称（全名，例如“solitude st-logo”）
- 可以指定有或没有空格;例如，“Tab caption @icon”类似于“Tab caption@icon”。
- 可选参数。
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 | 内容区 |
史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗纳德·韦恩创立了苹果公司
苹果收购NeXT公司，乔布斯于隔年重返苹果公司
苹果电脑公司正式推出其首款智能手机iPhone，并宣布更名为苹果公司
库克宣布Mac将采用自研的ARM芯片
{% timeline %}
{% timenode 1976.4 %}
史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗纳德·韦恩创立了苹果公司
{% endtimenode %}
{% timenode 1996 %}
苹果收购NeXT公司，乔布斯于隔年重返苹果公司
{% endtimenode %}
{% timenode 2007.1 %}
苹果电脑公司正式推出其首款智能手机iPhone，并宣布更名为苹果公司
{% endtimenode %}
{% timenode 2020.6 %}
库克宣布Mac将采用自研的ARM芯片
{% endtimenode %}
{% endtimeline %}link 外链
{% 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 样式参数（可选）, 文本内容 %}- 样式: plus, minus, times
- 颜色: red,yellow,green,cyan,blue,gray
- 选中状态: checked
{% 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}
$$效果如下所示：
Mermaid
引用站外链接
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
评论 ()