添加插件hugo-notice

1

theme = ["hugo-notice", "your-theme"]

1
2

<!--repalce custom content to hugo shortcode-->
<p style="text-align:{{ index .Params 0 }}">{{ index .Params 1 | markdownify }}</p>

  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
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111

<!--https://github.com/martignoni/hugo-notice-->
<!--change notice color-->
{{- $noticeType := .Get 0 -}}

{{- $raw := (markdownify .Inner | chomp) -}}

{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}

{{- if not ($.Page.Scratch.Get "noticeCount") -}}

<style type="text/css">
    .notice-icon {
        margin: 0 0.5em 0.3em 0;
    }
    
    .notice {
        padding: 1em;
        margin-bottom: 1em;
        border-radius: 4px;
    }

    .notice p:last-child {
        margin-bottom: 0;
    }

    .notice-title {
        margin: -1em -1em 0.75em !important;
        padding: 0.25em 1em;
        border-radius: 4px 4px 0 0;
        font-weight: 700;
        color: hsl(0, 0%, 100%);
    }

    [data-theme="dark"] .notice-title {
        color: hsl(0, 0%, 75%);
    }

    .notice.notice-warning .notice-title {
        background: hsl(0, 65%, 65%);
    }

    [data-theme="dark"] .notice.notice-warning .notice-title {
        background: hsl(0, 25%, 35%);
    }

    .notice.notice-warning {
        background: hsl(0, 65%, 65%, 0.15);
    }

    [data-theme="dark"] .notice.notice-warning {
        background: hsl(0, 25%, 35%, 0.15);
    }

    .notice.notice-info .notice-title {
        background: hsl(30, 80%, 70%);
    }

    [data-theme="dark"] .notice.notice-info .notice-title {
        background: hsl(30, 25%, 35%);
    }

    .notice.notice-info {
        background: hsl(30, 80%, 70%, 0.15);
    }

    [data-theme="dark"] .notice.notice-info {
        background: hsl(30, 25%, 35%, 0.15);
    }

    .notice.notice-note .notice-title {
        background: hsl(200, 65%, 65%);
    }

    [data-theme="dark"] .notice.notice-note .notice-title {
        background: hsl(200, 25%, 35%);
    }

    .notice.notice-note {
        background: hsl(200, 65%, 65%, 0.15);
    }

    [data-theme="dark"] .notice.notice-note {
        background: hsl(200, 25%, 35%, 0.15);
    }

    .notice.notice-tip .notice-title {
        background: hsl(140, 65%, 65%);
    }

    [data-theme="dark"] .notice.notice-tip .notice-title {
        background: hsl(140, 25%, 35%);
    }

    .notice.notice-tip {
        background: hsl(140, 65%, 65%, 0.15);
    }

    [data-theme="dark"] .notice.notice-tip {
        background: hsl(140, 25%, 35%, 0.15);
    }
</style>

{{- end -}}

{{- $.Page.Scratch.Add "noticeCount" 1 -}}

{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <p class="first notice-title">{{ $icon | safeHTML }}{{- i18n $noticeType -}}</p>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>   

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

[notice-warning]
other = "Warning"

[notice-note]
other = "Note"

[notice-info]
other = "Info"

[notice-tip]
other = "Tip"

1
2
3
4
5

# Notice Icon
notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512"><path d="M570 440c18 32-5 72-42 72H48c-37 0-60-40-42-72L246 24c19-32 65-32 84 0l240 416zm-282-86a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'