自己定义shortcode

我想增加一个功能，就是实现tooltip，希望通过shortcode在这个系统中实现。大致上是这样实现的：第一在orgmode中定义一个macro，然后调用这个macro来布置所需要的html代码；第二步定义以上html代码中用到的css。
因此，我在org文件中定义了如下的macro：

1

#+macro: tooltip @@html:<div class="tooltip">$1<span class="tooltiptext">$2</span></div>@@

这里面用到的两个classes：tooltip和tooltiptex需要定义在css文件中。

在网上搜索后，将如下的css定义放在static目录下面的tooltip.css文件中

 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
27


/*
Tooltip style - copied from https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip
*/

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

并在Param.toml文件中加入下面一行：

1

custom_css = ["css/tooltip.css"]

最后，还需要告诉~hugo~把这个css文件加入html的head里面。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


themes/Zzo/layouts/partials/head/styles.html

{{ $main_options := (dict "targetPath" "css/main.css" "outputStyle" "compressed") }}
{{ $main_template := resources.Get "sass/main.scss" }}
{{ $main_style := $main_template | resources.ExecuteAsTemplate "main_parsed.scss" . | toCSS $main_options | resources.Minify }}
<link rel="stylesheet" href="{{ $main_style.RelPermalink }}">

{{ if .Site.Params.custom_css }}
{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
{{ end }}

{{ if .Site.Params.custom_scss }}
{{ range .Site.Params.custom_scss }}
  {{ $custom_template := resources.Get . }}
  {{ if $custom_template }}
    {{ $custom_style := $custom_template | resources.ToCSS | resources.Minify }}
    <link rel="stylesheet" href="{{ $custom_style.RelPermalink }}">
  {{ end }}
{{ end }}
{{ end }}

如此这样，应该工作了。不过，由于一些细小的原因，目前我的设置还没有完全工作。今后总有一天会找出原因，现在不想花大量时间去解决它。¹。点击下面的term，会出现definition。

Org使用macro的方式是：

1

{{{tooltip(term,definition)}}}

不除妄想不求真 :永嘉证道歌:@禅宗:

:EXPORT_FILE_NAME: 2022-02-19T07:15
:EXPORT_TITLE: “不除妄想不求真”
:EXPORT_HUGO_SECTION: zh/posts
:EXPORT_DATE: 2022-02-19T07:15:05-0500
:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :key1 ‘(elem11 elem12)

问题已经解决，原因是custom_css用的是absURL，应该都用relURL链接。为什么会出这个问题，我估计跟host site的服务器有关，具体原因不得而知，但是现在工作了，如下面的term和definition展示 ↩︎

自己定义shortcode

相关内容