From d4a052e86f33ced79b9f4d09aeee0b1c43ef1f23 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 31 May 2022 01:45:54 -0700 Subject: Improve imghover shortcode, examples, page scores --- content/overview-embedded-videos.md | 23 ---------------- content/overview-embedded-vimeo.md | 17 ++++++++++++ content/overview-embedded-youtube.md | 17 ++++++++++++ .../overview-fonts-imagehover-shortcode/index.md | 18 ++++++++++-- content/overview-images/index.md | 10 ++++--- content/overview-markdown-syntax.md | 32 +++++++++++----------- content/overview-math.md | 8 +++--- 7 files changed, 75 insertions(+), 50 deletions(-) delete mode 100644 content/overview-embedded-videos.md create mode 100644 content/overview-embedded-vimeo.md create mode 100644 content/overview-embedded-youtube.md (limited to 'content') diff --git a/content/overview-embedded-videos.md b/content/overview-embedded-videos.md deleted file mode 100644 index aa9074e..0000000 --- a/content/overview-embedded-videos.md +++ /dev/null @@ -1,23 +0,0 @@ -+++ -title = "Embedded Youtube & Vimeo Videos" -date = 2021-05-07 - -[taxonomies] -categories = ["Features"] -tags = ["shortcodes","video"] -+++ - -Zola has many shortcodes, and new are easily added, this example shows vimeo and youtube. - - -## Vimeo - -with `vm(id="id_here")` - -{{ vm(id="514402648") }} - -## Youtube - -with `yt(id="the_id_here")` - -{{ yt(id="32gyFIWecuw") }} diff --git a/content/overview-embedded-vimeo.md b/content/overview-embedded-vimeo.md new file mode 100644 index 0000000..e9dc03d --- /dev/null +++ b/content/overview-embedded-vimeo.md @@ -0,0 +1,17 @@ ++++ +title = "Embedded Vimeo Videos" +date = 2021-05-07 + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","video"] ++++ + +Zola has many shortcodes, and new are easily added, this example shows vimeo. + + +## Vimeo + +with `vm(id="id_here" title="Youtube - Safe Systems Programming in Rust")` + +{{ vm(id="514402648" title="Youtube - Safe Systems Programming in Rust") }} diff --git a/content/overview-embedded-youtube.md b/content/overview-embedded-youtube.md new file mode 100644 index 0000000..b9787be --- /dev/null +++ b/content/overview-embedded-youtube.md @@ -0,0 +1,17 @@ ++++ +title = "Embedded Youtube Videos" +date = 2021-05-08 + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","video"] ++++ + +Zola has many shortcodes, and new are easily added, this example shows youtube. + + +## Youtube + +with `yt(id="the_id_here" title="Vimeo - Gnome vs KDE")` + +{{ yt(id="32gyFIWecuw" title="Vimeo - Gnome vs KDE") }} diff --git a/content/overview-fonts-imagehover-shortcode/index.md b/content/overview-fonts-imagehover-shortcode/index.md index 655b6cd..448c7f0 100644 --- a/content/overview-fonts-imagehover-shortcode/index.md +++ b/content/overview-fonts-imagehover-shortcode/index.md @@ -7,9 +7,21 @@ categories = ["Features"] tags = ["shortcodes","image"] +++ -This shortcode accepts an array of images, the first element is the default, the remaining images are hover images. +This shortcode accepts an array of images, the first element is the one you are comparing to all the others. + +The first image in the array is displayed, hover you mouse over the image to display the one your comparing to. -with `imagehover(sources=["file1.jpg", "file2.jpg", "file3.jpg"])` +This can also be used to compare just one picture with another by passing only two files in the array: + +`imagehover(sources=["regular.png", "hover.png"] w=560 h=650 p=45` + +To Compare many images just add more images to the array: + +`imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"] w=560 h=650 p=45` + +- w is the width of the image. +- h is the height of the image. +- p is the percent size that you want the image to use on the page.(50 is the default) -{{ imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"]) }} +{{ imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"] w=560 h=650 p=45) }} diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 0e623e5..d253932 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -1,6 +1,6 @@ +++ -title = "Images, Direct and Relative Path" -date = 2021-05-08 +title = "Image Examples" +date = 2021-05-09 [taxonomies] categories = ["Features"] @@ -9,12 +9,14 @@ tags = ["images"] Images can be embed using direct or relative paths. -Use `img()` to specify the relative path of image: +Use `img(path="./image.jpg", alt="Papaya")` to specify the relative path of image: -{{ img(path="./image.jpg", alt="") }} +{{ img(path="./image.jpg", alt="Papaya") }} This is an example note with direct image, without using shortcode: +`![Rust](rust.png)` + ![Rust](rust.png) This is an svg image: diff --git a/content/overview-markdown-syntax.md b/content/overview-markdown-syntax.md index a289f2a..add1d58 100644 --- a/content/overview-markdown-syntax.md +++ b/content/overview-markdown-syntax.md @@ -12,7 +12,7 @@ toc = true This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with CSS in a Zola theme. -## Headings +# Headings The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. @@ -24,7 +24,7 @@ headings. `

