mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-11-12 18:06:17 +01:00
feat: add bilibili diagram echarts and improve style
This commit is contained in:
Dillon
parent
00b6b7f6ce
commit
6981f1e285
26 changed files with 1182 additions and 133 deletions
|
|
@ -1,10 +1,16 @@
|
|||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
title: "{{ replace .TranslationBaseName "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
lastmod: {{ .Date }}
|
||||
draft: true
|
||||
description:
|
||||
categories:
|
||||
-
|
||||
featured_image:
|
||||
author: ""
|
||||
description: ""
|
||||
tags: []
|
||||
categories: []
|
||||
|
||||
featured_image: ""
|
||||
|
||||
comment: true
|
||||
toc: false
|
||||
autoCollapseToc: true
|
||||
math: false
|
||||
---
|
||||
|
|
@ -1,15 +1,7 @@
|
|||
/** Font **/
|
||||
/* Lato */
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
|
||||
|
||||
/* Montserrat */
|
||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
|
||||
|
||||
/* Roboto */
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
|
||||
|
||||
html {
|
||||
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
|
||||
font-family: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
|
||||
|
||||
/* scrollbar, only support webkit */
|
||||
&::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-mobile {
|
||||
display: block !important;
|
||||
position: fixed;
|
||||
|
|
@ -141,7 +145,15 @@
|
|||
|
||||
/* iPads (portrait and landscape) ----------- */
|
||||
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
.post-warp {
|
||||
max-width: 560px !important;
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
margin-left: 580px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktops and laptops ----------- */
|
||||
|
||||
|
|
|
|||
78
assets/css/_mermaid/class.scss
Normal file
78
assets/css/_mermaid/class.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
g.classGroup text {
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.classLabel .label {
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
@mixin composition {
|
||||
fill: $nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
@include composition;
|
||||
}
|
||||
59
assets/css/_mermaid/dark/index.scss
Normal file
59
assets/css/_mermaid/dark/index.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
$mainBkg: #BDD5EA;
|
||||
$secondBkg: #6D6D65;
|
||||
$mainContrastColor: lightgrey;
|
||||
$darkTextColor: #323D47;
|
||||
$lineColor: $mainContrastColor;
|
||||
$border1: #81B1DB;
|
||||
$border2: rgba(255, 255, 255, 0.25);
|
||||
$arrowheadColor: $mainContrastColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: purple;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #F9FFFE;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: $mainContrastColor;
|
||||
$signalColor: $mainContrastColor;
|
||||
$signalTextColor: $mainContrastColor;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $darkTextColor;
|
||||
$loopTextColor: $mainContrastColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(255, 255, 255, 0.3);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #EAE8B9;
|
||||
$taskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$taskBkgColor: $mainBkg;
|
||||
$taskTextColor: $darkTextColor;
|
||||
$taskTextLightColor: $mainContrastColor;
|
||||
$taskTextOutsideColor: $taskTextLightColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$activeTaskBkgColor: #81B1DB;
|
||||
$gridColor: $mainContrastColor;
|
||||
$doneTaskBkgColor: $mainContrastColor;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #E83737;
|
||||
$critBkgColor: #E83737;
|
||||
$taskTextDarkColor: $darkTextColor;
|
||||
$todayLineColor: #DB5757;
|
||||
|
||||
@import '../mermaid';
|
||||
57
assets/css/_mermaid/default/index.scss
Normal file
57
assets/css/_mermaid/default/index.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
$mainBkg: #ECECFF;
|
||||
$secondBkg: #ffffde;
|
||||
$lineColor: #333333;
|
||||
$border1: #CCCCFF;
|
||||
$border2: #aaaa33;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: #9370DB;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$loopTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(102, 102, 255, 0.49);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #fff400;
|
||||
$taskBorderColor: #534fbc;
|
||||
$taskBkgColor: #8a90dd;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: #534fbc;
|
||||
$activeTaskBkgColor: #bfc7ff;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
@import '../mermaid';
|
||||
58
assets/css/_mermaid/flowchart.scss
Normal file
58
assets/css/_mermaid/flowchart.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
.label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon {
|
||||
fill: $mainBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.node.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: $arrowheadColor;
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: $lineColor;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: $edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: $secondBkg;
|
||||
stroke: $clusterBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 12px;
|
||||
background: $secondBkg;
|
||||
border: 1px solid $border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
58
assets/css/_mermaid/forest/index.scss
Normal file
58
assets/css/_mermaid/forest/index.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
$mainBkg: #cde498;
|
||||
$secondBkg: #cdffb2;
|
||||
$lineColor: #1a3318;
|
||||
$lineColor: green;
|
||||
$border1: #13540c;
|
||||
$border2: #6eaa49;
|
||||
$arrowheadColor: green;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: #326932;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$loopTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: #6eaa49;
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #6eaa49;
|
||||
$taskBorderColor: $border1;
|
||||
$taskBkgColor: #487e3a;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
|
||||
@import '../mermaid';
|
||||
236
assets/css/_mermaid/gantt.scss
Normal file
236
assets/css/_mermaid/gantt.scss
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
/** Section styling */
|
||||
|
||||
.section {
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: $sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: $sectionBkgColor2;
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: $altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: $gridColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: $todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.taskText {
|
||||
text-anchor: middle;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Special case clickable */
|
||||
.task.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.taskText.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight.clickable {
|
||||
cursor: pointer;
|
||||
fill: $taskTextClickableColor !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: $taskTextColor;
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: $taskBkgColor;
|
||||
stroke: $taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2
|
||||
{
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke: $activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Completed task */
|
||||
|
||||
.done0,
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: $doneTaskBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneText0,
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
/* Tasks on the critical line */
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: $critBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.milestone {
|
||||
transform: rotate(45deg) scale(0.8,0.8);
|
||||
}
|
||||
|
||||
.milestoneText {
|
||||
font-style: italic;
|
||||
}
|
||||
.doneCritText0,
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: $taskTextDarkColor;
|
||||
}
|
||||
6
assets/css/_mermaid/git.scss
Normal file
6
assets/css/_mermaid/git.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.commit-id,
|
||||
.commit-msg,
|
||||
.branch-label {
|
||||
fill: lightgrey;
|
||||
color: lightgrey;
|
||||
}
|
||||
5
assets/css/_mermaid/mermaid.scss
Normal file
5
assets/css/_mermaid/mermaid.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import 'flowchart';
|
||||
@import 'sequence';
|
||||
@import 'gantt';
|
||||
@import 'class';
|
||||
@import 'git';
|
||||
62
assets/css/_mermaid/neutral/index.scss
Normal file
62
assets/css/_mermaid/neutral/index.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
$mainBkg: #eee;
|
||||
$contrast: #26a;
|
||||
$secondBkg: lighten($contrast, 55%);
|
||||
$lineColor: #666;
|
||||
$border1: #999;
|
||||
$border2: $contrast;
|
||||
$note: #ffa;
|
||||
$text: #333;
|
||||
$critical: #d42;
|
||||
$done: #bbb;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: $text;
|
||||
$edgeLabelBackground: white;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: $text;
|
||||
$actorLineColor: $lineColor;
|
||||
$signalColor: $text;
|
||||
$signalTextColor: $text;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $text;
|
||||
$loopTextColor: $text;
|
||||
$noteBorderColor: darken($note, 60%);
|
||||
$noteBkgColor: $note;
|
||||
$activationBorderColor: #666;
|
||||
$activationBkgColor: #f4f4f4;
|
||||
$sequenceNumberColor: white;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: lighten($contrast, 30%);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: lighten($contrast, 30%);
|
||||
$taskBorderColor: darken($contrast, 10%);
|
||||
$taskBkgColor: $contrast;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: $text;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$taskTextClickableColor: #003163;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lighten($border1, 30%);
|
||||
$doneTaskBkgColor: $done;
|
||||
$doneTaskBorderColor: $lineColor;
|
||||
$critBkgColor: $critical;
|
||||
$critBorderColor: darken($critBkgColor, 10%);
|
||||
$todayLineColor: $critBkgColor;
|
||||
|
||||
@import '../mermaid';
|
||||
96
assets/css/_mermaid/sequence.scss
Normal file
96
assets/css/_mermaid/sequence.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
.actor {
|
||||
stroke: $actorBorder;
|
||||
fill: $actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: $actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: $actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: '2 2';
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: '2 2';
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
#arrowhead {
|
||||
fill: $signalColor;
|
||||
}
|
||||
|
||||
.sequenceNumber {
|
||||
fill: $sequenceNumberColor;
|
||||
}
|
||||
|
||||
#sequencenumber {
|
||||
fill: $signalColor;
|
||||
}
|
||||
|
||||
#crosshead path {
|
||||
fill: $signalColor !important;
|
||||
stroke: $signalColor !important;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: $signalTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBkgColor;
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText {
|
||||
fill: $loopTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopLine {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: '2 2';
|
||||
stroke: $labelBoxBorderColor;
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
}
|
||||
|
||||
.noteText {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.activation0 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
.activation1 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
||||
.activation2 {
|
||||
fill: $activationBkgColor;
|
||||
stroke: $activationBorderColor;
|
||||
}
|
||||
|
|
@ -44,6 +44,51 @@
|
|||
}
|
||||
}
|
||||
|
||||
.post-toc {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
max-width: 240px;
|
||||
margin-left: 800px;
|
||||
padding: 10px;
|
||||
border-left: 1px solid $global-border-color;
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
top: 120px;
|
||||
|
||||
.post-toc-title {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-toc-content {
|
||||
&.always-active ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>nav>ul {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 10px;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-active > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
color: $global-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -95,25 +140,42 @@
|
|||
padding-left: 2em;
|
||||
}
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
border-spacing: 0;
|
||||
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 5px 15px;
|
||||
border: 1px double #ebe9f5;
|
||||
> table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
border-spacing: 0;
|
||||
box-shadow: 2px 2px 3px rgba(0,0,0,.125);
|
||||
background: $table-background-color;
|
||||
|
||||
.dark-theme & {
|
||||
background: $table-background-color-dark;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: $table-thead-color;
|
||||
|
||||
.dark-theme & {
|
||||
background-color: $table-thead-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 5px 15px;
|
||||
border: 1px double $global-border-color;
|
||||
|
||||
.dark-theme & {
|
||||
border: 1px double $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
|
||||
img:hover {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
}
|
||||
|
||||
.image-caption:not(:empty) {
|
||||
|
|
@ -136,10 +198,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
img[data-action="zoom"] {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.featured_image {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
|
|
@ -193,6 +251,70 @@
|
|||
@import "../_partial/_post/code";
|
||||
@import "../_partial/_post/admonition";
|
||||
|
||||
.mermaid {
|
||||
@import "../_mermaid/neutral/index";
|
||||
|
||||
.dark-theme & {
|
||||
@import "../_mermaid/dark/index";
|
||||
}
|
||||
}
|
||||
|
||||
.echarts {
|
||||
margin: 3% auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bilibili {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 75%;
|
||||
margin: 3% auto;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
position: relative;
|
||||
border-top: 1px dashed $global-border-color;
|
||||
border-bottom: none;
|
||||
|
||||
.dark-theme & {
|
||||
border-top: 1px dashed $global-border-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .25em;
|
||||
background-color: $global-background-color;
|
||||
border: 1px solid $global-border-color;
|
||||
border-bottom-color: $global-border-color;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 -1px 0 $global-border-color;
|
||||
box-shadow: inset 0 -1px 0 $global-border-color;
|
||||
font-size: .8em;
|
||||
line-height: 1.25;
|
||||
font-family: $code-font-family;
|
||||
color: $code-color;
|
||||
|
||||
.dark-theme & {
|
||||
background-color: $global-background-color-dark;
|
||||
border: 1px solid $global-border-color-dark;
|
||||
border-bottom-color: $global-border-color-dark;
|
||||
-webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
|
||||
box-shadow: inset 0 -1px 0 $global-border-color-dark;
|
||||
color: $code-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.typeit {
|
||||
.code {
|
||||
padding: 6px;
|
||||
|
|
@ -246,13 +368,11 @@
|
|||
}
|
||||
|
||||
.post-info {
|
||||
margin-top: 5rem;
|
||||
border-top: 1px solid $global-border-color;
|
||||
margin-top: 3rem;
|
||||
border-bottom: 1px solid $global-border-color;
|
||||
|
||||
.post-info-item {
|
||||
margin: 5px 0;
|
||||
}
|
||||
padding: 1rem 0 0.3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.dark-theme & {
|
||||
border-top: 1px solid $global-border-color-dark;
|
||||
|
|
@ -261,7 +381,7 @@
|
|||
}
|
||||
|
||||
.post-tags {
|
||||
padding: 1rem 0 1rem;
|
||||
padding: 0.3rem 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ pre {
|
|||
padding: 7px;
|
||||
font-size: $code-font-size;
|
||||
font-family: $code-font-family;
|
||||
background: $l-code-background;
|
||||
background: $code-background;
|
||||
|
||||
.dark-theme & {
|
||||
background: $d-code-background;
|
||||
background: $code-background-dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -14,20 +14,20 @@ code {
|
|||
padding: 3px 5px;
|
||||
border-radius: 4px;
|
||||
color: $code-color;
|
||||
background: $l-code-background;
|
||||
background: $code-background;
|
||||
|
||||
.dark-theme & {
|
||||
color: $code-color-dark;
|
||||
background: $d-code-background;
|
||||
background: $code-background-dark;
|
||||
}
|
||||
}
|
||||
|
||||
p > code {
|
||||
background: darken($l-code-background, 3%);
|
||||
background: darken($code-background, 3%);
|
||||
|
||||
.dark-theme & {
|
||||
color: $code-color-dark;
|
||||
background: darken($d-code-background, 3%);
|
||||
background: darken($code-background-dark, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ p > code {
|
|||
overflow-x: auto;
|
||||
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
|
||||
position: relative;
|
||||
background: $l-code-background;
|
||||
background: $code-background;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
|
|
@ -56,11 +56,11 @@ p > code {
|
|||
font-size: $code-font-size;
|
||||
font-weight: bold;
|
||||
color: darken($code-info-color, 10%);
|
||||
background: darken($l-code-background, 3%);
|
||||
background: darken($code-background, 3%);
|
||||
content: 'Code';
|
||||
|
||||
.dark-theme & {
|
||||
background: darken($d-code-background, 3%);
|
||||
background: darken($code-background-dark, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +81,7 @@ p > code {
|
|||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 40px 7px 10px;
|
||||
padding: 38px 7px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ p > code {
|
|||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 40px 10px 10px;
|
||||
padding: 38px 10px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,10 +100,10 @@ p > code {
|
|||
padding: 0;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-color: $l-code-background;
|
||||
border-color: $code-background;
|
||||
|
||||
.dark-theme & {
|
||||
border-color: $d-code-background;
|
||||
border-color: $code-background-dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ p > code {
|
|||
/* GenericTraceback */ .gt { color: #d33682 }
|
||||
|
||||
.dark-theme & {
|
||||
background: $d-code-background;
|
||||
background: $code-background-dark;
|
||||
|
||||
/* Keyword */ .chroma .k { color: #D371E3 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #D371E3 }
|
||||
|
|
|
|||
|
|
@ -35,15 +35,27 @@ $pagination-link-color-dark: #a9a9b3 !default;
|
|||
$pagination-link-active-color: #000 !default;
|
||||
$pagination-link-active-color-dark: #fff !default;
|
||||
|
||||
// Color of the table background.
|
||||
$table-background-color: white !default;
|
||||
$table-background-color-dark: #272C34 !default;
|
||||
|
||||
// Color of the table thead.
|
||||
$table-thead-color: #EDEDED !default;
|
||||
$table-thead-color-dark: #20252B !default;
|
||||
|
||||
// ========== Code ========== //
|
||||
// Color of the code.
|
||||
$code-color: #E74C3C !default;
|
||||
$code-color-dark: #E5BF78 !default;
|
||||
|
||||
// Color of the code background.
|
||||
$code-background: whitesmoke !default;
|
||||
$code-background-dark: #272C34 !default;
|
||||
|
||||
$code-info-color: #cacaca !default;
|
||||
|
||||
// Font size of code.
|
||||
$code-font-size: 14px !default;
|
||||
$code-font-size: 13px !default;
|
||||
|
||||
// Font family of the code.
|
||||
$code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace !default;
|
||||
|
|
@ -94,7 +106,3 @@ $code-type-list: (
|
|||
language-toml: "TOML",
|
||||
language-diff: "Diff"
|
||||
) !default;
|
||||
|
||||
// Color of the code background.
|
||||
$l-code-background: #F8F5EC !default;
|
||||
$d-code-background: #272C34 !default;
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@ jQuery(function($) {
|
|||
});
|
||||
};
|
||||
|
||||
_Blog.toggleTheme = function() {
|
||||
const currentTheme = window.localStorage && window.localStorage.getItem('theme');
|
||||
const isDark = currentTheme === 'dark';
|
||||
_Blog.toggleTheme = function(isDark) {
|
||||
$('body').toggleClass('dark-theme', isDark);
|
||||
$('.theme-switch').on('click', () => {
|
||||
$('body').toggleClass('dark-theme');
|
||||
window.localStorage &&
|
||||
window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', );
|
||||
window.localStorage && window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', );
|
||||
const currentTheme = window.localStorage && window.localStorage.getItem('theme');
|
||||
const isDark = currentTheme === 'dark';
|
||||
this.echarts(isDark);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -42,6 +42,143 @@ jQuery(function($) {
|
|||
}
|
||||
};
|
||||
|
||||
_Blog.responsiveTable = function() {
|
||||
const tables = document.querySelectorAll('.post-content > table');
|
||||
for (let i = 0; i < tables.length; i++) {
|
||||
const table = tables[i];
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'table-wrapper';
|
||||
table.parentElement.replaceChild(wrapper, table);
|
||||
wrapper.appendChild(table);
|
||||
}
|
||||
};
|
||||
|
||||
_Blog._initToc = function() {
|
||||
const SPACING = 20;
|
||||
const $toc = $('.post-toc');
|
||||
|
||||
if ($toc.length) {
|
||||
const startTop = $toc.css("top");
|
||||
const minScrollTop = $toc.offset().top - SPACING;
|
||||
|
||||
const tocState = {
|
||||
start: {
|
||||
'position': 'absolute',
|
||||
'top': startTop,
|
||||
},
|
||||
process: {
|
||||
'position': 'fixed',
|
||||
'top': SPACING,
|
||||
},
|
||||
};
|
||||
|
||||
$(window).scroll(function() {
|
||||
const scrollTop = $(window).scrollTop();
|
||||
|
||||
if (scrollTop < minScrollTop) {
|
||||
$toc.css(tocState.start);
|
||||
} else {
|
||||
$toc.css(tocState.process);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const HEADERFIX = 30;
|
||||
const $toclink = $('.toc-link');
|
||||
const $headerlink = $('.headerlink');
|
||||
const $tocLinkLis = $('.post-toc-content li');
|
||||
|
||||
const headerlinkTop = $.map($headerlink, function(link) {
|
||||
return $(link).offset().top;
|
||||
});
|
||||
|
||||
const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) {
|
||||
return offset - HEADERFIX;
|
||||
});
|
||||
|
||||
const searchActiveTocIndex = function(array, target) {
|
||||
for (let i = 0; i < array.length - 1; i++) {
|
||||
if (target > array[i] && target <= array[i + 1]) return i;
|
||||
}
|
||||
if (target > array[array.length - 1]) return array.length - 1;
|
||||
return 0;
|
||||
};
|
||||
|
||||
const activeIndex = function() {
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop);
|
||||
|
||||
$($toclink).removeClass('active');
|
||||
$($tocLinkLis).removeClass('has-active');
|
||||
|
||||
if (activeTocIndex !== -1) {
|
||||
$($toclink[activeTocIndex]).addClass('active');
|
||||
let ancestor = $toclink[activeTocIndex].parentNode;
|
||||
while (ancestor.tagName !== 'NAV') {
|
||||
$(ancestor).addClass('has-active');
|
||||
ancestor = ancestor.parentNode.parentNode;
|
||||
}
|
||||
}
|
||||
};
|
||||
activeIndex();
|
||||
$(window).scroll(activeIndex);
|
||||
};
|
||||
|
||||
_Blog.toc = function() {
|
||||
const tocContainer = document.getElementById('post-toc');
|
||||
if (tocContainer !== null) {
|
||||
const toc = document.getElementById('TableOfContents');
|
||||
if (toc === null) {
|
||||
// toc = true, but there are no headings
|
||||
tocContainer.parentNode.removeChild(tocContainer);
|
||||
} else {
|
||||
this._refactorToc(toc);
|
||||
this._linkToc();
|
||||
this._initToc();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_Blog._refactorToc = function(toc) {
|
||||
// when headings do not start with `h1`
|
||||
const oldTocList = toc.children[0];
|
||||
let newTocList = oldTocList;
|
||||
let temp;
|
||||
while (newTocList.children.length === 1
|
||||
&& (temp = newTocList.children[0].children[0]).tagName === 'UL') {
|
||||
newTocList = temp;
|
||||
}
|
||||
|
||||
if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
|
||||
};
|
||||
|
||||
_Blog._linkToc = function() {
|
||||
const links = document.querySelectorAll('#TableOfContents a:first-child');
|
||||
for (let i = 0; i < links.length; i++) links[i].className += ' toc-link';
|
||||
|
||||
for (let num = 1; num <= 6; num++) {
|
||||
const headers = document.querySelectorAll('.post-content>h' + num);
|
||||
for (let i = 0; i < headers.length; i++) {
|
||||
const header = headers[i];
|
||||
header.innerHTML = `<a href="#${header.id}" class="headerlink anchor"><i class="iconfont icon-link"></i></a>${header.innerHTML}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_Blog.echarts = function(isDark) {
|
||||
if (window.echartsMap) {
|
||||
for (let i = 0; i < echartsArr.length; i++) {
|
||||
echartsArr[i].dispose();
|
||||
}
|
||||
echartsArr = [];
|
||||
Object.keys(echartsMap).forEach(function(id) {
|
||||
let myChart = echarts.init(document.getElementById(id), isDark ? 'dark' : 'light');
|
||||
myChart.setOption(echartsMap[id]);
|
||||
echartsArr.push(myChart);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_Blog.countdown = function() {
|
||||
if (window.countdownMap) {
|
||||
Object.keys(countdownMap).forEach(function(id) {
|
||||
|
|
@ -81,10 +218,16 @@ jQuery(function($) {
|
|||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
const currentTheme = window.localStorage && window.localStorage.getItem('theme');
|
||||
const isDark = currentTheme === 'dark';
|
||||
|
||||
_Blog.toggleMobileMenu();
|
||||
_Blog.toggleTheme();
|
||||
_Blog.toggleTheme(isDark);
|
||||
_Blog.changeTitle();
|
||||
_Blog.chroma();
|
||||
_Blog.responsiveTable();
|
||||
_Blog.toc();
|
||||
_Blog.echarts(isDark);
|
||||
_Blog.countdown();
|
||||
_Blog.typeit();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,6 +34,9 @@ other = "Theme - "
|
|||
# === partials/footer.html ===
|
||||
|
||||
# === posts/single.html ===
|
||||
[toc]
|
||||
other = "Table of Contents"
|
||||
|
||||
[included]
|
||||
other = "included in"
|
||||
|
||||
|
|
@ -50,10 +53,7 @@ other = "<span class=leancloud-visitors-count></span> pageviews"
|
|||
other = "Author"
|
||||
|
||||
[lastMod]
|
||||
other = "Last Modified"
|
||||
|
||||
[share]
|
||||
other = "Share"
|
||||
other = "This article is updated with %s"
|
||||
|
||||
[license]
|
||||
other = "License"
|
||||
|
|
|
|||
|
|
@ -34,6 +34,9 @@ other = "主题 - "
|
|||
# === partials/footer.html ===
|
||||
|
||||
# === posts/single.html ===
|
||||
[toc]
|
||||
other = "目录"
|
||||
|
||||
[included]
|
||||
other = "收录于"
|
||||
|
||||
|
|
@ -50,10 +53,7 @@ other = "<span class=leancloud-visitors-count></span> 次阅读"
|
|||
other = "作者"
|
||||
|
||||
[lastMod]
|
||||
other = "上次更新"
|
||||
|
||||
[share]
|
||||
other = "内容分享"
|
||||
other = "本文于 %s 更新"
|
||||
|
||||
[license]
|
||||
other = "许可协议"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{ if and .IsPage (ne .Params.comment false) -}}
|
||||
{{ if eq (getenv "HUGO_ENV") "production" | and .IsPage | and (ne .Params.comment false) -}}
|
||||
<!-- Disqus Comment System-->
|
||||
{{- if .Site.DisqusShortname -}}
|
||||
<div id="disqus_thread"></div>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,15 @@
|
|||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
|
||||
` }}
|
||||
<!-- mermaid https://github.com/knsv/mermaid -->
|
||||
{{ $diagram := `
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.2.3/dist/mermaid.min.js" integrity="sha256-4s3fF5e1iWRLtiV7mRev7n17oALqqDHbWrNqF3/r7jU=" crossorigin="anonymous"></script>
|
||||
<script>mermaid.initialize({startOnLoad: true, theme: null,});</script>
|
||||
` }}
|
||||
<!-- ECharts https://github.com/apache/incubator-echarts -->
|
||||
{{ $echarts := `
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js" integrity="sha256-XNiBJGZuErA+MsbKwxuTqNMimobZMsVS79SkTUroRz4=" crossorigin="anonymous"></script>
|
||||
` }}
|
||||
<!-- TypeIt https://github.com/alexmacarthur/typeit -->
|
||||
{{ $typeit := `
|
||||
<script src="https://cdn.jsdelivr.net/npm/typeit@6.0.3/dist/typeit.min.js" integrity="sha256-jl1b2Wp4cXCUyX8FxPZ8Z0PPIPV3QYNb/jPSLGDej2c=" crossorigin="anonymous"></script>
|
||||
|
|
@ -35,12 +44,34 @@
|
|||
|
||||
{{ if .IsPage }}
|
||||
{{ $lazysizes | safeHTML }}
|
||||
{{ if .Scratch.Get "music" }}
|
||||
{{ $metingjs | safeHTML }}
|
||||
|
||||
{{ if .Scratch.Get "diagram" }}
|
||||
{{ $diagram | safeHTML }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Scratch.Get "echartsMap" }}
|
||||
{{ $echarts | safeHTML }}
|
||||
{{ $echartsMap := . }}
|
||||
<script>var echartsMap = {
|
||||
{{ range $key, $var := $echartsMap }}
|
||||
{{ $key }}: {{ $var | safeJS }},
|
||||
{{ end }}
|
||||
};var echartsArr=[];</script>
|
||||
{{ end }}
|
||||
|
||||
{{ if or .Params.math .Site.Params.math }}
|
||||
{{ $katex | safeHTML }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Scratch.Get "music" }}
|
||||
{{ $metingjs | safeHTML }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .Scratch.Get "countdownMap" }}
|
||||
{{ $countdown | safeHTML }}
|
||||
<script>var countdownMap = {{ . | jsonify | safeJS }};</script>
|
||||
{{ end }}
|
||||
|
||||
{{ $scripts = $scripts | append $dynamicToTop }}
|
||||
{{ $scripts = $scripts | resources.Concat "/js/vendor_post.js" | resources.Minify }}
|
||||
{{ else }}
|
||||
|
|
@ -56,10 +87,6 @@
|
|||
{{ end }}
|
||||
<script>var typeitArr = {{ $typeitArr | jsonify | safeJS }};</script>
|
||||
{{ end }}
|
||||
{{ with .Scratch.Get "countdownMap" }}
|
||||
{{ $countdown | safeHTML }}
|
||||
<script>var countdownMap = {{ . | jsonify | safeJS }};</script>
|
||||
{{ end }}
|
||||
|
||||
<script src="{{ $scripts.RelPermalink }}" async=""></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,33 +22,39 @@
|
|||
{{ range . }}
|
||||
{{- $name := . -}}
|
||||
{{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
|
||||
<i class="far fa-folder"></i>
|
||||
<a href="{{ .Permalink }}">{{ $name }}</a>
|
||||
<i class="far fa-folder"></i> <a href="{{ .Permalink }}">{{ $name }}</a>
|
||||
{{ end -}}
|
||||
{{ end }}
|
||||
</span>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
<div class="post-meta-other">
|
||||
<i class="far fa-calendar-alt"></i>
|
||||
<span class="post-time"><time datetime={{ $publish_date }}>{{ $publish_date }}</time></span>
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
{{ T "wordCount" .WordCount }}
|
||||
<i class="far fa-clock"></i>
|
||||
{{ T "readingTime" .ReadingTime }}
|
||||
{{ if and .Site.Params.valine.enable .Site.Params.valine.visitor }}
|
||||
<span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
|
||||
<i class="far fa-eye"></i>
|
||||
{{ T "pageviews" | safeHTML }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span class="post-time"><i class="far fa-calendar-alt"></i> <time datetime={{ $publish_date }}>{{ $publish_date }}</time> </span>
|
||||
<i class="fas fa-pencil-alt"></i> {{ T "wordCount" .WordCount }}
|
||||
<i class="far fa-clock"></i> {{ T "readingTime" .ReadingTime }}
|
||||
{{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.valine.enable | and .Site.Params.valine.visitor -}}
|
||||
<span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
|
||||
<i class="far fa-eye"></i> {{ T "pageviews" | safeHTML }}
|
||||
</span>
|
||||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
|
||||
<div class="post-toc" id="post-toc">
|
||||
<h2 class="post-toc-title">{{ T "toc" }}</h2>
|
||||
{{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }}
|
||||
<div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
|
||||
{{.TableOfContents}}
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
<div class="post-content">
|
||||
<!--featured_image-->
|
||||
{{ with .Params.featured_image }}
|
||||
<img src="{{ . }}" class="featured_image">
|
||||
<img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
|
||||
{{ end }}
|
||||
<!-- end featured_image-->
|
||||
|
||||
|
|
@ -60,45 +66,39 @@
|
|||
{{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
|
||||
{{ $finalContent }}
|
||||
</div>
|
||||
|
||||
<div class="post-info">
|
||||
<p class="post-info-item">
|
||||
<span>{{ T "lastMod" }}:</span>
|
||||
<span>{{ $modify_date }}</span>
|
||||
</p>
|
||||
|
||||
<p class="post-info-item">
|
||||
{{ if and ( $.Param "socialShare" ) (gt (len ($.Param "share")) 0) }}
|
||||
<span>{{ T "share" }}:</span>
|
||||
<span>{{ partial "post/share-links.html" . }}</span>
|
||||
{{ end }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="post-tags">
|
||||
<section>
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<span class="tag">
|
||||
<i class="fas fa-tag"></i><a href="{{ "tags/" | absURL }}{{ . | urlize }}/"> {{.}} </a>
|
||||
</span>
|
||||
<div class="post-footer">
|
||||
<div class="post-info">
|
||||
<div class="post-info-mod"><span>{{ printf (T "lastMod") $modify_date }}</span></div>
|
||||
<div class="post-info-share">
|
||||
{{ if and ( $.Param "socialShare" ) (gt (len ($.Param "share")) 0) }}
|
||||
<span>{{ partial "post/share-links.html" . }}</span>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
<section>
|
||||
<span><a href="javascript:window.history.back();">{{ T "back" }}</a></span>
|
||||
|
|
||||
<span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-nav">
|
||||
{{ if .PrevInSection }}
|
||||
<a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="fas fa-angle-left"></i> {{ .PrevInSection.Title}}</a>
|
||||
{{ end }}
|
||||
{{ if .NextInSection }}
|
||||
<a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}} <i class="fas fa-angle-right"></i></a>
|
||||
{{ end }}
|
||||
<div class="post-tags">
|
||||
<section>
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<span class="tag">
|
||||
<i class="fas fa-tag"></i><a href="{{ "tags/" | absURL }}{{ . | urlize }}/"> {{.}} </a>
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
<section>
|
||||
<span><a href="javascript:window.history.back();">{{ T "back" }}</a></span> | <span><a href="{{ .Site.BaseURL }}">{{ T "home" }}</a></span>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="post-nav">
|
||||
{{ if .PrevInSection }}
|
||||
<a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="fas fa-angle-left"></i> {{ .PrevInSection.Title}}</a>
|
||||
{{ end }}
|
||||
{{ if .NextInSection }}
|
||||
<a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}} <i class="fas fa-angle-right"></i></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-comment">
|
||||
|
|
|
|||
7
layouts/shortcodes/bilibili.html
Normal file
7
layouts/shortcodes/bilibili.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<div class="bilibili">
|
||||
{{- if .IsNamedParams -}}
|
||||
<iframe src="//player.bilibili.com/player.html?aid={{ .Get "aid" }}&cid={{ .Get "cid" }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
|
||||
{{- else -}}
|
||||
<iframe src="//player.bilibili.com/player.html?aid={{ .Get 0 }}&cid={{ .Get 1 }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
|
||||
{{- end -}}
|
||||
</div>
|
||||
5
layouts/shortcodes/diagram.html
Normal file
5
layouts/shortcodes/diagram.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{{ $_hugo_config := `{ "version": 1 }` -}}
|
||||
{{ .Page.Scratch.Set "diagram" "true" }}
|
||||
<div class="mermaid">
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
14
layouts/shortcodes/echarts.html
Normal file
14
layouts/shortcodes/echarts.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!-- shuffle md5 as id -->
|
||||
{{ $id := delimit (split (md5 .Inner) "" | shuffle) "" | printf "ec-%s" -}}
|
||||
{{ $echartsMap := .Page.Scratch.Get "echartsMap" -}}
|
||||
{{ if $echartsMap -}}
|
||||
{{ $echartsMap = dict $id .Inner | merge $echartsMap -}}
|
||||
{{ else -}}
|
||||
{{ $echartsMap = dict $id .Inner -}}
|
||||
{{ end -}}
|
||||
{{ .Page.Scratch.Set "echartsMap" $echartsMap -}}
|
||||
{{ if .IsNamedParams }}
|
||||
<div class="echarts" id="{{ $id }}" style="width: {{ .Get "width" }}; height: {{ .Get "height" }};"></div>
|
||||
{{ else }}
|
||||
<div class="echarts" id="{{ $id }}" style="width: {{ .Get 0 }}; height: {{ .Get 1 }};"></div>
|
||||
{{ end }}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{{ .Page.Scratch.Set "music" "true" }}
|
||||
{{ .Page.Scratch.Set "music" "true" -}}
|
||||
{{ if .IsNamedParams }}
|
||||
<meting-js server={{ .Get "server" }} type={{ .Get "type" }} id={{ .Get "id" }}
|
||||
{{ with .Get "autoplay" }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue