diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fdfcdba..15ac0c95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,8 @@ All notable changes to this project will be documented in this file. - :sparkles: Style: add media style for print view ([#61](https://github.com/Lruihao/FixIt/issues/61)) - :sparkles: Feat: add Gravatar mirror site support ([#66](https://github.com/Lruihao/FixIt/pull/66)@ctj12461) - :sparkles: Feat: add archive count display ([#33](https://github.com/Lruihao/FixIt/issues/33)) -- :sparkles: Feat: add details shortcode ([#68](https://github.com/Lruihao/FixIt/issues/68)) +- :sparkles: Feat: add `details` shortcode ([#68](https://github.com/Lruihao/FixIt/issues/68)) +- :sparkles: Feat: add `center-quote` shortcode ([#69](https://github.com/Lruihao/FixIt/issues/69)) - :sparkles: Feat: add markdown support for **title** parameter of the admonition shortcode - :sparkles: Feat: add 9 newly supported social links ([#17](https://github.com/Lruihao/FixIt/issues/17)) - :zap: Perf: enhance highlight feature (GitHub syntax supported) and fix some css bugs ([#43](https://github.com/Lruihao/FixIt/issues/43)) diff --git a/assets/css/_shortcodes/_center-quote.scss b/assets/css/_shortcodes/_center-quote.scss new file mode 100644 index 00000000..d73be6be --- /dev/null +++ b/assets/css/_shortcodes/_center-quote.scss @@ -0,0 +1,41 @@ +.blockquote-center { + border-left: none; + margin: 40px 0; + padding: 0; + position: relative; + text-align: center; + + &::after, &::before { + left: 0; + line-height: 1; + opacity: .6; + position: absolute; + width: 100%; + } + + &::before { + border-top: 1px solid $global-border-color; + text-align: left; + top: -20px; + content: '\f10d'; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + + [theme=dark] & { + border-top-color: $global-border-color-dark; + } + } + + &::after { + border-bottom: 1px solid $global-border-color; + bottom: -20px; + text-align: right; + content: '\f10e'; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + + [theme=dark] & { + border-bottom-color: $global-border-color-dark; + } + } +} \ No newline at end of file diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md index 07096c0f..92cca985 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md +++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md @@ -42,7 +42,7 @@ And the **second** one is the tag name of the HTML element wrapping the content Example `style` input: -```markdown +``` {{}} This is a **right-aligned** paragraph. {{}} @@ -96,7 +96,7 @@ The `link` shortcode has the following named parameters: Example `link` input: -```markdown +``` {{}} Or {{}} @@ -118,7 +118,7 @@ The rendered output looks like this: Example `link` input with a title: -```markdown +``` {{}} Or {{}} @@ -130,7 +130,7 @@ The rendered output looks like this (hover over the link, there should be a tool Example `link` input for card type: -```markdown +``` {{}} Or {{}} @@ -142,7 +142,7 @@ The rendered output looks like this: Example `link` input with download attribute: -```markdown +``` {{}} ``` @@ -210,7 +210,7 @@ The `image` shortcode has the following named parameters: Example `image` input: -```markdown +``` {{}} ``` @@ -288,7 +288,7 @@ The `admonition` shortcode has the following named parameters: Example `admonition` input: -```markdown +``` {{}} A **tip** banner {{}} @@ -314,7 +314,7 @@ Just insert your mermaid code in the `mermaid` shortcode and that’s it. Example **flowchart** `mermaid` input: -```markdown +``` {{}} graph LR; A[Hard edge] -->|Link text| B(Round edge) @@ -338,7 +338,7 @@ graph LR; Example **sequence diagram** `mermaid` input: -```markdown +``` {{}} sequenceDiagram participant Alice @@ -374,7 +374,7 @@ sequenceDiagram Example **GANTT** `mermaid` input: -```markdown +``` {{}} gantt dateFormat YYYY-MM-DD @@ -418,7 +418,7 @@ gantt Example **class diagram** `mermaid` input: -```markdown +``` {{}} classDiagram Class01 <|-- AveryLongClass : Cool @@ -460,7 +460,7 @@ classDiagram Example **state diagram** `mermaid` input: -```markdown +``` {{}} stateDiagram [*] --> Still @@ -488,7 +488,7 @@ stateDiagram Example **git graph** `mermaid` input: -```markdown +``` {{}} gitGraph: options @@ -530,7 +530,7 @@ end Example **pie** `mermaid` input: -```markdown +``` {{}} pie "Dogs" : 386 @@ -994,7 +994,7 @@ The `mapbox` shortcode has the following named parameters to use Mapbox GL JS: Example simple `mapbox` input: -```markdown +``` {{}} Or {{}} @@ -1006,7 +1006,7 @@ The rendered output looks like this: Example `mapbox` input with the custom style: -```markdown +``` {{}} Or {{}} @@ -1046,7 +1046,7 @@ The `music` shortcode has the following named parameters by custom music URL: Example `music` input by custom music URL: -```markdown +``` {{}} ``` @@ -1065,7 +1065,7 @@ The `music` shortcode has one named parameter by music platform URL automatic id Example `music` input by music platform URL automatic identification: -```markdown +``` {{}} Or {{}} @@ -1097,7 +1097,7 @@ The `music` shortcode has the following named parameters by custom music platfor Example `music` input by custom music platform: -```markdown +``` {{}} Or {{}} @@ -1171,7 +1171,7 @@ https://www.bilibili.com/video/BV1Sx411T7QQ Example `bilibili` input: -```markdown +``` {{}} Or {{}} @@ -1190,7 +1190,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3 Example `bilibili` input with `p`: -```markdown +``` {{}} Or {{}} @@ -1212,7 +1212,7 @@ Simple content is allowed in `Markdown` format and **without** rich block conten Example `typeit` input: -```markdown +``` {{}} This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... {{}} @@ -1228,7 +1228,7 @@ Alternatively, you can use custom **HTML tags**. Example `typeit` input with `h4` tag: -```markdown +``` {{}} This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... {{}} @@ -1246,7 +1246,7 @@ Code content is allowed and will be highlighted by named parameter `code` for th Example `typeit` input with `code`: -```markdown +``` {{}} public class HelloWorld { public static void main(String []args) { @@ -1275,7 +1275,7 @@ A set of `typeit` contents with the same value of named parameter `group` will s Example `typeit` input with `group`: -```markdown +``` {{}} **First** this paragraph begins {{}} @@ -1307,7 +1307,7 @@ The script content can be guaranteed to be executed in order after all third-par Example `script` input: -```markdown +``` {{}} console.log('Hello FixIt!'); {{}} @@ -1320,6 +1320,7 @@ console.log('Hello FixIt!'); {{< /script >}} ## 12 details + {{< version 0.2.13 >}} `details` is a shortcode to insert **:(fab fa-html5 fa-fw): HTML5 tag** details and summary in your post. @@ -1332,7 +1333,7 @@ The `details` shortcode has only one parameter: Example `details` input: -```markdown +``` {{}} *All pages and graphics on this web site are the property of FixIt.* {{}} @@ -1348,6 +1349,28 @@ The rendered output looks like this: *All pages and graphics on this web site are the property of FixIt.* {{< /details >}} +## 13 center-quote + +{{< version 0.2.13 >}} + +`center-quote` is a shortcode to insert centered text blockquote tag in your post. + +Example `center-quote` input: + +``` +{{}} +**hello** *world* +this is a center-quote shortcode example. +{{}} +``` + +The rendered output looks like this: + +{{< center-quote >}} +**hello** *world* +this is a center-quote shortcode example. +{{< /center-quote >}} + --- {{< admonition quote "Thanks" >}} diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md index 88e3aa1e..22b85804 100644 --- a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md +++ b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md @@ -44,7 +44,7 @@ Hugo **extended** 版本对于 `style` shortcode 是必需的。 一个 `style` 示例： -```markdown +``` {{}} This is a **right-aligned** paragraph. {{}} @@ -99,7 +99,7 @@ This is a **right-aligned** paragraph. 一个 `link` 示例： -```markdown +``` {{}} 或者 {{}} @@ -121,7 +121,7 @@ This is a **right-aligned** paragraph. 一个带有标题的 `link` 示例： -```markdown +``` {{}} 或者 {{}} @@ -133,7 +133,7 @@ This is a **right-aligned** paragraph. 一个卡片式 `link` 示例： -```markdown +``` {{}} 或者 {{}} @@ -145,7 +145,7 @@ This is a **right-aligned** paragraph. 一个可下载的 `link` 示例： -```markdown +``` {{}} ``` @@ -213,7 +213,7 @@ This is a **right-aligned** paragraph. 一个 `image` 示例： -```markdown +``` {{}} ``` @@ -291,7 +291,7 @@ This is a **right-aligned** paragraph. 一个 `admonition` 示例： -```markdown +``` {{}} 一个 **技巧** 横幅 {{}} @@ -317,7 +317,7 @@ This is a **right-aligned** paragraph. 一个 **流程图** `mermaid` 示例： -```markdown +``` {{}} graph LR; A[Hard edge] -->|Link text| B(Round edge) @@ -341,7 +341,7 @@ graph LR; 一个 **时序图** `mermaid` 示例： -```markdown +``` {{}} sequenceDiagram participant Alice @@ -377,7 +377,7 @@ sequenceDiagram 一个 **甘特图** `mermaid` 示例： -```markdown +``` {{}} gantt dateFormat YYYY-MM-DD @@ -421,7 +421,7 @@ gantt 一个 **类图** `mermaid` 示例： -```markdown +``` {{}} classDiagram Class01 <|-- AveryLongClass : Cool @@ -463,7 +463,7 @@ classDiagram 一个 **状态图** `mermaid` 示例： -```markdown +``` {{}} stateDiagram [*] --> Still @@ -491,7 +491,7 @@ stateDiagram 一个 **Git 图** `mermaid` 示例： -```markdown +``` {{}} gitGraph: options @@ -533,7 +533,7 @@ end 一个 **饼图** `mermaid` 示例： -```markdown +``` {{}} pie "Dogs" : 386 @@ -997,7 +997,7 @@ data = [ 一个简单的 `mapbox` 示例： -```markdown +``` {{}} 或者 {{}} @@ -1009,7 +1009,7 @@ data = [ 一个带有自定义样式的 `mapbox` 示例： -```markdown +``` {{}} 或者 {{}} @@ -1049,7 +1049,7 @@ data = [ 一个使用自定义音乐 URL 的 `music` 示例： -```markdown +``` {{}} ``` @@ -1067,7 +1067,7 @@ data = [ 一个使用音乐平台 URL 的自动识别的 `music` 示例： -```markdown +``` {{}} 或者 {{}} @@ -1099,7 +1099,7 @@ data = [ 一个使用自定义音乐平台的 `music` 示例： -```markdown +``` {{}} 或者 {{}} @@ -1173,7 +1173,7 @@ https://www.bilibili.com/video/BV1Sx411T7QQ 一个 `bilibili` 示例： -```markdown +``` {{}} 或者 {{}} @@ -1191,7 +1191,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3 一个带有 `p` 参数的 `bilibili` 示例： -```markdown +``` {{}} 或者 {{}} @@ -1213,7 +1213,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3 一个 `typeit` 示例： -```markdown +``` {{}} 这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落* ... {{}} @@ -1229,7 +1229,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3 一个带有 `h4` 标签的 `typeit` 示例： -```markdown +``` {{}} 这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落* ... {{}} @@ -1247,7 +1247,7 @@ https://www.bilibili.com/video/BV1TJ411C7An?p=3 一个带有 `code` 参数的 `typeit` 示例： -```markdown +``` {{}} public class HelloWorld { public static void main(String []args) { @@ -1276,7 +1276,7 @@ public class HelloWorld { 一个带有 `group` 参数的 `typeit` 示例： -```markdown +``` {{}} **首先**, 这个段落开始 {{}} @@ -1309,7 +1309,7 @@ public class HelloWorld { 一个 `script` 示例： -```markdown +``` {{}} console.log('Hello FixIt!'); {{}} @@ -1322,6 +1322,7 @@ console.log('Hello FixIt!'); {{< /script >}} ## 12 details + {{< version 0.2.13 >}} `details` shortcode 用来在你的文章中插入 **:(fab fa-html5 fa-fw): HTML5 标签** details 和 summary。 @@ -1333,7 +1334,7 @@ console.log('Hello FixIt!'); 一个 `details` 示例： -```markdown +``` {{}} *All pages and graphics on this web site are the property of FixIt.* {{}} @@ -1349,6 +1350,28 @@ console.log('Hello FixIt!'); *All pages and graphics on this web site are the property of FixIt.* {{< /details >}} +## 13 center-quote + +{{< version 0.2.13 >}} + +`center-quote` shortcode 用来在你的文章中插入文本居中的 blockquote 标签。 + +一个 `center-quote` 示例： + +``` +{{}} +**hello** *world* +this is a center-quote shortcode example. +{{}} +``` + +呈现的输出效果如下： + +{{< center-quote >}} +**hello** *world* +this is a center-quote shortcode example. +{{< /center-quote >}} + --- {{< admonition quote "感谢" >}} diff --git a/exampleSite/content/tests/center-quote.md b/exampleSite/content/tests/center-quote.md new file mode 100644 index 00000000..12a211e4 --- /dev/null +++ b/exampleSite/content/tests/center-quote.md @@ -0,0 +1,15 @@ +--- +title: "center-quote shortcode" +date: 2022-03-07T22:31:22+08:00 +type: 'posts' +draft: true +--- + +normal content + +> normal blockquote content + +{{< center-quote >}} +**hello** *world* +this is a center-quote shortcode example. +{{< /center-quote >}} \ No newline at end of file diff --git a/layouts/shortcodes/center-quote.html b/layouts/shortcodes/center-quote.html new file mode 100644 index 00000000..eb027190 --- /dev/null +++ b/layouts/shortcodes/center-quote.html @@ -0,0 +1,3 @@ +
+ {{ .Inner | markdownify }} +
\ No newline at end of file