敲敲打打搞装修

新增碎碎念栏目：Resonance。

- 使用https://artitalk.js.org/实现的功能，同时插入了多个用户登陆可以实现不同头像的功能。
- 本来想加入不同用户气泡颜色不同的功能，但是改了一上午也没改出来。在前台强制测试了一下，感觉效果没有预想的那么好。蒜鸟蒜鸟！徒劳无功！

修改了整体页面色彩

把整个页面换成了绿色。修改分类栏名称，并且顺手把豆瓣的帖子存过来了。

修改引用块

位于assets/scss/custom.scss:

 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


    blockquote.quote {
    background: #e6f7ec;              // 浅绿色背景
    border-left: 4px solid #55bb8a;   // 侧边竖线深绿
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
    padding: 1.1em 1.5em;             // 卡片感内边距
    margin: 1.5em auto;               // 居中且上下间距
    max-width: 90%;                   // 最宽不超版心
    font-style: normal;
    color: #222;
    position: relative;
    display: block;
    font-size: 1.02em;
    // 大引号美化
    &::before {
        content: "“";
        position: absolute;
        top: 0.3em;
        left: 0.8em;
        color: #79c6a2;
        font-size: 2.5em;
        font-family: serif;
        font-weight: bold;
        line-height: 1;
        opacity: 0.18;
        pointer-events: none;
        user-select: none;
    }
    &.poetry {
        display: table;
        padding: 0.8em 1.2em;
        &::before {
            left: -1em;
        }
        p:last-child {
            margin: 0;
        }
    }
    &.en {
        p {
            line-height: 1.618;
            text-align: left;
            hyphens: auto;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
        }
    }
}

1
2
3


{< quote >}
  这是一个引用内容
{< /quote >}

示范

关于shortcode

终于明白shortcode是怎么用的了！

另一种引用

另一种引用格式：

layouts/shortcode/quote.html

