記事の書くときのTips
概要文
<!--more-->
を1行挟むことでその上の記述だけをページ概要に表示できる
記事の書くときのTips
<!--more-->
hogehoge
例えば上のようにすることで、記事を一覧表示した際「hogehoge」は表示されずに「記事の書くときのTips」だけ見える
リンクカード
はてなのリンクカードを無理やり埋め込んだ。
ショートコードlink-card
で使用可能。
{{< link-card "https://hatenablog.com/" >}}
サイト内リンク
[Usage]({{< relref "/blogs/20221224_usage" >}})
Usage
relrefはコンテンツの相対パスでリンクを作成する。
絶対パスを使うにはrefを使う。
URLがわかっている場合はそのまま指定すればOK
アンカーを使う
同一記事内なら以下のようにする
サイト内リンク
別記事内のアンカーもパスの後ろに繋げばOK
[サイト内リンク]({{< relref "/blogs/20221224_usaget#サイト内リンク" >}})
サイト内リンク
コードブロック
普通のマークダウンと同様に書けば良い。
:
をつければタイトルもつけられる
int main(void) {
int n = 10;
for (int i = 0; i < 10; i++) {
printf("%d", i);
}
}
高度なコードブロック
このテーマ(tranquilpeak)には専用のコードブロックが用意されている。
ショートコードcodeblock
やtabbed-codeblock
を用いる。
高度なコードブロック
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
|
function $initHighlight(block, flags) {
try {
if (block.className.search(/\bno\-highlight\b/) != -1)
return processBlock(block.function, true, 0x0F) + ' class=""';
} catch (e) {
/* handle exception */
var e4x =
<div>Example
<p>1234</p></div>;
}
for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
if (checkCondition(classes[i]) === undefined)
return /\d+[\s/]/g;
}
console.log(Array.every(classes, Boolean));
}
|
example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
function $initHighlight(block, flags) {
try {
if (block.className.search(/\bno\-highlight\b/) != -1)
return processBlock(block.function, true, 0x0F) + ' class=""';
} catch (e) {
/* handle exception */
var e4x =
<div>Example
<p>1234</p></div>;
}
for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
if (checkCondition(classes[i]) === undefined)
return /\d+[\s/]/g;
}
console.log(Array.every(classes, Boolean));
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
body:first-of-type pre::after {
content: 'highlight: ' attr(class);
}
body {
background: linear-gradient(45deg, blue, red);
}
}
@import url('print.css');
@page:right {
margin: 1cm 2cm 1.3cm 4cm;
}
@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
}
div.text,
#content,
li[lang=ru] {
font: Tahoma, Chunkfive, sans-serif;
background: url('hatch.png') /* wtf? */; color: #F0F0F0 !important;
width: 100%;
}
|
詳しくはここらへんに書いてある。
ちなみにこのテーマは通常のコードブロックだとハイライトが効かない(Hugoにビルトインのシンタックスハイライトがサポートされていない)ので、上記を使用するのがおすすめ。
(サポートする予定はあるらしい)