` is the highest section level while `

` is the lowest. ##### H5 ###### H6 -## Paragraph +# Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma @@ -40,18 +40,18 @@ tiustia prat. Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. -## Blockquotes +# Blockquotes The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. -#### Blockquote without attribution +## Blockquote without attribution > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use *Markdown syntax* within a blockquote. -#### Blockquote with attribution +## Blockquote with attribution > Don't communicate by sharing memory, share memory by communicating.
> — Rob Pike[^1] @@ -59,7 +59,7 @@ and optionally with in-line changes such as annotations and abbreviations. > All men by nature desire to know.
> ― Aristotle[^2] -## Tables +# Tables Tables aren't part of the core Markdown spec, but Zola supports them out-of-the-box. @@ -72,13 +72,13 @@ out-of-the-box. John | 59 Kerry | 23 -#### Inline Markdown within tables +## Inline Markdown within tables | Italics | Bold | Code | StrikeThrough | | -------- | -------- | ------ | ----------------- | | *italics* | **bold** | `code` | ~~strikethrough~~ | -## Foldable Text +# Foldable Text
Title 1 @@ -90,13 +90,13 @@ out-of-the-box.

Stay awhile, and listen!

-## Code Blocks +# Code Blocks Code blocks.. ❤️ with automatic syntax highlighting ✨‍ See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting/) for options. -#### Code block with backticks +## Code block with backticks ```html @@ -111,25 +111,25 @@ See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting ``` -#### Inline Code block +## Inline Code block If we want, we can also `specify inline code` which is useful for `the small stuff`. -## List Types +# List Types -#### Ordered List +## Ordered List 1. First item 2. Second item 3. Third item -#### Unordered List +## Unordered List - List item - Another item - And another item -#### Nested list +## Nested list - Fruit - Apple @@ -139,7 +139,7 @@ If we want, we can also `specify inline code` which is useful for `the small stu - Milk - Cheese -## Other Elements — abbr, sub, sup, kbd, mark, link +# Other Elements — abbr, sub, sup, kbd, mark, link GIF is a bitmap image format. diff --git a/content/overview-math.md b/content/overview-math.md index df1b8b4..d8f50da 100644 --- a/content/overview-math.md +++ b/content/overview-math.md @@ -1,5 +1,5 @@ +++ -title = "Mathematical Notations Support" +title = "Mathematical Notations" date = 2021-05-05 updated = 2022-01-01 [taxonomies] @@ -13,7 +13,7 @@ You can use [$\KaTeX$](https://katex.org) to render mathematical notations. You can enable the $\KaTeX$ support globally, per-section or per-page basis. -### Enable Globally +## Enable Globally To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml` at your site root. Now every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). @@ -23,7 +23,7 @@ at your site root. Now every section and page of your site will load the KaTeX [ math = true ``` -### Per-section Basis +## Per-section Basis To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`. Now every page under this section will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). @@ -35,7 +35,7 @@ math = true +++ ``` -### Per-page Basis +## Per-page Basis To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's frontmatter. Now this page will load the $\KaTeX$ [autorender extension](https://katex.org/docs/autorender.html). -- cgit v1.3.1