<!-- reset scratch variables at the start -->
{{ $.Scratch.Set "bl_author" false }}
{{ $.Scratch.Set "bl_source" false }}
{{ $.Scratch.Set "bl_link" false }}
{{ $.Scratch.Set "bl_title" false }}
{{ if .IsNamedParams }}
{{ $.Scratch.Set "bl_author" (.Get "author") }}
{{ $.Scratch.Set "bl_source" (.Get "source") }}
{{ $.Scratch.Set "bl_link" (.Get "link") }}
{{ $.Scratch.Set "bl_title" (.Get "title") }}
{{ else }}
<!– for the positional version if any –>
{{ end }}
<!– if title is not set explicitly then we need to beautify the link
     if length of link is more than 32 chars, we will cut it off by 32 and
     then drop everything after the last / if any and put it in into title –>
{{ with $.Scratch.Get "bl_title" }}
<!– do nothing –>
{{ else }}
{{ with $.Scratch.Get "bl_link" }}    <!– if link is given –>
{{ range last 1 (split ($.Scratch.Get "bl_link" ) "://") }}  <!– split by :// and then only take the items after it to remove protocol:// –>
{{ $.Scratch.Set "title_without_protocol" . }}
{{ end }}
{{ range last 1 (split ($.Scratch.Get "title_without_protocol" ) "www.")  }} <!– also remove the www. at the start if any. we are using a second split because all URLS may not start with it –>
{{ $.Scratch.Set "title_without_protocol" . }}
{{ end }}
{{ $.Scratch.Set "bl_title" ($.Scratch.Get "title_without_protocol") }}
<span class="c">&lt;!-- if link is longer than 32 bytes we should trim it --&gt;</span>
{{ if (gt (len ($.Scratch.Get &#34;title_without_protocol&#34;) ) 32) }}
  {{ $title := (slicestr ($.Scratch.Get &#34;title_without_protocol&#34;) 0 32) }}   <span class="c">&lt;!-- get the first 32 characters of title_without_protocol --&gt;</span>
  {{ $split_by_fw_slash := split $title &#34;/&#34; }}   <span class="c">&lt;!-- now split on / because we want to stop after the last forward slash --&gt;</span>
  {{ $count := (sub (len $split_by_fw_slash) 1) }}   <span class="c">&lt;!-- we want everything but the last part so we adjust the count accordingly --&gt;</span>

  {{ $.Scratch.Set &#34;tempstring&#34; &#34;&#34; }}   <span class="c">&lt;!-- temp variable to hold the concatinated string --&gt;</span>
  {{ range first $count $split_by_fw_slash  }}  <span class="c">&lt;!-- loop through all parts except last and concat them (add / between halves) --&gt;</span>
    {{ $.Scratch.Set &#34;tempstring&#34; ( . | printf &#34;%s%s/&#34; ($.Scratch.Get &#34;tempstring&#34;) | printf &#34;%s&#34; ) }}
  {{ end }}
  {{ $.Scratch.Set &#34;bl_title&#34; ( printf &#34;%s...&#34; ($.Scratch.Get &#34;tempstring&#34;) | printf &#34;%s&#34; ) }}
{{ end }}

{{ end }}
{{ end }}
<blockquote>
<p>{{ .Inner | markdownify }}</p>
<footer style="text-align:right">
<strong>{{ with $.Scratch.Get "bl_author" }}{{ . }}{{ end }}</strong>
{{ with $.Scratch.Get "bl_source" }}
<cite>{{ . }}</cite>
{{ else }}
{{ with $.Scratch.Get "bl_link" }}
<cite>
<a href="{{ . }}" title="{{ . }}" rel="noopener noreferrer">{{ $.Scratch.Get "bl_title" }}</a> <!– can't have new lines here –>
</cite>
{{ else }}
{{ with $.Scratch.Get "bl_title" }}
<cite>
{{ $.Scratch.Get "bl_title" }}</a>
</cite>
{{ end }}
{{ end }}
{{ end }}
</footer>
</blockquote>

1
2
3


{< quote author="作者" link="也可以不加啦" title="作品名" >}
这里写引用内容，实际使用记得换成双括号。
{< /quote >}

我希望能在远方见到你，听说那里会有一场盛大的聚会。

[美] 阿曼达·蒙特尔 《语言恶女》

代码块

修正了代码块写法：

1
2
3


{< highlight html >}
  内容
{< /highlight >}

1

  示范

还有另一种写法，效果类似引用：

1
2
3


<pre><code>
内容
</code></pre>

示范

直接显示代码，没有任何格式渲染：

1

{< codehtml >}{< /codehtml >}


## Hello

折叠

layouts/shortcodes/detail.html

1
2
3
4


    <details>
    <summary>{{ (.Get 0) | markdownify }}</summary>
    {{ .Inner | markdownify }}
    </details>

使用：

1
2
3


{< detail "折叠功能" >}
  <p>内容。</p>
{< /detail >}

折叠功能

示范

摇晃功能

layouts/shortcode/shake.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" />
    <div class="shake {{ .Get "effect" }}">{{ .Inner }}</div>
    <div class="shake"></div> 
    <div class="shake shake-hard"></div> 
    <div class="shake shake-slow"></div> 
    <div class="shake shake-little"></div> 
    <div class="shake shake-horizontal"></div> 
    <div class="shake shake-vertical"></div> 
    <div class="shake shake-rotate"></div> 
    <div class="shake shake-opacity"></div> 
    <div class="shake shake-crazy"></div>
    <!-- Freeze the animation at that point when :hover --> 
    <div class="shake shake-freeze"></div> 
    <!-- Continuous animation instead on :hover --> 
    <div class="shake shake-constant"></div> 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{< shake effect="shake" >}基本摇晃{< /shake >}
{< shake effect="shake-hard" >}剧烈摇晃{< /shake >}
{< shake effect="shake-slow" >}慢速摇晃{< /shake >}
{< shake effect="shake-little" >}轻微摇晃{< /shake >}
{< shake effect="shake-horizontal" >}水平摇晃{< /shake >}
{< shake effect="shake-vertical" >}垂直摇晃{< /shake >}
{< shake effect="shake-rotate" >}旋转摇晃{< /shake >}
{< shake effect="shake-opacity" >}透明度变化摇晃{< /shake >}
{< shake effect="shake-crazy" >}疯狂摇晃{< /shake >}
{< shake effect="shake-freeze" >}悬停冻结{< /shake >}
{< shake effect="shake-constant" >}持续摇晃{< /shake >}
使用时记得换双括号。

示范：

基本摇晃

剧烈摇晃

慢速摇晃

轻微摇晃

水平摇晃

垂直摇晃

旋转摇晃

透明度变化摇晃

疯狂摇晃

悬停冻结

持续摇晃

文字渐变

在custom.scss中添加：

1
2
3
4
5
6
7


    //文字颜色渐变
    .colorfulfont {
        background: linear-gradient(to right, rgb(25, 221, 238), #ed4588); //第一个颜色代码是渐变起始色，第二个颜色代码是渐变结束色；
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

使用：

1

    <font class="colorfulfont">试验一下<br>复制了别人的颜色！回头再调整<br> 但总之换行的话就加个空标签。</font>

试验一下
复制了别人的颜色！回头再调整
但总之换行的话就加个空标签。

居中引用

layouts/shortcode/quote-center.html

1
2
3
4
5
6
7
8


<blockquote class="quote-center">
  {{- $content := .Inner | markdownify -}}
  {{- if not (strings.HasPrefix $content "<p>") -}}
    {{ printf "<p>%s</p>" $content | safeHTML }}
  {{- else -}}
    {{- $content }}
  {{- end -}}
</blockquote>

在custom.scss中添加：

 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


// 诗歌引用格式
blockquote.quote-center {
    position: relative;
    border-left: none;
    padding-left: 0;
    border-top: 0px solid var(--card-separator-color);
    border-bottom: 0px solid var(--card-separator-color);
    p {
      text-align: center !important;
      margin-top: 1.5em;
      margin-bottom: 1.5em;
    }
    &::before {
      position: absolute;
      left: 0;
      content: '“----';
      color: #55bb8a80;
      font-size: 3em;
      font-weight: normal;
      margin-top: -0.72em;
    }
    &::after {
      position: absolute;
      right: 0;
      content: '----”';
      color: #55bb8a80;
      font-size: 3em;
      font-weight: normal;
      margin-top: -1.42em;
    }
}

使用：

1
2
3


{< quote-center >}
左右两边的符号可以自定义<br>使用需要双括号<br>换行需要空标签
{< /quote-center >}

左右两边的符号可以自定义
使用需要双括号
换行需要空标签

评分

layouts/shortcode/rating.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<span class="star-rating">
    {{- if ge (.Get 0) (.Get 1) -}}
        {{- $star_outline := sub (int (.Get 0)) (int (.Get 1)) -}}
        {{- range $i, $sequence :=  (seq (.Get 1)) -}}
            <i class="star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg></i>
        {{- end -}}
        {{- range $i, $sequence :=  (seq $star_outline) -}}
            <i class="star-outline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M381.2 150.3L524.9 171.5C536.8 173.2 546.8 181.6 550.6 193.1C554.4 204.7 551.3 217.3 542.7 225.9L438.5 328.1L463.1 474.7C465.1 486.7 460.2 498.9 450.2 506C440.3 513.1 427.2 514 416.5 508.3L288.1 439.8L159.8 508.3C149 514 135.9 513.1 126 506C116.1 498.9 111.1 486.7 113.2 474.7L137.8 328.1L33.58 225.9C24.97 217.3 21.91 204.7 25.69 193.1C29.46 181.6 39.43 173.2 51.42 171.5L195 150.3L259.4 17.97C264.7 6.954 275.9-.0391 288.1-.0391C300.4-.0391 311.6 6.954 316.9 17.97L381.2 150.3z"/></svg></i>
        {{- end -}}
    {{- end -}}
</span>

在custom.scss中添加：

//星星评级
i.star{
    color: hsl(61, 79%, 63%); /*星星的颜色*/
  }
i.star-outline{
color: hsl(211, 31%, 74%);/空星星的颜色/
}
i.star svg, i.star-outline svg{
width: 20px;
fill: currentColor;
}

使用：

1

{< rating 10 7 >} //总星数 实际星数；实际使用需要双括号；不可以打半星

卡片样式

layouts/shortcode/card.html

1
2
3
4
5
6


{{- $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 -}}
    <div class="mycard">
      <div class="content">{{- if or $block (not $raw) }}{{ $raw }}{{ else }} {{ $raw }} {{ end -}}</div>
    </div>

在custom.scss中添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 卡片样式
.mycard {
    padding: 10px 20px;
    margin: 20px 0;
    border-radius: 4px;
    word-break: break-all;
    background: #d2e5eb14;
    box-shadow: 0 6px 10px 0 #00000033;
    .content {
      line-height: 30px;
    }
}

1

{<card>}内容{</card>}

示范

仿Github样式

layouts/shortcode/github.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<div class="github">
    <div class="logo">
        {{ $sky := resources.Get "icons/fireworks.svg" }}
        {{ $svg := $sky.Content | safeHTML }}
        {{ $svg }}
        <a class="name" href="{{ .Get "link" }}" target="_blank">{{ .Get "name" }}</a>
    </div>
    <div class="description">{{ .Get "description" }}</div>
    <div class="language">
        <span class="language-color" style="background-color:{{ .Get "color" }};"></span>
        <span class="language-name">{{ .Get "language" }}</span>
    </div>
</div>

在custom.scss中添加：

 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


//github样式
.github {
    border: 1px solid var(--card-text-color-main);
    border-radius: 3px;
    margin: 0 auto;
    margin-bottom: 1em;
    padding: 1em;
    .github-icon {
      width: 1.2em;
      height: 1.2em;
      margin-right: 0.5em;
      margin-bottom: 0.2em;
      fill: var(--card-text-color-main);
      transition: all 0.5s;
    }
    .name {
      font-weight: bold;
      color: #2e97d9;
      text-decoration: underline;
      margin-left: 0.5em;
      position: relative;
      top: -5px; //加这个属性是因为我的图标和名称无法对齐，实际使用的时候要根据自己的网站修改
    }
    .description {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      color: var(--card-text-color-main);
      text-align: justify;
      font-size: 90%;
      transition: all 0.5s;
    }
    .language-color {
      position: relative;
      top: 1px;
      display: inline-block;
      width: 0.75em;
      height: 0.75em;
      border-radius: 50%;
    }
    .language-name {
      color: var(--card-text-color-main);
      font-size: 90%;
      margin-left: 0.5em;
      transition: all 0.5s;
    }
}  

同时在assets/icons/里添加fireworks.svg

使用：

1

{< github name="链接标题" link="链接本体" description="链接内容描述" color="色彩颜色" language="可以当标签用" >}

链接标题

链接内容描述

可以当标签用

手动输入 NeoDB 条目

layouts/shortcode/book.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<div class="db-card">
    <div class="db-card-subject">
        <div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ .Get "image" }}"></div>
        <div class="db-card-content">
            <div class="db-card-title"><a href="{{ .Get "url" }}" class="cute" target="_blank" rel="noreferrer">{{ .Get "title" }}</a></div>
            <div class="rating"><span class="rating_nums">个人评分：</span><span class="allstardark"><span class="allstarlight" style="width:{{ .Get "rate" }}0%"></span></span></div>
            <div class="db-card-abstract">{{ .Get "brief" }}</div>
        </div>
        <div class="db-card-cate">{{ .Get "tag" }}</div>
    </div>
</div>

在custom.scss中添加：

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


/* db-card -------- start*/
.db-card{margin:2.5rem 3rem;background:var(--card-background);border-radius: 7px;box-shadow: 0 6px 10px 0 #00000053;}
.db-card-subject{display: flex;align-items:flex-start;line-height:1.6;padding:12px;position:relative;}
.dark .db-card{background:var(--card-background);}
.db-card-content {flex:1 1 auto;}
.db-card-post {width: 100px;margin-right: 15px;display: flex;flex: 0 0 auto;}
.db-card-title {margin-bottom: 3px;font-size: 14px;color: var(--card-text-color-main);;}
.db-card-title a{text-decoration: none!important}
.db-card-abstract,.db-card-comment{font-size:13px;overflow: auto;max-height:10rem;color: var(--card-text-color-main);;}
.db-card-cate{position: absolute;top:0;right:0;background:#f99b01;padding:1px 8px;font-size:small;font-style:italic;border-radius:0 8px 0 8px;text-transform:capitalize;}
.db-card-post img{width: 100px!important;height: 150px!important;border-radius: 4px;-o-object-fit: cover;object-fit: cover;}
.rating{margin: 0 0 5px;font-size:13px;line-height: 1;display: flex;align-items: center;}
.rating .allstardark{position:relative;color: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
}
.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}
@media (max-width:550px) {
	.db-card{margin:0.8rem 1rem;}
	.db-card-comment{display: none;}
}
/* db-card -------- end */

rate一栏只能是 1-10 的整数，简介无法换行，tag可以自由填写，例如 book、movie、game 等。

1

{< book url="链接" image="图片" title="标题" rate="打分" brief="简介" tag="movie/book/game" >}

标题

个人评分：

简介

movie/book/game

书籍摘抄页

layouts/page/ember.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{ define "main" }}
  {{ $entries := getJSON "static/cards/ember.json" }}
  <div class="ember-grid">
    {{ range $entries }}
      <div class="ember-card">
        <h2>{{ .title }}</h2>
        <h3>{{ .author }}</h3>
        <p class="ember-excerpt">{{ .excerpt }}</p>
      </div>
    {{ end }}
  </div>
{{ end }}

custom.scss最后添加：

 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


// 阅读摘抄
// 瀑布流容器
  .ember-grid {
    column-width: 300px;
    column-gap: 1.5rem;
    padding: 1rem;
    max-width: 1400px; 
    margin: 0 auto;
  }
  .ember-card {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem;
    break-inside: avoid;
    word-break: break-word;
    border: 1px solid var(--text-color-light);
    border-radius: 12px;
    padding: 1.2rem;
    background-color: var(--card-background);
    color: var(--card-text-color-main);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
  }
  //响应式变列数
  @media (max-width: 1200px) {
    .ember-grid {
      column-count: 3;
    }
  }
  @media (max-width: 900px) {
    .ember-grid {
      column-count: 2;
    }
  }
  @media (max-width: 600px) {
    .ember-grid {
      column-count: 1;
    }
  }
  /* 悬浮效果 */
  .ember-card:hover {
    transform: translateY(-3px);
  }
  /* 标题样式 */
  .ember-card h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: #2e4f3e;
    text-align: center;
  }
  /* 作者样式 */
  .ember-card h3 {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1rem;
    text-align: center;
  }
  /* 摘录样式 */
  .ember-excerpt {
    font-size: 1.5rem;
    line-height: 1.8;
    white-space: pre-wrap;
  }
  /* 响应式样式 */
  @media (max-width: 768px) {
    .ember-card {
      width: 100% !important;
    }
  }

最后，在json页面添加新的书摘内容：

static\cards\ember.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


[
    {
        "title": "《关于爱的一切》",
        "author": "[美]贝尔·胡克斯",
        "excerpt": "通过选择继续做男孩，他们不必忍受与无条件、无微不至地照顾他们的母亲断绝关系的痛苦，而是找到像母亲一样的女人来继续照顾他们。如果女人不能像母亲一样，他们就会表现出来。"
      },
      {
        "title": "《我的痛苦有名字吗？》",
        "author": "[韩]河美娜",
        "excerpt": "我想象了站在包含佛洛伊德在内的男性治疗师面前，艰难地吐露自己经验的女子们。想象了她们的愤怒、委屈和羞耻之情。我想向她们致敬。我相信她们的话。"
      }
]

随后做了一个瀑布流页面布局和页面乱序显示。每次刷新页面时都会重新打乱书摘卡片的显示顺序。

页面乱序，在ember.html里添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!-- 卡片顺序随机打乱 -->
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const container = document.querySelector(".ember-grid");
      const cards = Array.from(container.querySelectorAll(".ember-card"));
// 使用 Fisher-Yates 洗牌算法打乱顺序
      for (let i = cards.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [cards[i], cards[j]] = [cards[j], cards[i]];
      }
// 重新插入元素
      cards.forEach(card => container.appendChild(card));
    });
  </script>

下次更新计划

阅读碎片页面适应暗色模式
头像适应暗色模式
取消左侧栏的滚轴显示
修改右侧栏目录显示
学习一下她人的每月小结

https://thirdshire.com/june-recap-2025/
返回顶部按钮

https://thirdshire.com/hugo-stack-renovation/#%E5%A2%9E%E5%8A%A0%E8%BF%94%E5%9B%9E%E9%A1%B6%E9%83%A8%E6%8C%89%E9%92%AE
macOS 风格的代码块

https://thirdshire.com/hugo-stack-renovation-part-three/#macos-%E9%A3%8E%E6%A0%BC%E7%9A%84%E4%BB%A3%E7%A0%81%E5%9D%97
做一个标签墙

https://mantyke.icu/posts/2022/a-flower-upon-your-return/

https://www.sleepymoon.cyou/%E5%85%B3%E4%BA%8E/
做一个音乐展示墙和食谱菜单页面

另，本篇封面感谢：福音戰士標題生成器