mirror of
https://github.com/dillonzq/LoveIt.git
synced 2025-01-11 12:41:39 +01:00
feat(code): add support for code block folding (#259)
This commit is contained in:
Dillon
GitHub
parent
41a92c6166
commit
bcbc4268ea
32 changed files with 351 additions and 270 deletions
|
|
@ -50,4 +50,5 @@ a {
|
|||
@include link(true, true);
|
||||
|
||||
@import "../_partial/icon";
|
||||
@import "../_partial/details";
|
||||
@import "../_partial/fixed-button";
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@media only screen and (max-width: 1440px) {
|
||||
.page {
|
||||
max-width: 56%;
|
||||
width: 56%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.page {
|
||||
max-width: 52%;
|
||||
width: 52%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.page {
|
||||
max-width: 80%;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
|
||||
.page {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
padding-top: $page-padding-top-mobile;
|
||||
|
||||
.categories-card {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 60%;
|
||||
max-width: 800px;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
padding-top: $page-padding-top-desktop;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
.single-title {
|
||||
margin: 1rem 0 .5rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
}
|
||||
|
||||
.featured-image {
|
||||
margin: .5rem 0;
|
||||
margin: .5rem 0 1rem 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
|
|
@ -194,10 +195,10 @@
|
|||
|
||||
th, td {
|
||||
padding: .3rem 1rem;
|
||||
border: 1px double $global-border-color;
|
||||
border: 1px solid darken($table-thead-color, 2%);
|
||||
|
||||
.dark & {
|
||||
border: 1px double $global-border-color-dark;
|
||||
border-color: darken($table-thead-color-dark, 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
33
assets/css/_partial/_details.scss
Normal file
33
assets/css/_partial/_details.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.details {
|
||||
.details-summary {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
i.details-icon {
|
||||
color: $global-font-secondary-color;
|
||||
@include transition(transform 0.2s ease);
|
||||
|
||||
.dark & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.details-content {
|
||||
max-height: 0;
|
||||
overflow-y: hidden;
|
||||
@include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
|
||||
}
|
||||
|
||||
&.open {
|
||||
i.details-icon {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
|
||||
.details-content {
|
||||
max-height: $MAX_LENGTH;
|
||||
@include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
padding: .6rem .6rem;
|
||||
color: $global-font-secondary-color;
|
||||
background: $header-background-color;
|
||||
border: 1px solid darken($global-border-color, 10%);
|
||||
@include border-radius(2rem);
|
||||
|
||||
@include blur;
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
.dark & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
background: $header-background-color-dark;
|
||||
border-color: darken($global-border-color-dark, 10%);
|
||||
|
||||
&:hover, &:active {
|
||||
color: $global-font-color-dark;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ header {
|
|||
width: 100%;
|
||||
z-index: 150;
|
||||
background-color: $header-background-color;
|
||||
@include box-shadow(0px 1px 4px rgba(0, 0, 0, .1));
|
||||
|
||||
.dark & {
|
||||
background-color: $header-background-color-dark;
|
||||
|
|
@ -65,7 +64,7 @@ header {
|
|||
outline: none;
|
||||
background-color: $header-background-color;
|
||||
vertical-align: baseline !important;
|
||||
@include transition(width 0.3s ease 0s);
|
||||
@include transition(width 0.3s ease);
|
||||
|
||||
.dark & {
|
||||
background-color: $header-background-color-dark;
|
||||
|
|
@ -208,7 +207,7 @@ header {
|
|||
.header-wrapper {
|
||||
padding: 0 1rem;
|
||||
font-size: 1.125rem;
|
||||
@include transition(margin-top 0.3s ease 0s);
|
||||
@include transition(margin-top 0.3s ease);
|
||||
|
||||
.header-title {
|
||||
font-size: $header-title-font-size;
|
||||
|
|
@ -218,7 +217,7 @@ header {
|
|||
.menu-toggle {
|
||||
line-height: 4rem;
|
||||
cursor: pointer;
|
||||
@include transition(width 0.3s ease 0s);
|
||||
@include transition(width 0.3s ease);
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -9,23 +9,32 @@
|
|||
.admonition-title {
|
||||
margin: 0 -0.75rem;
|
||||
padding: .2rem .75rem .2rem 1.8rem;
|
||||
border-bottom: .05rem solid map-get($admonition-background-color-map, 'note');
|
||||
border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
|
||||
background-color: map-get($admonition-background-color-map, 'note');
|
||||
}
|
||||
|
||||
.details-summary.admonition-title:hover {
|
||||
background-color: darken(map-get($admonition-background-color-map, 'note'), 6%);
|
||||
}
|
||||
|
||||
.admonition-content {
|
||||
margin: .5rem 0;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
i.icon {
|
||||
font-size: 0.85rem;
|
||||
color: map-get($admonition-color-map, 'note');
|
||||
cursor: auto;
|
||||
position: absolute;
|
||||
left: .6rem;
|
||||
top: .6rem;
|
||||
}
|
||||
|
||||
i.details-icon {
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
}
|
||||
|
||||
@each $type, $color in $admonition-color-map {
|
||||
&.#{$type} {
|
||||
border-left-color: $color;
|
||||
|
|
@ -44,6 +53,10 @@
|
|||
border-bottom-color: $color;
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
.details-summary.admonition-title:hover {
|
||||
background-color: darken($color, 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,32 +64,3 @@
|
|||
margin-bottom: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
details.admonition {
|
||||
summary {
|
||||
display: block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.details {
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
color: $global-font-color;
|
||||
|
||||
.dark & {
|
||||
color: $global-font-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details.admonition[open] {
|
||||
i.details {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,27 @@
|
|||
code {
|
||||
display:inline-block;
|
||||
font-size: $code-font-size;
|
||||
font-family: $code-font-family;
|
||||
color: $code-color;
|
||||
|
||||
img {
|
||||
min-height: 1.25em;
|
||||
max-height: 1.25em;
|
||||
}
|
||||
padding: 0 .4rem;
|
||||
|
||||
.dark & {
|
||||
color: $code-color-dark;
|
||||
}
|
||||
|
||||
&:not(.block) {
|
||||
padding: .2rem .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: .25rem 0 .25rem .5rem;
|
||||
@include tab-size(4);
|
||||
|
||||
.copy-button {
|
||||
font-size: $code-font-size;
|
||||
line-height: 1.4em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .3rem .5rem;
|
||||
color: $code-info-color;
|
||||
background: darken($code-background-color, 3%);
|
||||
|
||||
.dark & {
|
||||
color: $code-info-color-dark;
|
||||
background: darken($code-background-color-dark, 3%);
|
||||
}
|
||||
code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.copy-button:hover, .copy-button:focus {
|
||||
cursor: pointer;
|
||||
color: $global-link-hover-color;
|
||||
|
||||
.dark & {
|
||||
color: $global-link-hover-color-dark;
|
||||
}
|
||||
img {
|
||||
min-height: 1.25em;
|
||||
max-height: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,41 +33,62 @@ code, pre, .highlight table, .highlight tr, .highlight td {
|
|||
}
|
||||
}
|
||||
|
||||
.highlight > .chroma, .gist {
|
||||
table, tr, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none !important;
|
||||
white-space: nowrap;
|
||||
.highlight, .gist {
|
||||
font-family: $code-font-family;
|
||||
font-size: $code-font-size;
|
||||
|
||||
.table-wrapper {
|
||||
> table,
|
||||
> table thead,
|
||||
> table tr,
|
||||
> table td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight > .chroma {
|
||||
position: relative;
|
||||
line-height: 1.4em;
|
||||
margin: .5rem 0;
|
||||
|
||||
pre {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
padding: .3rem .4rem;
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-family: $global-font-family;
|
||||
font-weight: bold;
|
||||
color: $code-info-color;
|
||||
background: darken($code-background-color, 3%);
|
||||
content: 'Code';
|
||||
background: darken($code-background-color, 8%);
|
||||
|
||||
.dark & {
|
||||
color: $code-info-color-dark;
|
||||
background: darken($code-background-color-dark, 3%);
|
||||
background: darken($code-background-color-dark, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $text in $code-type-map {
|
||||
&.#{$type}::before {
|
||||
content: $text;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
width: 100%;
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.code-title::after {
|
||||
padding-left: .2rem;
|
||||
content: 'Code';
|
||||
}
|
||||
|
||||
@each $type, $text in $code-type-map {
|
||||
&.#{$type} .code-title::after {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -124,12 +121,62 @@ code, pre, .highlight table, .highlight tr, .highlight td {
|
|||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
font-family: $code-font-family;
|
||||
font-size: $code-font-size;
|
||||
line-height: 1.4em;
|
||||
.arrow {
|
||||
@include transition(transform 0.2s ease);
|
||||
}
|
||||
|
||||
.ellipses {
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: none;
|
||||
padding: .4rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $global-link-hover-color;
|
||||
|
||||
.dark & {
|
||||
color: $global-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
max-height: 0;
|
||||
overflow-y: hidden;
|
||||
@include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
|
||||
}
|
||||
|
||||
&.open {
|
||||
.code-header {
|
||||
background: darken($code-background-color, 3%);
|
||||
|
||||
.dark & {
|
||||
background: darken($code-background-color-dark, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
max-height: $MAX_LENGTH;
|
||||
@include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
|
||||
.ellipses {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Comment */ .c,
|
||||
/* CommentHashbang */ .ch,
|
||||
/* CommentMultiline */ .cm,
|
||||
|
|
|
|||
|
|
@ -1,38 +1,16 @@
|
|||
#toc-auto {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1000px;
|
||||
padding: 0 .8rem;
|
||||
border-left: 1px solid $global-border-color;
|
||||
overflow-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
top: if($header-normal-mode-desktop, 5rem, 10rem);
|
||||
left: 10000px;
|
||||
|
||||
@include blur;
|
||||
|
||||
.dark & {
|
||||
border-left: 1px solid $global-border-color-dark;
|
||||
}
|
||||
|
||||
.toc {
|
||||
.toc-title {
|
||||
font-weight: 400;
|
||||
margin: .8rem 0;
|
||||
font-size: $toc-title-font-size;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
&.always-active ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
>nav>ul {
|
||||
margin: .625rem 0;
|
||||
}
|
||||
font-size: $toc-content-font-size;
|
||||
|
||||
ul {
|
||||
text-indent: -0.85rem;
|
||||
padding-left: .625rem;
|
||||
padding-left: .8rem;
|
||||
list-style: none;
|
||||
|
||||
a::before {
|
||||
|
|
@ -47,7 +25,60 @@
|
|||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ruby {
|
||||
background: $code-background-color;
|
||||
|
||||
rt {
|
||||
color: $global-font-secondary-color;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
background: $code-background-color-dark;
|
||||
|
||||
rt {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toc-auto {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: $MAX_LENGTH;
|
||||
padding: 0 .8rem;
|
||||
border-left: 4px solid $global-border-color;
|
||||
overflow-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
top: if($header-normal-mode-desktop, 5rem, 10rem);
|
||||
left: $MAX_LENGTH;
|
||||
|
||||
@include blur;
|
||||
|
||||
.dark & {
|
||||
border-left: 1px solid $global-border-color-dark;
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
margin: .8rem 0;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
&.always-active ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> nav > ul {
|
||||
margin: .625rem 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -79,41 +110,23 @@
|
|||
display: none;
|
||||
margin: .8rem 0;
|
||||
|
||||
details {
|
||||
summary {
|
||||
list-style: none;
|
||||
background: darken($code-background-color, 3%);
|
||||
.toc-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 2em;
|
||||
padding: 0 .75rem;
|
||||
background: darken($code-background-color, 3%);
|
||||
|
||||
.dark & {
|
||||
background: darken($code-background-color-dark, 3%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($code-background-color, 6%);
|
||||
|
||||
.dark & {
|
||||
background: darken($code-background-color-dark, 3%);
|
||||
background: darken($code-background-color-dark, 5%);
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
line-height: 2em;
|
||||
padding: 0 .625rem;
|
||||
|
||||
i.details {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details[open] {
|
||||
i.details {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -122,15 +135,7 @@
|
|||
|
||||
> nav > ul {
|
||||
margin: 0;
|
||||
padding: .4rem .8rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
padding: .4rem 1rem .4rem 1.8rem;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
|
|
@ -138,29 +143,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toc {
|
||||
.toc-title {
|
||||
font-size: $toc-title-font-size;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
font-size: $toc-content-font-size;
|
||||
}
|
||||
|
||||
ruby {
|
||||
background: $code-background-color;
|
||||
|
||||
rt {
|
||||
color: $global-font-secondary-color;
|
||||
}
|
||||
|
||||
.dark & {
|
||||
background: $code-background-color-dark;
|
||||
|
||||
rt {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ $code-color-dark: #E5BF78 !default;
|
|||
$code-background-color: #f5f5f5 !default;
|
||||
$code-background-color-dark: #272C34 !default;
|
||||
|
||||
$code-info-color: #b1b0b0 !default;
|
||||
$code-info-color: #acabab !default;
|
||||
$code-info-color-dark: #b1b0b0 !default;
|
||||
|
||||
// Font size of the code
|
||||
|
|
@ -370,3 +370,5 @@ $admonition-background-color-map: (
|
|||
'quote': hsla(0,0%,62%,.1),
|
||||
) !default;
|
||||
// ========== Admonition ========== //
|
||||
|
||||
$MAX_LENGTH: 9999px;
|
||||
|
|
|
|||
2
assets/js/theme.min.js
vendored
2
assets/js/theme.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -678,6 +678,9 @@ enableEmoji = true
|
|||
# whether to show the copy button of the code block
|
||||
# 是否显示代码块的复制按钮
|
||||
copy = true
|
||||
# the maximum number of lines of displayed code by default
|
||||
# 默认展开显示的代码行数
|
||||
maxShownLines = 10
|
||||
# KaTeX mathematical formulas config (KaTeX https://katex.org/)
|
||||
# KaTeX 数学公式配置 (KaTeX https://katex.org/)
|
||||
[params.page.math]
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ John Gruber, the author of Markdown, puts it like this:
|
|||
> While Markdown’s syntax has been influenced by several existing text-to-HTML filters,
|
||||
> the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
|
||||
>
|
||||
> -- _John Gruber_
|
||||
> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
|
||||
|
||||
Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ John Gruber, the author of Markdown, puts it like this:
|
|||
> While Markdown’s syntax has been influenced by several existing text-to-HTML filters,
|
||||
> the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
|
||||
>
|
||||
> -- _John Gruber_
|
||||
> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
|
||||
|
||||
Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ John Gruber, Markdown 的作者如是说:
|
|||
> 虽然 Markdown 的语法受到几种现有的文本到 HTML 转换工具的影响,
|
||||
> 但 Markdown 语法的最大灵感来源是纯文本电子邮件的格式.
|
||||
>
|
||||
> -- _John Gruber_
|
||||
> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
|
||||
|
||||
话不多说, 我们来回顾一下 Markdown 的主要语法以及生成的 HTML 样式!
|
||||
|
||||
|
|
|
|||
|
|
@ -393,6 +393,8 @@ Note that some of these parameters are explained in details in other sections of
|
|||
[params.page.code]
|
||||
# whether to show the copy button of the code block
|
||||
copy = true
|
||||
# the maximum number of lines of displayed code by default
|
||||
maxShownLines = 10
|
||||
# {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
|
||||
[params.page.mapbox]
|
||||
# access token of Mapbox GL JS
|
||||
|
|
|
|||
|
|
@ -398,6 +398,8 @@ Note that some of these parameters are explained in details in other sections of
|
|||
[params.page.code]
|
||||
# whether to show the copy button of the code block
|
||||
copy = true
|
||||
# the maximum number of lines of displayed code by default
|
||||
maxShownLines = 10
|
||||
# {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config
|
||||
[params.page.mapbox]
|
||||
# access token of Mapbox GL JS
|
||||
|
|
|
|||
|
|
@ -383,6 +383,8 @@ hugo
|
|||
[params.page.code]
|
||||
# 是否显示代码块的复制按钮
|
||||
copy = true
|
||||
# 默认展开显示的代码行数
|
||||
maxShownLines = 10
|
||||
# {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} 数学公式
|
||||
[params.page.math]
|
||||
enable = true
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ math:
|
|||
**Hugo** 允许你在文章内容前面添加 `yaml`, `toml` 或者 `json` 格式的前置参数.
|
||||
|
||||
{{< admonition >}}
|
||||
**不是所有**的上述前置参数都必须在你的每篇文章中设置.
|
||||
**不是所有**的以下前置参数都必须在你的每篇文章中设置.
|
||||
只有在文章的参数和你的 [网站设置](../theme-documentation-basics/#site-configuration) 中的 `page` 部分不一致时才有必要这么做.
|
||||
{{< /admonition >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ The `style` shortcode has two positional parameters.
|
|||
|
||||
The **first** one is the custom style content.
|
||||
|
||||
And the **second** one is the HTML tag around the content you want to change style, and whose default value is `p`.
|
||||
And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
|
||||
|
||||
Example `style` input:
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ The `style` shortcode has two positional parameters.
|
|||
|
||||
The **first** one is the custom style content.
|
||||
|
||||
And the **second** one is the HTML tag around the content you want to change style, and whose default value is `p`.
|
||||
And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
|
||||
|
||||
Example `style` input:
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ mapbox:
|
|||
|
||||
第一个参数是自定义样式的内容.
|
||||
|
||||
第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `p`.
|
||||
第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `div`.
|
||||
|
||||
一个 `style` 示例:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{{- define "title" }}
|
||||
{{- .Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
|
||||
{{- .Params.Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "content" -}}
|
||||
<div class="page archive">
|
||||
{{- /* Title */ -}}
|
||||
<h2 class="single-title animated pulse faster">
|
||||
{{- .Title | default (T .Section) | default .Section | printf (T "allSome") -}}
|
||||
{{- .Params.Title | default (T .Section) | default .Section | printf (T "allSome") -}}
|
||||
</h2>
|
||||
|
||||
{{- /* Paginate */ -}}
|
||||
|
|
|
|||
|
|
@ -52,11 +52,14 @@
|
|||
{{- $config = dict "lightGallery" $lightGalleryConfig | merge $config -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $code := $params.code | default dict -}}
|
||||
{{- $config = cond (ne $code.maxShownLines nil) $code.maxShownLines 10 | dict "maxShownLines" | dict "code" | merge $config -}}
|
||||
|
||||
{{- /* clipboard.js */ -}}
|
||||
{{- if not $params.code | or (ne $params.code false) -}}
|
||||
{{- if ne $code.copy false -}}
|
||||
{{- $source := $cdn.clipboardJS | default "lib/clipboard/clipboard.min.js" -}}
|
||||
{{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
|
||||
{{- $config = T "copyToClipboard" | dict "title" | dict "clipboard" | merge $config -}}
|
||||
{{- $config = T "copyToClipboard" | dict "copyTitle" | dict "code" | merge $config -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Sharer.js */ -}}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
|
||||
<channel>
|
||||
<title>
|
||||
{{- .Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
|
||||
{{- .Params.Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
|
||||
</title>
|
||||
<link>
|
||||
{{- .Permalink -}}
|
||||
</link>
|
||||
<description>
|
||||
{{- .Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
|
||||
{{- .Params.Title | default (T .Section) | default .Section | printf (T "allSome") }} | {{ .Site.Title -}}
|
||||
</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
{{- with .Site.LanguageCode -}}
|
||||
|
|
|
|||
|
|
@ -67,21 +67,17 @@
|
|||
|
||||
{{- /* Static TOC */ -}}
|
||||
{{- if $params.toc.enable -}}
|
||||
<div class="toc" id="toc-static">
|
||||
<details>
|
||||
<summary>
|
||||
<div class="toc-title">
|
||||
<span>{{ T "contents" }}</span>
|
||||
<span><i class="details icon fas fa-angle-down"></i></span>
|
||||
</div>
|
||||
</summary>
|
||||
<div class="toc-content" id="toc-content-static">
|
||||
{{- $toc := .TableOfContents -}}
|
||||
{{- $toc = partial "function/fontawesome.html" $toc -}}
|
||||
{{- $toc = partial "function/ruby.html" $toc -}}
|
||||
{{- $toc | safeHTML -}}
|
||||
</div>
|
||||
</details>
|
||||
<div class="details toc" id="toc-static">
|
||||
<div class="details-summary toc-title">
|
||||
<span>{{ T "contents" }}</span>
|
||||
<span><i class="details-icon fas fa-angle-down"></i></span>
|
||||
</div>
|
||||
<div class="details-content toc-content" id="toc-content-static">
|
||||
{{- $toc := .TableOfContents -}}
|
||||
{{- $toc = partial "function/fontawesome.html" $toc -}}
|
||||
{{- $toc = partial "function/ruby.html" $toc -}}
|
||||
{{- $toc | safeHTML -}}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,18 +16,20 @@
|
|||
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- $type := .Get "type" | default "note" -}}
|
||||
{{- if .Get "details" -}}
|
||||
<details class="admonition {{ $type }}">
|
||||
<summary class="admonition-title">
|
||||
<i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details {{ $iconDetails }}"></i>
|
||||
</summary>
|
||||
<div class="admonition-content">
|
||||
{{- $inner -}}
|
||||
{{- if .Get "details" -}}
|
||||
<div class="details admonition {{ $type }}">
|
||||
<div class="details-summary admonition-title">
|
||||
<i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
|
||||
</div>
|
||||
</details>
|
||||
<div class="details-content">
|
||||
<div class="admonition-content">
|
||||
{{- $inner -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- else -}}
|
||||
<div class="admonition {{ $type }}">
|
||||
<p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}</p>
|
||||
<div class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}</div>
|
||||
<div class="admonition-content">
|
||||
{{- $inner -}}
|
||||
</div>
|
||||
|
|
@ -36,17 +38,19 @@
|
|||
{{- else -}}
|
||||
{{- $type := .Get 0 | default "note" -}}
|
||||
{{- if .Get 2 -}}
|
||||
<details class="admonition {{ $type }}">
|
||||
<summary class="admonition-title">
|
||||
<i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details {{ $iconDetails }}"></i>
|
||||
</summary>
|
||||
<div class="admonition-content">
|
||||
{{- $inner -}}
|
||||
<div class="details admonition {{ $type }}">
|
||||
<div class="details-summary admonition-title">
|
||||
<i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details-icon {{ $iconDetails }}"></i>
|
||||
</div>
|
||||
</details>
|
||||
<div class="details-content">
|
||||
<div class="admonition-content">
|
||||
{{- $inner -}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- else -}}
|
||||
<div class="admonition {{ $type }}">
|
||||
<p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}</p>
|
||||
<div class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}</div>
|
||||
<div class="admonition-content">
|
||||
{{- $inner -}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
|
||||
<channel>
|
||||
<title>
|
||||
{{- .Title }} | {{ T .Data.Singular | default .Data.Singular }} | {{ .Site.Title -}}
|
||||
{{- .Params.Title }} | {{ T .Data.Singular | default .Data.Singular }} | {{ .Site.Title -}}
|
||||
</title>
|
||||
<link>
|
||||
{{- .Permalink -}}
|
||||
</link>
|
||||
<description>
|
||||
{{- .Title }} | {{ T .Data.Singular | default .Data.Singular }} | {{ .Site.Title -}}
|
||||
{{- .Params.Title }} | {{ T .Data.Singular | default .Data.Singular }} | {{ .Site.Title -}}
|
||||
</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
{{- with .Site.LanguageCode -}}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -287,19 +287,20 @@ class Theme {
|
|||
} else initAutosearch();
|
||||
}
|
||||
|
||||
initDetails() {
|
||||
this.util.forEach(document.getElementsByClassName('details'), $details => {
|
||||
const $summary = $details.getElementsByClassName('details-summary')[0];
|
||||
$summary.addEventListener('click', () => {
|
||||
$details.classList.toggle('open');
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
|
||||
initLightGallery() {
|
||||
if (this.config.lightGallery) lightGallery(document.getElementById('content'), this.config.lightGallery);
|
||||
}
|
||||
|
||||
initHighlight() {
|
||||
this.util.forEach(document.querySelectorAll('.highlight > .chroma'), $chroma => {
|
||||
const $elements = $chroma.querySelectorAll('pre.chroma > code');
|
||||
if ($elements.length) {
|
||||
$chroma.className += ' ' + $elements[$elements.length - 1].className.toLowerCase();
|
||||
$elements[0].classList.add('lnc');
|
||||
$elements[$elements.length - 1].classList.remove('lnc');
|
||||
}
|
||||
});
|
||||
this.util.forEach(document.querySelectorAll('.highlight > pre.chroma'), $preChroma => {
|
||||
const $chroma = document.createElement('div');
|
||||
$chroma.className = $preChroma.className;
|
||||
|
|
@ -314,19 +315,42 @@ class Theme {
|
|||
$preChroma.parentElement.replaceChild($chroma, $preChroma);
|
||||
$td.appendChild($preChroma);
|
||||
});
|
||||
this.util.forEach(document.querySelectorAll('pre > code'), $code => {
|
||||
$code.classList.add('block');
|
||||
if ($code.classList.contains('lnc') || !this.config.clipboard) return;
|
||||
const $button = document.createElement('div');
|
||||
$button.classList.add('copy-button');
|
||||
$button.insertAdjacentHTML('afterbegin', '<i class="far fa-copy fa-fw"></i>');
|
||||
$button.setAttribute('data-clipboard-text', $code.innerText);
|
||||
$button.title = this.config.clipboard.title;
|
||||
const clipboard = new ClipboardJS($button);
|
||||
clipboard.on('success', e => {
|
||||
this.util.animateCSS($code, 'flash');
|
||||
});
|
||||
$code.after($button);
|
||||
this.util.forEach(document.querySelectorAll('.highlight > .chroma'), $chroma => {
|
||||
const $codeElements = $chroma.querySelectorAll('pre.chroma > code');
|
||||
if ($codeElements.length) {
|
||||
const $code = $codeElements[$codeElements.length - 1];
|
||||
const $header = document.createElement('div');
|
||||
$header.className = 'code-header ' + $code.className.toLowerCase();
|
||||
const $title = document.createElement('span');
|
||||
$title.classList.add('code-title');
|
||||
$title.insertAdjacentHTML('afterbegin', '<i class="arrow fas fa-chevron-right fa-fw"></i>');
|
||||
$title.addEventListener('click', () => {
|
||||
$chroma.classList.toggle('open');
|
||||
}, false);
|
||||
$header.appendChild($title);
|
||||
const $ellipses = document.createElement('span');
|
||||
$ellipses.insertAdjacentHTML('afterbegin', '<i class="fas fa-ellipsis-h fa-fw"></i>');
|
||||
$ellipses.classList.add('ellipses');
|
||||
$ellipses.addEventListener('click', () => {
|
||||
$chroma.classList.add('open');
|
||||
}, false);
|
||||
$header.appendChild($ellipses);
|
||||
const $copy = document.createElement('span');
|
||||
$copy.insertAdjacentHTML('afterbegin', '<i class="far fa-copy fa-fw"></i>');
|
||||
$copy.classList.add('copy');
|
||||
const code = $code.innerText;
|
||||
if (this.config.code.maxShownLines < 0 || code.split('\n').length < this.config.code.maxShownLines + 2) $chroma.classList.add('open');
|
||||
if (this.config.code.copyTitle) {
|
||||
$copy.setAttribute('data-clipboard-text', code);
|
||||
$copy.title = this.config.code.copyTitle;
|
||||
const clipboard = new ClipboardJS($copy);
|
||||
clipboard.on('success', e => {
|
||||
this.util.animateCSS($code, 'flash');
|
||||
});
|
||||
$header.appendChild($copy);
|
||||
}
|
||||
$chroma.insertBefore($header, $chroma.firstChild);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -618,6 +642,7 @@ class Theme {
|
|||
this.initMenuMobile();
|
||||
this.initSwitchTheme();
|
||||
this.initSearch();
|
||||
this.initDetails();
|
||||
this.initLightGallery();
|
||||
this.initHighlight();
|
||||
this.initTable();
|
||||
|
|
|
|||
Loading…
Reference in a new issue