博客与建站

hugo 中的文章添加时间线2. hugo-shortcode-timeline的修改

上次说到采用hugo-shortcode-timeline在文章里加时间线，初衷是我为了写工作报告，可是发现在写作时，还要写from time,to time等，可是我只想显示当时的时间，如何办呢？于是想办法改了一下。步骤如下：

一. 在github上下载 hugo-shortcode-timeline
二. 把 hugo-shortcode-timeline目录 copy到当前hugo blog的themes目录下
三. 修改config.toml,把原来的指定主题语句改为

theme = [“你原来的主题名”,”hugo-shortcode-timeline”]

在 themes/hugo-shorcode-timeline/layouts/shortcodes/目录，把even.html 另存为report.html并修改如下：
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
{{$duration := ""}}

{{$to := now }}
{{ if ne (.Get "date") ""}}
    {{$to = time (.Get "date") }}
{{end}}

{{$enabledTime := ne (.Get "date") ""}}

{{if $enabledTime }}
    {{$from := time (.Get "date") }}
    {{$tmonths:= mul ($to.Sub $from).Hours 0.00136986301 }}
    {{$months := mod $tmonths 12 }}
    {{$years := math.Floor (div $tmonths 12)}}
    {{$yearStr := "years"}}
    {{if lt $years 2 }}{{$yearStr = "year"}}{{end}}
    {{$monthStr := "months"}}
    {{if lt $months 2 }}{{$monthStr = "month"}}{{end}}

    {{$duration = ""}}
    {{if gt $years 0 }}{{$duration = printf "%s %.0f %s" $duration $years $yearStr}}{{end}}
    {{if gt $months 0 }}{{$duration = printf "%s %d %s" $duration $months $monthStr}}{{end}}
{{end}}

<div class="container">
    <div class="content collapsible {{ if .Get "collapsed" }}collapsed{{ end }}">
        <div class="title">{{$to.Year}}-{{$to.Month}}-{{$to.Day}}</div>
        {{if $enabledTime }}
        <div class="duration" {{ if eq .Ordinal 0 }} id="duration" {{ end }}>
            {{ if ne .Ordinal 0 }} {{$duration}} {{ end }}
        </div>
        {{ end }}
        <div class="body">{{.Inner}}</div>
    </div>
    
    <div class="date">
        {{ if ne (.Get "date") ""}}
        {{$to.Year}}<br>{{$to.Month}}-{{$to.Day}}
        {{ else }}
            Present
        {{ end }}
    </div>

</div>

{{ if and (eq (.Ordinal) 0) $enabledTime }}
    <script>
        function non0plural(number, name) {
            if (number == 0) {
                return "";
            }
            return number + " " + name + (number > 1 ? "s" : "");
        }

        function monthDiff(d1, d2) {
            let months;
            months = (d2.getFullYear() - d1.getFullYear()) * 12;
            months -= d1.getMonth();
            months += d2.getMonth();
            return months <= 0 ? 0 : months;
        }

        el = document.querySelector("#duration");
        function refresh() {
            const start = new Date({{.Get "from"}});
            const now = new Date();

            const total_months = monthDiff(start, now);
            const months = total_months % 12;
            const years = Math.floor((total_months) / 12);
            el.innerHTML = non0plural(years, "year") + " " + non0plural(months, "month");
        }
        window.setInterval(refresh, 1*1000);
    </script>
{{ end }}

那么在markdown文章中写报告则为

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
{{< timeline >}}

    {{% report date="2023-06-20"  %}}
蓝总有意初步试定一吨，但临时变卦想用更高倔强的钢，暂时我们还做不到。我们讨论一下是否调用二治的钢材生新送样？还要讨论二治给我们的价格
    {{% /report %}}

    {{% report  date="2023-05-29" %}}
蓝总自己的结构己完成，参数可以，但什么时候生产还得看情况
    {{% /report %}}

    {{% report date="2023-05-17" %}}
客户测试完成，表示与我们的报告性能一致，这0.5米长样品做为质检留底
    {{% /report %}}

    {{% report date="2023-05-12" %}}
检测报告送达，并附上0.5米长的样品供客户测试
    {{% /report %}}

    {{% report date="2023-05-11" %}}
客户蓝总需要一个三百吨的螺纹钢才，但是需要我们提供检测报告

    {{% /report %}}

{{< /timeline >}}