+
+")},defaultOption:{zlevel:0,z:2,coordinateSystem:"radar",legendHoverLink:!0,radarIndex:0,lineStyle:{width:2,type:"solid"},label:{position:"top"},symbol:"emptyCircle",symbolSize:4}});hf({type:"radar",render:function(l,t,e){var i=l.coordinateSystem,g=this.group,m=l.getData(),s=this._data;function u(t,e){var i=t.getItemVisual(e,"symbol")||"circle",n=t.getItemVisual(e,"color");if("none"!==i){var a=function(t){return k(t)||(t=[+t,+t]),t}(t.getItemVisual(e,"symbolSize")),o=Jp(i,-1,-1,2,2,n);return o.attr({style:{strokeNoScale:!0},z2:100,scale:[a[0]/2,a[1]/2]}),o}}function h(t,e,i,n,a,o){i.removeAll();for(var r=0;r
+
+{{ .Title }}
+ {{ range .Pages }} + {{ .Render "summary"}} + {{ end }} +prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{< /mermaid >}} + +#### GANTT {#gantt} + +Example **GANTT** `mermaid` Input: + +```markdown +{{}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{< /mermaid >}} + +#### Class Diagram {#class-diagram} + +Example **class diagram** `mermaid` Input: + +```markdown +{{}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{< /mermaid >}} + +#### State Diagram {#state-diagram} + +Example **state diagram** `mermaid` Input: + +```markdown +{{}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{< /mermaid >}} + +#### Git Graph {#git-graph} + +Example **git graph** `mermaid` Input: + +```markdown +{{}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{< /mermaid >}} + +#### Pie {#pie} + +Example **pie** `mermaid` Input: + +```markdown +{{}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{< /mermaid >}} + +### `echarts` + +[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization. + +The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts. + +Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it. + +Example `echarts` Input in `JSON` format: + +```json +{{/* echarts */}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{}} +``` + +The same in `YAML` format: + +```yaml +{{}} +title: + text: Summary Line Chart + top: 2% + left: center +tooltip: + trigger: axis +legend: + data: + - Email Marketing + - Affiliate Advertising + - Video Advertising + - Direct View + - Search Engine + top: 10% +grid: + left: 5% + right: 5% + bottom: 5% + top: 20% + containLabel: true +toolbox: + feature: + saveAsImage: + title: Save as Image +xAxis: + type: category + boundaryGap: false + data: + - Monday + - Tuesday + - Wednesday + - Thursday + - Friday + - Saturday + - Sunday +yAxis: + type: value +series: + - name: Email Marketing + type: line + stack: Total + data: + - 120 + - 132 + - 101 + - 134 + - 90 + - 230 + - 210 + - name: Affiliate Advertising + type: line + stack: Total + data: + - 220 + - 182 + - 191 + - 234 + - 290 + - 330 + - 310 + - name: Video Advertising + type: line + stack: Total + data: + - 150 + - 232 + - 201 + - 154 + - 190 + - 330 + - 410 + - name: Direct View + type: line + stack: Total + data: + - 320 + - 332 + - 301 + - 334 + - 390 + - 330 + - 320 + - name: Search Engine + type: line + stack: Total + data: + - 820 + - 932 + - 901 + - 934 + - 1290 + - 1330 + - 1320 +{{}} +``` + +The same in `TOML` format: + +```toml +{{}} +[title] +text = "Summary Line Chart" +top = "2%" +left = "center" + +[tooltip] +trigger = "axis" + +[legend] +data = [ + "Email Marketing", + "Affiliate Advertising", + "Video Advertising", + "Direct View", + "Search Engine" +] +top = "10%" + +[grid] +left = "5%" +right = "5%" +bottom = "5%" +top = "20%" +containLabel = true + +[toolbox] +[toolbox.feature] +[toolbox.feature.saveAsImage] +title = "Save as Image" + +[xAxis] +type = "category" +boundaryGap = false +data = [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday" +] + +[yAxis] +type = "value" + +[[series]] +name = "Email Marketing" +type = "line" +stack = "Total" +data = [ + 120.0, + 132.0, + 101.0, + 134.0, + 90.0, + 230.0, + 210.0 +] + +[[series]] +name = "Affiliate Advertising" +type = "line" +stack = "Total" +data = [ + 220.0, + 182.0, + 191.0, + 234.0, + 290.0, + 330.0, + 310.0 +] + +[[series]] +name = "Video Advertising" +type = "line" +stack = "Total" +data = [ + 150.0, + 232.0, + 201.0, + 154.0, + 190.0, + 330.0, + 410.0 +] + +[[series]] +name = "Direct View" +type = "line" +stack = "Total" +data = [ + 320.0, + 332.0, + 301.0, + 334.0, + 390.0, + 330.0, + 320.0 +] + +[[series]] +name = "Search Engine" +type = "line" +stack = "Total" +data = [ + 820.0, + 932.0, + 901.0, + 934.0, + 1290.0, + 1330.0, + 1320.0 +] +{{}} +``` + +The rendered output looks like this: + +{{< echarts >}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{< /echarts >}} + +### `music` + +The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS). + +The `music` shortcode can use the following named parameters: + +|parameter |default |description| +|:---------------|:------------:|:----------| +|url |**require** |music URL| +|name |options |music name| +|artist |options |music artist| +|cover |options |music cover URL| +|server |**require** |music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`| +|type |**require** |`song`, `playlist`, `album`, `search`, `artist`| +|id |**require** |song id / playlist id / album id / search keyword| +|auto |options |music link, support: `netease`, `tencent`, `xiami`| +|fixed |`false` |enable fixed mode| +|mini |`false` |enable mini mode| +|autoplay |`false` |audio autoplay| +|theme |`#a9a9b3` |main color| +|loop |`all` |player loop play, values: 'all', 'one', 'none'| +|order |`list` |player play order, values: 'list', 'random'| +|volume |`0.7` |default volume, notice that player will remember user setting, default volume will not work after user set volume themselves| +|mutex |`true` |prevent to play multiple player at the same time, pause other players when this player start play| +|list-folded |`false` |indicate whether list should folded at first| +|list-max-height |`340px` |list max height| + +#### Custom Music URL {#custom-music-url} + +Example `music` Input: + +```markdown +{{}} +``` + +The rendered output looks like this: + +{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}} + +#### Music Platform URL Automatic Identification {#automatic-identification} + +Example `music` Input: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< music auto="https://music.163.com/#/playlist?id=60198" >}} + +#### Custom Server, Type and ID {#custom-server} + +Example `music` Input: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< music netease song 1868553 >}} + +### `bilibili` + +The `bilibili` shortcode embeds a responsive video player for bilibili videos. + +When the video only has one part, only the `av` ID of the video is required, e.g.: + +```code +https://www.bilibili.com/video/av47027633 +``` + +Example `bilibili` Input: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< bilibili av=47027633 >}} + +When the video has multiple parts, in addition to the `av` ID of the video, +`p` is also required, whose default value is `1`, e.g.: + +```code +https://www.bilibili.com/video/av36570401?p=3 +``` + +Example `bilibili` Input with `p`: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< bilibili av=36570401 p=3 >}} + +### `typeit` + +The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/). + +Just insert your content in the `typeit` shortcode and that’s it. + +#### Simple Content {#simple-content} + +Simple content is allowed in `Markdown` format and **without** rich block content such as images and more... + +Example `typeit` Input: + +```markdown +{{}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{}} +``` + +The rendered output looks like this: + +{{< typeit >}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +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/)... +{{}} +``` + +The rendered output looks like this: + +{{< typeit tag=h4 >}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +#### Code Content {#code-content} + +Code content is allowed and will be highlighted by named parameter `code` for the type of code language. + +Example `typeit` Input with `code`: + +```markdown +{{}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{}} +``` + +The rendered output looks like this: + +{{< typeit code=java >}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{< /typeit >}} + +#### Group Content {#group-content} + +All typing animations start at the same time by default. +But sometimes you may want to start a set of `typeit` contents in order. + +A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence. + +Example `typeit` Input with `group`: + +```markdown +{{}} +**First** this paragraph begins +{{}} + +{{}} +**Then** this paragraph begins +{{}} +``` + +The rendered output looks like this: + +{{< typeit group=paragraph >}} +**First** this paragraph begins +{{< /typeit >}} + +{{< typeit group=paragraph >}} +**Then** this paragraph begins +{{< /typeit >}} diff --git a/exampleSite/content/posts/theme-documentation-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-shortcodes.fr.md new file mode 100644 index 000000000..9be2f2e53 --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-shortcodes.fr.md @@ -0,0 +1,1177 @@ +--- +weight: 3 +title: "Thème Documentation - Shortcodes" +date: 2020-03-04T16:29:59+08:00 +lastmod: 2020-03-04T16:29:59+08:00 +draft: false +author: "Dillon" +authorLink: "https://dillonzq.com" +description: "Le thème LoveIt fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo." +license: "" + +tags: ["shortcodes"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +Le thème **LoveIt** fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo. + + + +{{< admonition warning >}} +Sorry, this article has not been completely translated into **French**. +Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme! +{{< /admonition >}} + +Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities. + +But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible. + +To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/). +A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy. + +## Hugo’s Built-in Shortcodes + +Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean. + +### `figure` {#figure} + +[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure) + +Example `figure` Input: + +```markdown +{{}} +``` + +The rendered output looks like this: + +{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}} + +The HTML looks like this: + +```html +
+ Lighthouse (figure)
+
+
+{{ .Title }}
+ {{ range .Pages }} + {{ .Render "summary"}} + {{ end }} +
+
+{{ .Title }}
+ {{ range .Pages }} + {{ .Render "summary"}} + {{ end }} +prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{< /mermaid >}} + +#### GANTT {#gantt} + +Example **GANTT** `mermaid` Input: + +```markdown +{{}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{< /mermaid >}} + +#### Class Diagram {#class-diagram} + +Example **class diagram** `mermaid` Input: + +```markdown +{{}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{< /mermaid >}} + +#### State Diagram {#state-diagram} + +Example **state diagram** `mermaid` Input: + +```markdown +{{}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{< /mermaid >}} + +#### Git Graph {#git-graph} + +Example **git graph** `mermaid` Input: + +```markdown +{{}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{< /mermaid >}} + +#### Pie {#pie} + +Example **pie** `mermaid` Input: + +```markdown +{{}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{< /mermaid >}} + +### `echarts` + +[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization. + +The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts. + +Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it. + +Example `echarts` Input in `JSON` format: + +```json +{{/* echarts */}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{}} +``` + +The same in `YAML` format: + +```yaml +{{}} +title: + text: Summary Line Chart + top: 2% + left: center +tooltip: + trigger: axis +legend: + data: + - Email Marketing + - Affiliate Advertising + - Video Advertising + - Direct View + - Search Engine + top: 10% +grid: + left: 5% + right: 5% + bottom: 5% + top: 20% + containLabel: true +toolbox: + feature: + saveAsImage: + title: Save as Image +xAxis: + type: category + boundaryGap: false + data: + - Monday + - Tuesday + - Wednesday + - Thursday + - Friday + - Saturday + - Sunday +yAxis: + type: value +series: + - name: Email Marketing + type: line + stack: Total + data: + - 120 + - 132 + - 101 + - 134 + - 90 + - 230 + - 210 + - name: Affiliate Advertising + type: line + stack: Total + data: + - 220 + - 182 + - 191 + - 234 + - 290 + - 330 + - 310 + - name: Video Advertising + type: line + stack: Total + data: + - 150 + - 232 + - 201 + - 154 + - 190 + - 330 + - 410 + - name: Direct View + type: line + stack: Total + data: + - 320 + - 332 + - 301 + - 334 + - 390 + - 330 + - 320 + - name: Search Engine + type: line + stack: Total + data: + - 820 + - 932 + - 901 + - 934 + - 1290 + - 1330 + - 1320 +{{}} +``` + +The same in `TOML` format: + +```toml +{{}} +[title] +text = "Summary Line Chart" +top = "2%" +left = "center" + +[tooltip] +trigger = "axis" + +[legend] +data = [ + "Email Marketing", + "Affiliate Advertising", + "Video Advertising", + "Direct View", + "Search Engine" +] +top = "10%" + +[grid] +left = "5%" +right = "5%" +bottom = "5%" +top = "20%" +containLabel = true + +[toolbox] +[toolbox.feature] +[toolbox.feature.saveAsImage] +title = "Save as Image" + +[xAxis] +type = "category" +boundaryGap = false +data = [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday" +] + +[yAxis] +type = "value" + +[[series]] +name = "Email Marketing" +type = "line" +stack = "Total" +data = [ + 120.0, + 132.0, + 101.0, + 134.0, + 90.0, + 230.0, + 210.0 +] + +[[series]] +name = "Affiliate Advertising" +type = "line" +stack = "Total" +data = [ + 220.0, + 182.0, + 191.0, + 234.0, + 290.0, + 330.0, + 310.0 +] + +[[series]] +name = "Video Advertising" +type = "line" +stack = "Total" +data = [ + 150.0, + 232.0, + 201.0, + 154.0, + 190.0, + 330.0, + 410.0 +] + +[[series]] +name = "Direct View" +type = "line" +stack = "Total" +data = [ + 320.0, + 332.0, + 301.0, + 334.0, + 390.0, + 330.0, + 320.0 +] + +[[series]] +name = "Search Engine" +type = "line" +stack = "Total" +data = [ + 820.0, + 932.0, + 901.0, + 934.0, + 1290.0, + 1330.0, + 1320.0 +] +{{}} +``` + +The rendered output looks like this: + +{{< echarts >}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{< /echarts >}} + +### `music` + +The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS). + +The `music` shortcode can use the following named parameters: + +|parameter |default |description| +|:---------------|:------------:|:----------| +|url |**require** |music URL| +|name |options |music name| +|artist |options |music artist| +|cover |options |music cover URL| +|server |**require** |music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`| +|type |**require** |`song`, `playlist`, `album`, `search`, `artist`| +|id |**require** |song id / playlist id / album id / search keyword| +|auto |options |music link, support: `netease`, `tencent`, `xiami`| +|fixed |`false` |enable fixed mode| +|mini |`false` |enable mini mode| +|autoplay |`false` |audio autoplay| +|theme |`#a9a9b3` |main color| +|loop |`all` |player loop play, values: 'all', 'one', 'none'| +|order |`list` |player play order, values: 'list', 'random'| +|volume |`0.7` |default volume, notice that player will remember user setting, default volume will not work after user set volume themselves| +|mutex |`true` |prevent to play multiple player at the same time, pause other players when this player start play| +|list-folded |`false` |indicate whether list should folded at first| +|list-max-height |`340px` |list max height| + +#### Custom Music URL {#custom-music-url} + +Example `music` Input: + +```markdown +{{}} +``` + +The rendered output looks like this: + +{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}} + +#### Music Platform URL Automatic Identification {#automatic-identification} + +Example `music` Input: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< music auto="https://music.163.com/#/playlist?id=60198" >}} + +#### Custom Server, Type and ID {#custom-server} + +Example `music` Input: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< music netease song 1868553 >}} + +### `bilibili` + +The `bilibili` shortcode embeds a responsive video player for bilibili videos. + +When the video only has one part, only the `av` ID of the video is required, e.g.: + +```code +https://www.bilibili.com/video/av47027633 +``` + +Example `bilibili` Input: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< bilibili av=47027633 >}} + +When the video has multiple parts, in addition to the `av` ID of the video, +`p` is also required, whose default value is `1`, e.g.: + +```code +https://www.bilibili.com/video/av36570401?p=3 +``` + +Example `bilibili` Input with `p`: + +```markdown +{{}} +Or +{{}} +``` + +The rendered output looks like this: + +{{< bilibili av=36570401 p=3 >}} + +### `typeit` + +The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/). + +Just insert your content in the `typeit` shortcode and that’s it. + +#### Simple Content {#simple-content} + +Simple content is allowed in `Markdown` format and **without** rich block content such as images and more... + +Example `typeit` Input: + +```markdown +{{}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{}} +``` + +The rendered output looks like this: + +{{< typeit >}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +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/)... +{{}} +``` + +The rendered output looks like this: + +{{< typeit tag=h4 >}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +#### Code Content {#code-content} + +Code content is allowed and will be highlighted by named parameter `code` for the type of code language. + +Example `typeit` Input with `code`: + +```markdown +{{}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{}} +``` + +The rendered output looks like this: + +{{< typeit code=java >}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{< /typeit >}} + +#### Group Content {#group-content} + +All typing animations start at the same time by default. +But sometimes you may want to start a set of `typeit` contents in order. + +A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence. + +Example `typeit` Input with `group`: + +```markdown +{{}} +**First** this paragraph begins +{{}} + +{{}} +**Then** this paragraph begins +{{}} +``` + +The rendered output looks like this: + +{{< typeit group=paragraph >}} +**First** this paragraph begins +{{< /typeit >}} + +{{< typeit group=paragraph >}} +**Then** this paragraph begins +{{< /typeit >}} diff --git a/exampleSite/content/posts/theme-documentation-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-shortcodes.zh-cn.md new file mode 100644 index 000000000..b05861d21 --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-shortcodes.zh-cn.md @@ -0,0 +1,1173 @@ +--- +weight: 3 +title: "主题文档 - Shortcodes" +date: 2020-03-04T16:29:59+08:00 +lastmod: 2020-03-04T16:29:59+08:00 +draft: false +author: "Dillon" +authorLink: "https://dillonzq.com" +description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode." +license: "" + +tags: ["shortcodes"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode. + + + +Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性. + +但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁. + +为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/). +shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学. + +## Hugo 内置 shortcodes {#hugo} + +Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法. +提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁. + +### `figure` {#figure} + +[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure) + +一个 `figure` 示例: + +```markdown +{{}} +``` + +呈现的输出效果如下: + +{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}} + +输出的 HTML 看起来像这样: + +```html +
+ Lighthouse (figure)
+
+
+{{ .Title }}
+ {{ range .Pages }} + {{ .Render "summary"}} + {{ end }} +
+
+{{ .Title }}
+ {{ range .Pages }} + {{ .Render "summary"}} + {{ end }} +prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{< /mermaid >}} + +#### 甘特图 {#gantt} + +一个 **甘特图** `mermaid` 示例: + +```markdown +{{}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{< /mermaid >}} + +#### 类图 {#class-diagram} + +一个 **类图** `mermaid` 示例: + +```markdown +{{}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{< /mermaid >}} + +#### 状态图 {#state-diagram} + +一个 **状态图** `mermaid` 示例: + +```markdown +{{}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{< /mermaid >}} + +#### Git 图 {#git-graph} + +一个 **Git 图** `mermaid` 示例: + +```markdown +{{}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{< /mermaid >}} + +#### 饼图 {#pie} + +一个 **饼图** `mermaid` 示例: + +```markdown +{{}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{< /mermaid >}} + +### `echarts` + +[ECharts](https://echarts.apache.org/) 是一个帮助你生成交互式数据可视化的库. + +ECharts 提供了常规的 [折线图](https://echarts.apache.org/zh/option.html#series-line), [柱状图](https://echarts.apache.org/zh/option.html#series-line), [散点图](https://echarts.apache.org/zh/option.html#series-scatter), [饼图](https://echarts.apache.org/zh/option.html#series-pie), [K线图](https://echarts.apache.org/zh/option.html#series-candlestick), 用于统计的 [盒形图](https://echarts.apache.org/zh/option.html#series-boxplot), 用于地理数据可视化的 [地图](https://echarts.apache.org/zh/option.html#series-map), [热力图](https://echarts.apache.org/zh/option.html#series-heatmap), [线图](https://echarts.apache.org/zh/option.html#series-lines), 用于关系数据可视化的 [关系图](https://echarts.apache.org/zh/option.html#series-graph), [treemap](https://echarts.apache.org/zh/option.html#series-treemap), [旭日图](https://echarts.apache.org/zh/option.html#series-sunburst), 多维数据可视化的 [平行坐标](https://echarts.apache.org/zh/option.html#series-parallel), 还有用于 BI 的 [漏斗图](https://echarts.apache.org/zh/option.html#series-funnel), [仪表盘](https://echarts.apache.org/zh/option.html#series-gauge), 并且支持图与图之间的混搭. + +只需在 `echarts` shortcode 中以 `JSON`/`YAML`/`TO ML`格式插入 ECharts 选项即可. + +一个 `JSON` 格式的 `echarts` 示例: + +```json +{{/* echarts */}} +{ + "title": { + "text": "折线统计图", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "保存为图片" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "邮件营销", + "type": "line", + "stack": "总量", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "联盟广告", + "type": "line", + "stack": "总量", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "视频广告", + "type": "line", + "stack": "总量", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "直接访问", + "type": "line", + "stack": "总量", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "搜索引擎", + "type": "line", + "stack": "总量", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{}} +``` + +一个 `YAML` 格式的 `echarts` 示例: + +```yaml +{{}} +title: + text: 折线统计图 + top: 2% + left: center +tooltip: + trigger: axis +legend: + data: + - 邮件营销 + - 联盟广告 + - 视频广告 + - 直接访问 + - 搜索引擎 + top: 10% +grid: + left: 5% + right: 5% + bottom: 5% + top: 20% + containLabel: true +toolbox: + feature: + saveAsImage: + title: 保存为图片 +xAxis: + type: category + boundaryGap: false + data: + - 周一 + - 周二 + - 周三 + - 周四 + - 周五 + - 周六 + - 周日 +yAxis: + type: value +series: + - name: 邮件营销 + type: line + stack: 总量 + data: + - 120 + - 132 + - 101 + - 134 + - 90 + - 230 + - 210 + - name: 联盟广告 + type: line + stack: 总量 + data: + - 220 + - 182 + - 191 + - 234 + - 290 + - 330 + - 310 + - name: 视频广告 + type: line + stack: 总量 + data: + - 150 + - 232 + - 201 + - 154 + - 190 + - 330 + - 410 + - name: 直接访问 + type: line + stack: 总量 + data: + - 320 + - 332 + - 301 + - 334 + - 390 + - 330 + - 320 + - name: 搜索引擎 + type: line + stack: 总量 + data: + - 820 + - 932 + - 901 + - 934 + - 1290 + - 1330 + - 1320 +{{}} +``` + +一个 `TOML` 格式的 `echarts` 示例: + +```toml +{{}} +[title] +text = "折线统计图" +top = "2%" +left = "center" + +[tooltip] +trigger = "axis" + +[legend] +data = [ + "邮件营销", + "联盟广告", + "视频广告", + "直接访问", + "搜索引擎" +] +top = "10%" + +[grid] +left = "5%" +right = "5%" +bottom = "5%" +top = "20%" +containLabel = true + +[toolbox] +[toolbox.feature] +[toolbox.feature.saveAsImage] +title = "保存为图片" + +[xAxis] +type = "category" +boundaryGap = false +data = [ + "周一", + "周二", + "周三", + "周四", + "周五", + "周六", + "周日" +] + +[yAxis] +type = "value" + +[[series]] +name = "邮件营销" +type = "line" +stack = "总量" +data = [ + 120.0, + 132.0, + 101.0, + 134.0, + 90.0, + 230.0, + 210.0 +] + +[[series]] +name = "联盟广告" +type = "line" +stack = "总量" +data = [ + 220.0, + 182.0, + 191.0, + 234.0, + 290.0, + 330.0, + 310.0 +] + +[[series]] +name = "视频广告" +type = "line" +stack = "总量" +data = [ + 150.0, + 232.0, + 201.0, + 154.0, + 190.0, + 330.0, + 410.0 +] + +[[series]] +name = "直接访问" +type = "line" +stack = "总量" +data = [ + 320.0, + 332.0, + 301.0, + 334.0, + 390.0, + 330.0, + 320.0 +] + +[[series]] +name = "搜索引擎" +type = "line" +stack = "总量" +data = [ + 820.0, + 932.0, + 901.0, + 934.0, + 1290.0, + 1330.0, + 1320.0 +] +{{}} +``` + +呈现的输出效果如下: + +{{< echarts >}} +{ + "title": { + "text": "折线统计图", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "保存为图片" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "邮件营销", + "type": "line", + "stack": "总量", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "联盟广告", + "type": "line", + "stack": "总量", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "视频广告", + "type": "line", + "stack": "总量", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "直接访问", + "type": "line", + "stack": "总量", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "搜索引擎", + "type": "line", + "stack": "总量", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{< /echarts >}} + +### `music` + +`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器. + +`music` shortcode 可以使用以下命名参数: + +|参数 |默认值 |描述| +|:---------------|:------------:|:----------| +|url |**必须** |音乐的 URL| +|name |可选 |音乐名称| +|artist |可选 |音乐的创作者| +|cover |封面 |音乐封面的 URL| +|server |**必须** |音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`| +|type |**必须** |`song`, `playlist`, `album`, `search`, `artist`| +|id |**必须** |song id / playlist id / album id / 搜索关键字| +|auto |可选 |音乐链接, 支持平台: `netease`, `tencent`, `xiami`| +|fixed |`false` |启用固定模式| +|mini |`false` |启用迷你模式| +|autoplay |`false` |自动播放| +|theme |`#a9a9b3` |主题色| +|loop |`all` |循环模式, 值: 'all', 'one', 'none'| +|order |`list` |播放顺序, 值: 'list', 'random'| +|volume |`0.7` |默认音量, 请注意, 播放器会记住用户设置, 用户自己设置音量后默认音量将不起作用| +|mutex |`true` |防止同时有多个播放器, 在此播放器开始播放时暂停其他播放器| +|list-folded |`false` |列表默认是否折叠| +|list-max-height |`340px` |列表最大高度| + +#### 自定义音乐 URL {#custom-music-url} + +一个 `music` 示例: + +```markdown +{{}} +``` + +呈现的输出效果如下: + +{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}} + +#### 来自音乐平台的 URL 自动识别 {#automatic-identification} + +一个 `music` 示例: + +```markdown +{{}} +Or +{{}} +``` + +呈现的输出效果如下: + +{{< music auto="https://music.163.com/#/playlist?id=60198" >}} + +#### 自定义平台, 类型和 ID {#custom-server} + +一个 `music` 示例: + +```markdown +{{}} +Or +{{}} +``` + +呈现的输出效果如下: + +{{< music netease song 1868553 >}} + +### `bilibili` + +`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器. + +如果视频只有一个部分, 则仅需要视频的 `av` ID, 例如: + +```code +https://www.bilibili.com/video/av47027633 +``` + +一个 `bilibili` 示例: + +```markdown +{{}} +Or +{{}} +``` + +呈现的输出效果如下: + +{{< bilibili av=47027633 >}} + +如果视频包含多个部分, 则除了视频的 `av` ID之外, 还需要 `p`, 默认值为 `1`, 例如: + +```code +https://www.bilibili.com/video/av36570401?p=3 +``` + +一个带有 `p` 参数的 `bilibili` 示例: + +```markdown +{{}} +Or +{{}} +``` + +呈现的输出效果如下: + +{{< bilibili av=36570401 p=3 >}} + +### `typeit` + +`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 提供了打字动画. + +只需将你需要打字动画的内容插入 `typeit` shortcode 中即可. + +#### 简单内容 {#simple-content} + +允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等... + +一个 `typeit` 示例: + +```markdown +{{}} +这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*... +{{}} +``` + +呈现的输出效果如下: + +{{< typeit >}} +这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*... +{{< /typeit >}} + +另外, 你也可以自定义 **HTML 标签**. + +一个带有 `h4` 标签的 `typeit` 示例: + +```markdown +{{}} +这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*... +{{}} +``` + +呈现的输出效果如下: + +{{< typeit tag=h4 >}} +这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*... +{{< /typeit >}} + +#### 代码内容 {#code-content} + +代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮. + +一个带有 `code` 参数的 `typeit` 示例: + +```markdown +{{}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{}} +``` + +呈现的输出效果如下: + +{{< typeit code=java >}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{< /typeit >}} + +#### 分组内容 {#code-content} + +默认情况下, 所有打字动画都是同时开始的. +但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画. + +一组具有相同 `group` 参数值的 `typeit` 内容将按顺序开始打字动画. + +一个带有 `group` 参数的 `typeit` 示例: + +```markdown +{{}} +**首先**, 这个段落开始 +{{}} + +{{}} +**然后**, 这个段落开始 +{{}} +``` + +呈现的输出效果如下: + +{{< typeit group=paragraph >}} +**首先**, 这个段落开始 +{{< /typeit >}} + +{{< typeit group=paragraph >}} +**然后**, 这个段落开始 +{{< /typeit >}} diff --git a/exampleSite/static/images/markdown.png b/exampleSite/static/images/basic-markdown-syntax/featured-image.png similarity index 100% rename from exampleSite/static/images/markdown.png rename to exampleSite/static/images/basic-markdown-syntax/featured-image.png diff --git a/exampleSite/static/images/emoji.jpg b/exampleSite/static/images/emoji-support/featured-image.jpg similarity index 100% rename from exampleSite/static/images/emoji.jpg rename to exampleSite/static/images/emoji-support/featured-image.jpg diff --git a/exampleSite/static/images/hugo.png b/exampleSite/static/images/hugo.png deleted file mode 100644 index 10265e45e..000000000 Binary files a/exampleSite/static/images/hugo.png and /dev/null differ diff --git a/exampleSite/static/images/theme-documentation-basics/basic-configuration-preview.png b/exampleSite/static/images/theme-documentation-basics/basic-configuration-preview.png new file mode 100644 index 000000000..06424caef Binary files /dev/null and b/exampleSite/static/images/theme-documentation-basics/basic-configuration-preview.png differ diff --git a/exampleSite/static/images/theme-documentation-basics/complete-configuration-preview.gif b/exampleSite/static/images/theme-documentation-basics/complete-configuration-preview.gif new file mode 100644 index 000000000..fcdef0830 Binary files /dev/null and b/exampleSite/static/images/theme-documentation-basics/complete-configuration-preview.gif differ diff --git a/exampleSite/static/images/theme-documentation-basics/featured-image.webp b/exampleSite/static/images/theme-documentation-basics/featured-image.webp new file mode 100644 index 000000000..a9c94200e Binary files /dev/null and b/exampleSite/static/images/theme-documentation-basics/featured-image.webp differ diff --git a/exampleSite/static/images/theme-documentation-basics/language-switch.gif b/exampleSite/static/images/theme-documentation-basics/language-switch.gif new file mode 100644 index 000000000..ce3d8a3d0 Binary files /dev/null and b/exampleSite/static/images/theme-documentation-basics/language-switch.gif differ diff --git a/exampleSite/static/images/theme-documentation-content/featured-image.jpg b/exampleSite/static/images/theme-documentation-content/featured-image.jpg new file mode 100644 index 000000000..2fcae9ea3 Binary files /dev/null and b/exampleSite/static/images/theme-documentation-content/featured-image.jpg differ diff --git a/exampleSite/static/images/theme-documentation-content/summary.png b/exampleSite/static/images/theme-documentation-content/summary.png new file mode 100644 index 000000000..7e040cd80 Binary files /dev/null and b/exampleSite/static/images/theme-documentation-content/summary.png differ diff --git a/exampleSite/static/images/theme-documentation-shortcodes/featured-image.jpg b/exampleSite/static/images/theme-documentation-shortcodes/featured-image.jpg new file mode 100644 index 000000000..5fa138310 Binary files /dev/null and b/exampleSite/static/images/theme-documentation-shortcodes/featured-image.jpg differ diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-large.jpg b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-large.jpg new file mode 100644 index 000000000..f4da68e60 Binary files /dev/null and b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-large.jpg differ diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-small.jpg b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-small.jpg new file mode 100644 index 000000000..f73d5eadb Binary files /dev/null and b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-small.jpg differ diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse.jpg b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse.jpg new file mode 100644 index 000000000..d72a27b4a Binary files /dev/null and b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse.jpg differ diff --git a/exampleSite/zh/config.toml b/exampleSite/zh/config.toml deleted file mode 100644 index 9f12b820c..000000000 --- a/exampleSite/zh/config.toml +++ /dev/null @@ -1,346 +0,0 @@ -baseURL = "https://example.com/" -# 网站语言 -languageCode = "zh" -# [en, zh, ...] 设定主题的国际化 -defaultContentLanguage = "zh" -# 网站标题 -title = "LoveIt 主题" -# 主题 -theme = "LoveIt" -# 是否使用 git 信息来生成文章的上次修改时间 -enableGitInfo = false -# 是否包括中日韩文字 -hasCJKLanguage = true -# 默认每页列表显示的文章数目 -paginate = 12 -# 是否使用 emoji 代码 -enableEmoji = true -# 是否使用 robots.txt -enableRobotsTXT = true -# [UA-XXXXXXXX-X] 谷歌分析代号 -googleAnalytics = "" -# 版权描述，仅仅用于 SEO -copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." -# 日期格式 -dateFormatToUse = "2006-01-02" - -# Hugo 解析文档的配置 -[markup] - # 代码高亮设置 (https://gohugo.io/content-management/syntax-highlighting) - [markup.highlight] - codeFences = true - guessSyntax = true - lineNoStart = 1 - lineNos = true - lineNumbersInTable = true - noClasses = false - style = "monokai" - tabWidth = 4 - # Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库 - [markup.goldmark] - [markup.goldmark.extensions] - definitionList = true - footnote = true - linkify = true - strikethrough = true - table = true - taskList = true - typographer = true - [markup.goldmark.renderer] - # 是否在文档中直接使用 HTML 标签 - unsafe = true - # 目录设置 - [markup.tableOfContents] - startLevel = 2 - endLevel = 6 - -# 作者信息 -[author] - name = "xxxx" - link = "" - -# 网站地图信息 -[sitemap] - changefreq = "weekly" - filename = "sitemap.xml" - priority = 0.5 - -# Permalinks 信息 (https://gohugo.io/content-management/urls/#permalinks) -[Permalinks] - posts = ":year/:month/:filename" - -# 菜单信息 -[menu] - [[menu.main]] - identifier = "posts" - name = "文章" - url = "posts" - weight = 1 - - [[menu.main]] - identifier = "tags" - name = "标签" - url = "tags" - weight = 2 - - [[menu.main]] - identifier = "categories" - name = "分类" - url = "categories" - weight = 3 - - [[menu.main]] - identifier = "about" - name = "关于" - url = "about" - weight = 4 - - [[menu.main]] - identifier = "en" - pre = '' - name = "" - title = "English" - url = "https://hugo-loveit-en.netlify.com" - weight = 5 - -[params] - # LoveIt 主题版本 - version = "0.1.X" - # 网站描述 - description = "关于 LoveIt 主题" - # 网站关键词 - keywords = ["Theme", "Hugo"] - - # 主页信息设置 - ## [post, other] 主页模式 - home_mode = "post" - ## 主页在 post 模式下每页 post 显示数量 - home_paginate = 6 - ## 主页显示头像的 URL - avatar = "images/avatar.png" - ## 主页显示的网站副标题 - subtitle = "一个简洁、优雅且高效的 Hugo 主题" - - # 在文章页面是否使用分享功能 - socialShare = true - - # 页面底部版权信息设置 - ## 网站创立年份 - since = 2019 - ## ICP 备案信息，仅在中国使用 (允许使用 HTML 格式) - icp = "" - ## 许可协议信息 (允许使用 HTML 格式) - license= 'CC BY-NC 4.0' - - # 用于生成文章上次修改时间的公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效 - gitRepo = "" - - # 数学公式 (KaTeX https://katex.org/) - [params.math] - enable = true - block_left_delimiter = "" - block_right_delimiter = "" - inline_left_delimiter = "$" - inline_right_delimiter = "$" - # KaTeX 插件 copy_tex - copy_tex = true - # KaTeX 插件 mhchem - mhchem = true - - # 是否在文章页面显示原始 Markdown 文档链接 - linkToMarkdown = true - - # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu - google_verification = "" - bing_verification = "" - yandex_verification = "" - pinterest_verification = "" - baidu_verification = "" - - # CSS 和 JS 文件的 CDN 设置 - [params.cdn] - ## 例如 '' - fontawesome_free_css = '' - animate_css = '' - gitalk_css = '' - gitalk_js = '' - valine_js = '' - jquery_js = '' - lazysizes_js = '' - smooth_scroll_js = '' - katex_css = '' - katex_js = '' - katex_auto_render_js = '' - katex_copy_tex_css = '' - katex_copy_tex_js = '' - katex_mhchem_js = '' - mermaid_js = '' - echarts_js = '' - echarts_macarons_js = '' - typeit_js = '' - jquery_countdown_js = '' - aplayer_css = '' - aplayer_js = '' - meting_js = '' - - # Gravatar 信息，用于优先在主页显示的头像 - [params.gravatar] - email = "" - - # 主页的社交信息设置 - [params.social] - GitHub = "xxxx" - Linkedin = "xxxx" - Twitter = "xxxx" - #Instagram = "xxxx" - Email = "xxxx@outlook.com" - Facebook = "xxxx" - Telegram = "xxxx" - #Medium = "xxxx" - #Gitlab = "xxxx" - #Youtubelegacy = "xxxx" - #Youtubecustom = "xxxx" - #Youtubechannel = "xxxx" - #Tumblr ="xxxx" - #Quora = "xxxx" - #Keybase = "xxxx" - #Pinterest = "xxxx" - #Reddit = "xxxx" - #Codepen = "xxxx" - #FreeCodeCamp = "xxxx" - #Bitbucket = "xxxx" - #Stackoverflow = "xxxx" - #Weibo = "xxxx" - #Odnoklassniki = "xxxx" - #VKontakte = "xxxx" - #Flickr = "xxxx" - #Xing = "xxxx" - #Snapchat = "xxxx" - #Soundcloud = "xxxx" - #Spotify = "xxxx" - #Bandcamp = "xxxx" - #Paypal = "xxxx" - #Fivehundredpx = "xxxx" - #Mix = "xxxx" - #Goodreads = "xxxx" - #Lastfm = "xxxx" - #Foursquare = "xxxx" - #Hackernews = "xxxx" - #Kickstarter = "xxxx" - #Patreon = "xxxx" - #Steam = "xxxx" - #Twitch = "xxxx" - #Strava = "xxxx" - #Skype = "xxxx" - #Whatsapp = "xxxx" - #Zhihu = "xxxx" - #Douban = "xxxx" - #Angellist = "xxxx" - #Slidershare = "xxxx" - #Jsfiddle = "xxxx" - #Deviantart = "xxxx" - #Behance = "xxxx" - #Dribble = "xxxx" - #Wordpress = "xxxx" - #Vine = "xxxx" - #Googlescholar = "xxxx" - #Researchgate = "xxxx" - #Mastodon = "xxxx" - #Thingiverse = "xxxx" - #Devto = "xxxx" - #Gitea = "xxxx" - #XMPP = "xxxx" - #Matrix ="xxxx" - - # 文章页面的分享信息设置 - [params.share] - enable = true - Twitter = true - Facebook = true - Reddit = true - #Linkedin = true - #Pinterest = true - #HackerNews = true - #Mix = true - #Tumblr = true - #VKontakte = true - #Weibo = true - - # 出版者信息，仅用于 SEO - [params.publisher] - name = "xxxx" - [params.publisher.logo] - url = "logo.png" - width = 127 - height = 40 - - # 网站图标信息，仅用于 SEO - [params.logo] - url = "logo.png" - width = 127 - height = 40 - - # 网站图标信息，仅用于 SEO - [params.image] - url = "cover.png" - width = 800 - height = 600 - - # Disqus 评论系统设置 (https://disqus.com/) - [params.disqus] - # Disqus 的用户名，用来在文章中启用 Disqus 评论系统 - shortname = "dillonzq" - - # Gittalk 评论系统设置 (https://github.com/gitalk/gitalk) - [params.gitalk] - owner = "" - repo = "" - clientId = "" - clientSecret = "" - - # Valine 评论系统设置 (https://github.com/xCss/Valine) - [params.valine] - enable = false - appId = "" - appKey = "" - notify = false - verify = true - avatar = "mp" - placeholder = "你的评论 ..." - visitor = true - recordIP = true - - # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments) - [params.facebook] - enable = false - width = "100%" - numPosts = 10 - appId = "" - languageCode = "en_US" - -# 隐私信息设置 (https://gohugo.io/about/hugo-and-gdpr/) -[privacy] - [privacy.googleAnalytics] - anonymizeIP = true - - [privacy.youtube] - privacyEnhanced = true - -# 用于输出 Markdown 格式文档的设置 -[mediaTypes] - [mediaTypes."text/plain"] - suffixes = ["md"] - -# 用于输出 Markdown 格式文档的设置 -[outputFormats.MarkDown] - mediaType = "text/plain" - isPlainText = true - isHTML = false - -# 用于 Hugo 输出文档的设置 -[outputs] - home = ["HTML", "RSS"] - page = ["HTML", "MarkDown"] - section = ["HTML", "RSS"] - taxonomy = ["HTML", "RSS"] - taxonomyTerm = ["HTML"] diff --git a/exampleSite/zh/config/css/_custom.scss b/exampleSite/zh/config/css/_custom.scss deleted file mode 100644 index 96aca03a0..000000000 --- a/exampleSite/zh/config/css/_custom.scss +++ /dev/null @@ -1,15 +0,0 @@ -// ============================== -// Custom style -// 自定义样式 -// ============================== -// You can override the variables in assets/css/_variables.scss to customize the style -// 您可以覆盖 assets/css/_variables.scss 中的变量以自定义样式 - -@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); - -$global-font-family: Lato, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft Yahei, Segoe UI, Helvetica, Arial, sans-serif, Segoe UI Emoji; - - -@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext'); - -$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace; diff --git a/exampleSite/zh/content/about.md b/exampleSite/zh/content/about.md deleted file mode 100644 index 8bc3ba66e..000000000 --- a/exampleSite/zh/content/about.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: "关于 LoveIt" -date: 2019-08-02T11:04:49+08:00 -draft: false ---- - -[LoveIt :(far fa-heart):](https://github.com/dillonzq/LoveIt) 是一个由 [Dillon](https://dillonzq.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。 - -它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。 - - - -### 特性 - -#### 性能和 SEO - -* :(fas fa-rocket): 性能优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分 -* :(fab fa-searchengin): 使用基于 JSON-LD 格式 的 SEO SCHEMA 文件进行 SEO 优化 -* :(fab fa-google): 支持 [Google Analytics](https://analytics.google.com/analytics) -* :(fas fa-search): 支持搜索引擎的网站验证 (Google, Bind, Yandex and Baidu) -* :(fas fa-tachometer-alt): 支持所有第三方库的 CDN -* :(far fa-images): 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为懒加载 - -#### 外观和布局 - -* :(fas fa-desktop): / :(fas fa-mobile): 响应式布局 -* :(fas fa-moon): / :(fas fa-sun): 模式 -* :(fas fa-layer-group): 页面和列表保持一致的视觉样式 -* :(fas fa-ellipsis-h): 支持分页 -* :(far fa-list-alt): 易用和自动展开的文章目录，同时适配移动端 -* :(fas fa-language): 支持多语言和国际化 -* :(fab fa-css3-alt): 美观的 CSS 动画 - -#### 社交和评论系统 - -* :(far fa-user): 支持 [Gravatar](https://gravatar.com) 头像 -* :(fas fa-user-circle): 支持本地头像 -* :(far fa-id-card): 支持多达 54 种社交链接 -* :(fas fa-share-square): 支持文章分享 -* :(far fa-comment): 支持 [Disqus](https://disqus.com) 评论系统 -* :(far fa-comment-dots): 支持 [Gitalk](https://github.com/gitalk/gitalk) 评论系统 -* :(far fa-comment-alt): 支持 [Valine](https://valine.js.org/) 评论系统 - -#### 扩展功能 - -* :(fas fa-code): 基于 Hugo 使用的 chroma 进行代码高亮 -* :(fab fa-font-awesome): 使用 [Font Awesome](https://fontawesome.com/) 图标的扩展 Markdown 语法 -* :(fas fa-square-root-alt): 支持基于 [Katex](https://katex.org/) 的数学公式 -* :(fas fa-project-diagram): 支持基于 [mermaid](https://github.com/knsv/mermaid) 的图表和流程图生成功能 -* :(fas fa-music): 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌音乐播放器 -* :(fas fa-tv): 支持内嵌 Bilibili 视频 -* :(far fa-bell): 支持多种提醒样式的 shortcode -* :(fas fa-align-left): 支持自定义对齐和浮动方式的 shortcode -* :(fas fa-i-cursor): 支持基于 [TypeIt](https://typeitjs.com/) 的打字动画 -* :(far fa-clock): 支持基于 [jQuery.countdown](https://github.com/hilios/jQuery.countdown) 的倒计时动画 -* :(fas fa-arrow-up): 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的回到顶部动画 -* ... - -### 许可协议 - -LoveIt 根据 MIT 许可协议授权。 - -更多信息请查看 [LICENSE 文件](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)。 - -感谢以下在主题中使用过的项目的作者： - -* [Font Awesome](https://fontawesome.com/) -* [Animate.css](https://daneden.github.io/animate.css/) -* [lazysizes](https://github.com/aFarkas/lazysizes) -* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) -* [TypeIt](https://typeitjs.com/) -* [jQuery](https://github.com/jquery/jquery) -* [jQuery.countdown](https://github.com/hilios/jQuery.countdown) -* [Katex](https://katex.org/) -* [mermaid](https://github.com/knsv/mermaid) -* [APlayer](https://github.com/MoePlayer/APlayer) -* [MetingJS](https://github.com/metowolf/MetingJS) -* [Gitalk](https://github.com/gitalk/gitalk) -* [Valine](https://valine.js.org/) diff --git a/exampleSite/zh/content/posts/Basic-Markdown-Preview.md b/exampleSite/zh/content/posts/Basic-Markdown-Preview.md deleted file mode 100644 index 86b94aacb..000000000 --- a/exampleSite/zh/content/posts/Basic-Markdown-Preview.md +++ /dev/null @@ -1,943 +0,0 @@ ---- -author: "" -author_link: "" -title: "Markdown 基本语法预览" -date: 2019-08-25T16:22:42+08:00 -lastmod: 2019-08-25T16:22:42+08:00 -draft: false -description: "这是一篇用于预览 Markdown 基本语法的文章。" -show_in_homepage: true -description_as_summary: false -license: "" - -tags: [ - "Hugo", - "主题", -] -categories: [ - "预览", -] - -featured_image: "" -featured_image_preview: "" - -comment: true -toc: true -auto_collapse_toc: true -math: true ---- - -这是一篇用于预览 :(fab fa-markdown): Markdown 基本语法的文章。 - -文章内容基于 [GitHub Flavored Markdown Spec](https://github.github.com/gfm)。 - -不包含复杂的规则说明，仅仅展示 GFM 所约定的 Markdown 基本语法。 - - - -## 1 引言 - -:(fab fa-markdown): **Markdown** 是一种用于编写结构化文档的纯文本格式。它基于电子邮件和论坛文章的格式所约定。 -它由 John Gruber (在 Aaron Swartz 的帮助下)开发，于 2004 年以语法描述和用于将 Markdown 转换为 HTML 的 Perl 脚本 (Markdown.pl) 的形式发布。 - -在接下来的十年中，许多实现被开发出来。一些用脚注、表和其他文档元素的约定扩展了原始 Markdown 语法。 -有些允许 Markdown 文档以 HTML 以外的格式呈现。 像 reddit，StackOverflow 和 GitHub 这样的网站有上百万的用户在使用 Markdown。 -Markdown 开始被应用于网络以外的领域，包括作者书籍、文章、幻灯片、信件和课堂笔记。 - -## 2 块和内联元素 - -我们可以把一个文档看成一系列的块，如段落、引用、列表、标题和代码块。 - -有些块(如引号和列表)可以包含其它的块，即 **容器块**； -其他的块(如标题和段落)则包含内联元素(如文本、链接、强调、图像、内联代码等)，即 **叶子块**。 - -块的符号总是优先于内联元素的符号。例如： - -```markdown -- `one -- two` -``` - -- `one -- two` - -## 3 叶子块 - -本节描述用于组成 Markdown 文档的不同类型的叶子块。 - -### 3.1 换行符 - -```markdown -*** ------- - ____ -``` - -*** ------- - ____ - -### 3.2 标题 - -{{% admonition "note" "关于 ATX 风格标题和 Setext 风格标题" %}} -本文只展示 ATX 风格标题，关于 Setext 风格标题的介绍请参考 [GFM Setext headings 说明](https://github.github.com/gfm/#setext-heading)。 - -笔者不推荐在 Hugo 的 Markdown 文档中使用 Setext 风格标题。 -{{% /admonition %}} - -```markdown -## H2 二级标题 -### H3 三级标题 -#### H4 四级标题 -##### H5 五级标题 -###### H6 六级标题 -``` - -## H2 二级标题 - -### H3 三级标题 - -#### H4 四级标题 - -##### H5 五级标题 - -###### H6 六级标题 - -### 3.3 代码块 - -{{% admonition "note" "关于缩进式代码块和围栏式代码块" %}} -本文只展示围栏式代码块，关于缩进式代码块的介绍请参考 [GFM Indented code blocks 说明](https://github.github.com/gfm/#indented-code-block)。 - -笔者不推荐在 Hugo 的 Markdown 文档中使用缩进式代码块。 -{{% /admonition %}} - -``````markdown -``` -foo() -``` - -~~~ -foo() -~~~ - -```` -foo() -```` - -```ruby -def foo(x) - return 3 -end -``` -`````` - -``` -foo() -``` - -~~~ -foo() -~~~ - -```` -foo() -```` - -```ruby -def foo(x) - return 3 -end -``` - -{{< highlight go "hl_lines=3 5-7,linenostart=20" >}} -package main - -import "fmt" - -func main() { - fmt.Println("Hello, 世界") -} -{{< / highlight >}} - -### 3.4 段落 - -```markdown -这是一个段落。 -这还是之前段落的一部分。 - -这是新的段落。 -``` - -这是一个段落。 -这还是之前段落的一部分。 - -这是新的段落。 - -### 3.5 引用链接的定义 - -```markdown -[foo]: /url "title" - -[foo] - -[bar]: /url - -[bar] -``` - -[foo]: /url "title" - -[foo] - -[bar]: /url - -[bar] - -### 3.6 空白行 - -块之间的空白行将被忽略，除了它们在确定列表是紧还是松时所起的作用。 - -文档开头和结尾的空行也会被忽略。 - -## 4 容器块 - -### 4.1 引用 - -```markdown -> Foo -> -> - **bar** -> - baz -``` - -> Foo -> -> - **bar** -> - baz - -### 4.2 无序列表 - -```markdown -- 项目 1 - * 项目 A - - 项目 B - 一些说明 - + 项目 a - * 项目 b - - 项目 c - + 项目 C -+ 项目 2 -* 项目 3 -``` - -- 项目 1 - * 项目 A - - 项目 B - 一些说明 - + 项目 a - * 项目 b - - 项目 c - + 项目 C -+ 项目 2 -* 项目 3 - -### 4.3 有序列表 - -```markdown -1. 项目 1 - 1. 项目 A - 2. 项目 B - 一些说明 - 1. 项目 a - 2. 项目 b - 3. 项目 c - 3. 项目 C -2. 项目 2 -3. 项目 3 -``` - -1. 项目 1 - 1. 项目 A - 2. 项目 B - 一些说明 - 1. 项目 a - 2. 项目 b - 3. 项目 c - 3. 项目 C -2. 项目 2 -3. 项目 3 - -### 4.4 任务列表 - -```markdown -- [ ] 任务 1 - * [X] 任务 A - - 任务 B - + [ ] 任务 a - * [ ] 任务 b - - [X] 任务 c - + [X] 任务 C -+ [ ] 任务 2 -* [X] 任务 3 -``` - -- [ ] 任务 1 - * [X] 任务 A - - 任务 B - + [ ] 任务 a - * [ ] 任务 b - - [X] 任务 c - + [X] 任务 C -+ [ ] 任务 2 -* [X] 任务 3 - -### 4.5 表格 - -```markdown -| _颜色_ | 水果 | 蔬菜 | -| ---------- |:---------------:| -----------:| -| 红色 | *苹果* | 辣椒 | -| ~~橙色~~ | 橘子 | **胡萝卜** | -| 绿色 | ~~***梨子***~~ | 菠菜 | -``` - -| _颜色_ | 水果 | 蔬菜 | -| ---------- |:---------------:| -----------:| -| 红色 | *苹果* | 辣椒 | -| ~~橙色~~ | 橘子 | **胡萝卜** | -| 绿色 | ~~***梨子***~~ | 菠菜 | - - -## 3. 页内锚 - -```markdown -[脚注](#footnote) - -## 4. 脚注 {#footnote} -``` - -[脚注](#footnote) - -## 4. 脚注 {#footnote} - -```markdown -这是一个基本的数字脚注[^1] - -带有 "label" 标签的脚注[^label] - -下定义的脚注[^!DEF] - -带有链接的脚注[^pa] - -[^1]: 这是一个基本的数字脚注 -[^label]: 带有 "label" 标签的脚注 -[^pa]: [LoveIt 主题](https://github.com/dillonzq/LoveIt) -[^!DEF]: 下定义的脚注 -``` - -这是一个基本的数字脚注[^1] - -带有 "label" 标签的脚注[^label] - -下定义的脚注[^!DEF] - -带有链接的脚注[^pa] - -[^1]: 这是一个基本的数字脚注 -[^label]: 带有 "label" 标签的脚注 -[^pa]: [LoveIt 主题](https://github.com/dillonzq/LoveIt) -[^!DEF]: 下定义的脚注 - -## 5. 内联格式 - -```markdown -`内联代码块` - -ctrl+alt+del - -**加粗 1** 和 __加粗 2__ - -*倾斜 1* 和 _倾斜 2_ - -~~删除线~~ - -***加粗 1 和 倾斜 1*** - -___加粗 2 和 倾斜 2___ - -__*加粗 2 和 倾斜 1*__ - -**_加粗 1 和 倾斜 2_** - -~~*删除线 倾斜 1*~~ 和 *~~删除线 倾斜 2~~* - -~~_删除线 倾斜 2_~~ 和 _~~删除线 倾斜 2~~_ - -~~**删除线 加粗 1**~~ 和 **~~删除线 加粗 1~~** - -~~__删除线 加粗 2__~~ 和 __~~删除线 加粗 2~~__ - -~~***删除线 倾斜 1 加粗 1***~~ 和 ***~~删除线 倾斜 1 加粗 1~~*** - -~~___删除线 倾斜 2 加粗 2___~~ 和 ___~~删除线 倾斜 2 加粗 2~~___ - -**~~*删除线 倾斜 1 加粗 1*~~** 和 *~~**删除线 倾斜 1 加粗 1**~~* - -__~~_删除线 倾斜 2 加粗 2_~~__ 和 _~~__删除线 倾斜 2 加粗 2__~~_ - -**~~_删除线 倾斜 2 加粗 1_~~** 和 _~~**删除线 倾斜 2 加粗 1**~~_ - -__~~*删除线 倾斜 1 加粗 2*~~__ 和 *~~__删除线 倾斜 1 加粗 2__~~* -``` - -`内联代码块` - -ctrl+alt+del - -**加粗 1** 和 __加粗 2__ - -*倾斜 1* 和 _倾斜 2_ - -~~删除线~~ - -***加粗 1 和 倾斜 1*** - -___加粗 2 和 倾斜 2___ - -__*加粗 2 和 倾斜 1*__ - -**_加粗 1 和 倾斜 2_** - -~~*删除线 倾斜 1*~~ 和 *~~删除线 倾斜 2~~* - -~~_删除线 倾斜 2_~~ 和 _~~删除线 倾斜 2~~_ - -~~**删除线 加粗 1**~~ 和 **~~删除线 加粗 1~~** - -~~__删除线 加粗 2__~~ 和 __~~删除线 加粗 2~~__ - -~~***删除线 倾斜 1 加粗 1***~~ 和 ***~~删除线 倾斜 1 加粗 1~~*** - -~~___删除线 倾斜 2 加粗 2___~~ 和 ___~~删除线 倾斜 2 加粗 2~~___ - -**~~*删除线 倾斜 1 加粗 1*~~** 和 *~~**删除线 倾斜 1 加粗 1**~~* - -__~~_删除线 倾斜 2 加粗 2_~~__ 和 _~~__删除线 倾斜 2 加粗 2__~~_ - -**~~_删除线 倾斜 2 加粗 1_~~** 和 _~~**删除线 倾斜 2 加粗 1**~~_ - -__~~*删除线 倾斜 1 加粗 2*~~__ 和 *~~__删除线 倾斜 1 加粗 2__~~* - -## 6. 图片 - -```markdown -Web image - - -Local image - - -contact@revolunet.com - -@revolunet - -Issue #1 - -https://github.com/revolunet/sublimetext-markdown-preview/ - -This is a link https://github.com/revolunet/sublimetext-markdown-preview/. - -This is a link "https://github.com/revolunet/sublimetext-markdown-preview/". - -With this link (https://github.com/revolunet/sublimetext-markdown-preview/), it still works. -``` - -Web image - - -Local image - - -
{b} : {c} ({d}%)" -}, -legend: { - orient: 'vertical', - left: 'left', - data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] -}, -series : [ - { - name: '访问来源', - type: 'pie', - radius : '55%', - center: ['50%', '60%'], - data:[ - {value:335, name:'直接访问'}, - {value:310, name:'邮件营销'}, - {value:234, name:'联盟广告'}, - {value:135, name:'视频广告'}, - {value:1548, name:'搜索引擎'} - ], - itemStyle: { - emphasis: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } -] -{{< /dev/echarts >}} - -## Test Mermaid - -{{< mermaid >}} -classDiagram - Animal <|-- Duck - Animal <|-- Fish - Animal <|-- Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } -{{< /mermaid >}} - -## Test Ruby - -人最重要的特点是会思考，建站初衷无非是保存思维的电子快照。 -当然各种文档工具亦或是简单的文本编辑器也能随时记录点滴， -选择建个人网站无非是想满足 [技术爱好者]^(Technology enthusiast) 的偏执。 - -## Test Music - -## Test Toc - -Toc - -### Toc1 - -Toc - -#### Toc 1-1 - -Toc - -#### Toc 1-2 - -Toc - -#### Toc 1-3 - -Toc - -### Toc2 - -Toc - -#### Toc 2-1 - -Toc - -#### Toc 2-2 - -Toc - -### Toc3 - -Toc - -## Test Table - -| Tables | Are | Cool | -| :------------ |:-------------:| -----:| -| col 3 is | right-aligned | $1600 | -| col 2 is | centered | $12 | -| zebra stripes | are neat | $1 | - -## Test kbd - -ctrl+alt+del - -## Test Mixed Lists - -Mixed Lists - -- item 1 - * [X] item A - * [ ] item B - more text - 1. item a - 2. itemb - 3. item c - * [X] item C -- item 2 -- item 3 - -Really Mixed Lists - -- item 1 - * [X] item A - - item B - more text - 1. item a - + itemb - + [ ] item c - 1. item C -1. item 2 -- [X] item 3 - -## Test fa (Font Awesome) - -:(fab fa-weixin fa-2x): - -## Test Footnote - -This is a footnote[^1] - -[^1]: This is a footnote - -## Test Admonition - -{{% admonition quote %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition quote "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition example "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition bug "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition danger "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition failure "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition warning "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition question "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition success "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition tip "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition info "I'm title!" true %}} -**biu biu biu.** -{{% /admonition %}} - -{{% admonition note "I'm title!" false %}} -**biu biu biu.** -{{% /admonition %}} - -{{% admonition type="abstract" title="Test Admonition" %}} -This is a Admonition. -{{% /admonition %}} - -## Test Highlight - -`ls` 命令 - -```go -// You can edit this code! -// Click here and start typing. -package main - -import "fmt" - -func main() { - fmt.Println("Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界") -} -``` - -- This is a list that contains multiple code blocks. - - - Here is an indented block - - ```Code - This will still be parsed - as a normal indented code block. - ``` - - - Here is a fenced code block: - - ```Code - This will still be parsed - as a fenced code block. - ``` - - > ```Code - > Blockquotes? - > Not a problem! - > ``` - -## Test Typeit - -{{< typeit group="test" tag="h3" >}} -Here is a story about love... -{{< /typeit >}} - -{{< typeit group="test" code="java" >}} -u.accepted(); // [2018/01/05](/since/) special -int a = 1; -{{< /typeit >}} - -## Test Img - - - -## Test Align - -{{% align right %}} -**Test Text** -{{% /align %}} - -## Test Katex - -$$ c = \pm\sqrt{a^2 + b^2} $$ - -Left \\( c = \pm\sqrt{a^2 + b^2} \\) Right - -Left $ c = \pm\sqrt{a^2 + b^2} $ Right - -$ \ce{CO2 + C -> 2 CO} $ - -$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $ diff --git a/exampleSite/zh/static/android-chrome-192x192.png b/exampleSite/zh/static/android-chrome-192x192.png deleted file mode 100644 index 87ba30b8c..000000000 Binary files a/exampleSite/zh/static/android-chrome-192x192.png and /dev/null differ diff --git a/exampleSite/zh/static/android-chrome-512x512.png b/exampleSite/zh/static/android-chrome-512x512.png deleted file mode 100644 index 3e52be3b0..000000000 Binary files a/exampleSite/zh/static/android-chrome-512x512.png and /dev/null differ diff --git a/exampleSite/zh/static/apple-touch-icon.png b/exampleSite/zh/static/apple-touch-icon.png deleted file mode 100644 index 26f95ea87..000000000 Binary files a/exampleSite/zh/static/apple-touch-icon.png and /dev/null differ diff --git a/exampleSite/zh/static/browserconfig.xml b/exampleSite/zh/static/browserconfig.xml deleted file mode 100644 index a47e5a5b8..000000000 --- a/exampleSite/zh/static/browserconfig.xml +++ /dev/null @@ -1,9 +0,0 @@ - -
+
-{{- end -}}
\ No newline at end of file
+{{- end -}}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 1ce94c1c6..cfe5ed3b7 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,11 +1,10 @@
-
- {{- /* Lazyload */ -}}
- {{- $loading := resources.Get "svg/loading.svg" | minify -}}
- 
- {{- $caption := .Title | default .Text -}}
- {{- with $caption -}}
+{{- with .Title -}}
+
+ {{- partial "plugin/image.html" (dict "src" $.Destination "title" $.Title "description" $.Text "lightgallery" true "scratch" ($.Page.Scratch.Get "scratch")) -}}
- {{- . -}}
+ {{- . | safeHTML -}}
- {{- end -}}
-
\ No newline at end of file
+
+{{- else -}}
+ {{- partial "plugin/image.html" (dict "src" .Destination "title" .Title "description" .Text "lightgallery" false "scratch" (.Page.Scratch.Get "scratch")) -}}
+{{- end -}}
diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
index 01f37d199..35e77e87f 100644
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -1,3 +1,2 @@
-
- {{- .Text | safeHTML -}}
-
\ No newline at end of file
+{{- $options := dict "href" .Destination "title" .Title "content" .Text -}}
+{{- partial "plugin/link.html" $options -}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 249ab81ea..90f5b6fbe 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -3,20 +3,42 @@
{{- errorf "\n\nThere are two possible situations that led to this error:\n 1. You haven't copied the config.toml yet. See https://github.com/dillonzq/LoveIt#installation \n 2. You have an incompatible update. See https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n\n有两种可能的情况会导致这个错误发生:\n 1. 你还没有复制 config.toml 参考 https://github.com/dillonzq/LoveIt#installation \n 2. 你进行了一次不兼容的更新 参考 https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n" -}}
{{- end -}}
+{{- $scratch := newScratch -}}
+{{- .Scratch.Set "scratch" $scratch -}}
+{{- if eq hugo.Environment "production" -}}
+ {{- $scratch.Set "production" true -}}
+ {{- $scratch.Set "CDN" .Site.Params.cdn -}}
+{{- end -}}
+
-
+
+
+
{{- block "title" . }}{{ .Site.Title }}{{ end -}}
- {{- partial "head.html" . -}}
+
+
+ {{- partial "head/meta.html" . -}}
+ {{- partial "head/link.html" . -}}
+ {{- partial "head/seo.html" . -}}
{{- /* Check theme isDark before body rendering */ -}}
@@ -32,11 +54,11 @@
{{- /* Dynamic to top button */ -}}
-
+
- {{- /* Load scripts */ -}}
- {{- partial "scripts.html" . -}}
+ {{- /* Load JavaScript scripts and CSS */ -}}
+ {{- partial "assets.html" . -}}
-
\ No newline at end of file
+