Hugo W3 Simple テーマショートコードデモ

2018-11-09 998 words 2 mins read

この記事はこれらのショートコードのデモです。

## Info ショートコード We can easily display 簡単に表示することができます info 情報を with this code below on markdown file Markdown のファイル上で

Code for info shortcodes

{{< info >}}
Blue often indicates a neutral informative change or action.
{{</info >}}

It それは will display 表示します default title with Information!:

Information!

Blue often indicates a neutral informative change or action.

次のコードを使ってタイトルを設定することができます:

Code for info shortcodes with title

{{< info title="W3.CSS is a CSS Framework!">}}
W3.CSS is a modern CSS framework with built-in responsiveness. It supports responsive mobile first design by default, and it is smaller and faster than similar CSS frameworks.
{{< /info >}}

It will display the title with your set:

W3.CSS is a CSS Framework!

W3.CSS is a modern CSS framework with built-in responsiveness. It supports responsive mobile first design by default, and it is smaller and faster than similar CSS frameworks.

Warning ショートコード

We can easily display warning 警告を with this code below 下のコードを使って on markdown file Markdown ファイル上で

Code for warning shortcodes

{{< warning >}}
Yellow often indicates a warning that might need attention.
{{</warning >}}

It will display default title with Warning!:

Warning!

Yellow often indicates a warning that might need attention.

You can set title with the following code:

Code for warning shortcodes with title

{{< warning title="Do Not Bypass This Theme!">}}
W3-simple is a Hugo theme powered by W3.css!
{{< /warning >}}

It will display the title with your set:

Do Not Bypass This Theme!

W3-simple is a Hugo theme powered by W3.css!

Colorcode ショートコード

W3-simple テーマは use 使います w3colorcode.js を to display code colors. コードの色を表示するために

To use this function, この関数を使うには you should add w3codecolor: true を 追加するべきです。 to your post. ポストに対して

Although w3colorcode.js is much smaller than other js, but it is still more than 20kb. So I do not want every page include this js file if no need. 必用がなければ

w3colorcode.js は is also built by W3school

It それは supports サポートしています html, js, java, css, sql, python at this moment. この時点で

I just changed a little 少し to add support to bash script.

Colorcode shortcodes use 使います mode と title を to set up parameters. if not set, 設定されていなかったら default color mode is bash and no title. タイトルはありません

Code for default colorcode shortcodes

{{< colorcode >}}
your code here
{{</colorcode >}}

The demo for default colorcode shortcodes:
To install w3-simple theme, just use the command below
cd themes
git clone https://github.com/jesselau76/hugo-w3-simple.git

Code for html colorcode shortcodes

{{< colorcode mode="htmlHigh" title="Demo for html color" >}}
your code here
{{</colorcode >}}

Demo for html color

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Code for css colorcode shortcodes

{{< colorcode mode="cssHigh" title="Demo for css color" >}}
your code here
{{</colorcode >}}

Demo for css color

body {
background-color: #d0e4fe;
}

h1 {
color: orange;
text-align: center;
}

p {
font-family: "Times New Roman";
font-size: 20px;
}

Code for js colorcode shortcodes

{{< colorcode mode="jsHigh" title="Demo for js color" >}}
your code here
{{</colorcode >}}

Demo for js color

function w3CodeColor() {
var x, i, j, k, l, modes = ["html", "js", "java", "css", "sql", "python"];
if (!document.getElementsByClassName) {return;}
k = modes.length;
for (j = 0; j < k; j++) {
x = document.getElementsByClassName(modes[j] + "High");
l = x.length;
for (i = 0; i < l; i++) {
x[i].innerHTML = w3CodeColorize(x[i].innerHTML, modes[j]);
}
}
}

Code for sql colorcode shortcodes

{{< colorcode mode="sqlHigh" title="Demo for sql color" >}}
your code here
{{</colorcode >}}

Demo for sql color

SELECT column1, column2, ...
FROM table_name
ORDER BY column1, column2, ... ASC|DESC;

Code for python colorcode shortcodes

{{< colorcode mode="pythonHigh" title="Demo for python color" >}}
your code here
{{</colorcode >}}

Demo for python color

import json
# some JSON:
x = '{ "name":"John", "age":30, "city":"New York"}'
# parse x:
y = json.loads(x)
# the result is a Python dictionary:
print(y["age"])

quote ショートコード

このショートコードを使って引用を表示することができます:

Code for quote shortcodes

{{< quote >}}
Make it as simple as possible, but not simpler.
{{< /quote >}}

It will display quote with default width 100% style and no author:

Make it as simple as possible, but not simpler.

You can also set 設定することもできます width and author with shortcodes:

Code for quote shortcodes with % width

{{< quote width="61.8%" author="Albert Einstein" >}}
Make it as simple as possible, but not simpler.
{{< /quote >}}


Make it as simple as possible, but not simpler.

--- Albert Einstein

または、 width に対して px を設定することができます:

Code for quote shortcodes with px width

{{< quote width="300px" author="Albert Einstein" >}}
Make it as simple as possible, but not simpler.
{{< /quote >}}

Make it as simple as possible, but not simpler.

--- Albert Einstein

Test first picture without thumbnail set

ありがとう to Unsplash

Tags: hugo

Related Articles:


❮ ox-Hugo を使う My First Post ❯

We notice you're using an adblocker. If you like our webite please keep us running by whitelisting this site in your ad blocker. We’re serving quality, related ads only. Thank you!

I've whitelisted your website.

Not now
This website uses cookies to ensure you get the best experience on our website. Learn more Got it