hugp-MemE关键美化

配置front matter

使用vscode snippet快捷生成front matter

参考博客：vs-code-workflows-for-hugo、 markdown-snippets-not-working-in-vscode

在使用了obsidian后，加入一些插件如quickadd等，优化了文章撰写，但是obsidian不能在网页端登陆，虽然多个平台都有部署安装包，此外仅支持md文件使我不能继续使用下去。

后来沉思一下现有写文章流程，缺点是什么，发现是不能生成front matter，故东找西找，甚至一度又回归到obsidian后，终于发现vscode的snippet，正好几乎完美符合我的需求（不能自动呈现所有tags）。

目前我的写作流程是：

语雀上写好文章后导出md
用pic-go插件pic-migrate转换语雀图片并生成新md文件
在vscode上加入front matter
在vscode上上传至github

{

	"hugo post template":{

		"scope": "markdown",  // Add comma separated ids of the languages where the snippet is applicable in the scope field.

        "prefix": "post",  // trigger the snippet

        "body": [  // expanded and inserted where trigger

            "---",

            "title: ${TM_FILENAME/(.*)\\..+$/$1/}",

            "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND +0800",

			"lastmod: ",

            "summary: ",

            "slug: $2", // url: www.keepjolly.com/tags/:slug/

			"toc: ${3|true,false|}",

			"rightToc: ${4|false,true|}",

			"categories: ",

			"- ${5|tech,learn,algorithm,error,create,other,life|}",

			"tags: ",

			"- ${6|ComputerVision,C++,LeetCode,Blog,Others,Install|}",

			"original: true",

			"author: Rurouni",

			"website: www.keepjolly.com",

			"---"

        ]

    },

	"update time":{

		"scope": "markdown",

		"prefix": "update",

		"body": "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND +0800"

	}

}

完整可支持的front-matter，貌似也可以定制，自行百度吧

配置搜索功能

参考博客：修改algolia的设置、hugo添加algolia搜索支持

配置config.toml

# Algolia 的搜索索引

[outputFormats.Algolia]

    mediaType = "application/json"

    baseName = "algolia"

    isPlainText = true

    notAlternative = true

# 摘要的字数限制  此处用于algolia检索

summaryLength = 70

# Hugo 的输出控制

[outputs]

    page = ["HTML"]

    home = ["HTML", "SectionsAtom", "SectionsRSS", "SearchIndex", "Algolia"]

    section = ["HTML"]

    taxonomy = ["HTML"]

    term = ["HTML"]

# 菜单配置

[menu]

    ## 菜单栏

    [[menu.main]]  # 多加入一个搜索栏

        weight = 8

        identifier = "search"

        post = "search"

######################################

# Algolia search

# 说明：需要开启 `Algolia` 在Hugo 的输出控制，且需要每

#      次将生成的 algolia.json 文件上传到

#      Algolia

enableAlgoliaSearch = true

algoliaAppId = ""

algoliaApiKey = ""

algoliaIndexName = ""

# 说明：https://www.algolia.com/

algolia官网查找key

或者登录后访问网址，然后找到对应Application ID、ApiKey、IndexName，找不到可以自行在参考博客中查找。

覆盖index.algolia.json配置

然后在博客主目录/layouts下新建index.algolia.json来覆盖meme中的配置，此处内容参考dreamsafari的json

此处需多加一个参数summary，内容为content内容，或者$page.Summary（但是此处显示会无法转义字符，目前无法解决，以后应该也不会解决，等有缘人），否则会显示undefined

{{- range $i, $c := $chunked -}}

{{- $index = $index | append (dict "objectID" (print $page.File.UniqueID "_" $i) "order" $i "title" $page.Title "date" $page.Date "url" $page.Permalink "tags" $page.Params.tags "categories" $page.Params.Categories "summary" $c) -}}

{{- end -}}

修改algolia搜索配置

此处配置搜索选项，参考修改algolia的设置

自动上传algolia.json

详见github action处

配置about页及视频

视频

<video src="QmTz7jzWdGrTVKT7YwNwX9cEgfg4smNFHVxnaFDR82BrXt" poster="../images/Gypsy Heart.jpg" controls >

  如需下载：<a href="https://gateway.pinata.cloud/ipfs/QmTz7jzWdGrTVKT7YwNwX9cEgfg4smNFHVxnaFDR82BrXt">MP4</a>

</video>

config.toml

# 是否开启

enableVideoHost = true  # 相对路径获取图片，用于poster属性

# 视频外链地址

videoHostURL = "https://gateway.pinata.cloud/ipfs/"  # 用于src属性，使其链接干净

# !!必须src开头，否则无法识别到hash!!

为了使封面图poster与视频适配：

设置object-fit: 无效，被迫剪裁图片以适配视频。

音乐

如果想配置音乐

根目录下的layouts\shortcodes\创建music.html

该代码同时支持列表和单曲模式

<!-- 使用meting-js的方式  https://immmmm.com/hugo-shortcodes-music/ -->

<!-- require APlayer https://aplayer.js.org/#/zh-Hans/?id=%E5%85%A5%E9%97%A8 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">

<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

{{- if .IsNamedParams -}}

<div id="player"></div>

{{- if .Get "url" -}}

<script>

    const ap1 = new APlayer({

        container: document.getElementById('player'),

        lrcType: 3,

        audio: [{

            name: '{{ .Get `name` }}',

            artist: '{{ .Get `artist` }}',

            url: '{{ .Get `url` }}',

            cover: '{{ .Get `cover` }}',

            lrc: '{{ .Get `lrc` }}',

            theme: '#f44336'

        }]

    });

</script>

{{- else if .Get "auto" -}}

<script>

    const ap = new APlayer({

        container: document.getElementById('player'),

        mini: false,

        autoplay: false,

        theme: '#FADFA3',

        loop: 'all',

        order: 'random',

        preload: 'auto',

        volume: 0.7,

        mutex: true,

        listFolded: false,

        listMaxHeight: 90,

        lrcType: 3,

        audio: [

            {

                name: '{{ .Get `name1` }}',

                artist: '{{ .Get `artist1` }}',

                url: '{{ .Get `url1` }}',

                cover: '{{ .Get `cover1` }}',

                lrc: '{{ .Get `lrc1` }}',

                theme: '#f44336'

            },

            {

                name: '{{ .Get `name2` }}',

                artist: '{{ .Get `artist2` }}',

                url: '{{ .Get `url2` }}',

                cover: '{{ .Get `cover2` }}',

                lrc: '{{ .Get `lrc2` }}',

                theme: '#46718b'

            }

        ]

    });

</script>

{{- end -}}

{{- end -}}

在about/_index.md中修改代码

{{< music url="xxx.mp3"

 name="Try" artist="Colbie Caillat" cover="../songs/Gypsy Heart song.jpg" lrc="xxx.lrc">}}

在assets\scss\custom_custom.scss中修改暗夜样式

// Aplayer

:root[data-theme="light"]{

    .aplayer-pic{

        background-color: #b7daff;

    }

}

:root[data-theme="dark"]{

    .aplayer {

        background: #212121

    }

     .aplayer.aplayer-withlist .aplayer-info {

        border-bottom-color: #5c5c5c

    }

     .aplayer.aplayer-fixed .aplayer-list {

        border-color: #5c5c5c

    }

     .aplayer .aplayer-body {

        background-color: #212121

    }

     .aplayer .aplayer-info {

        border-top-color: #212121

    }

     .aplayer .aplayer-info .aplayer-music .aplayer-title {

        color: #fff

    }

     .aplayer .aplayer-info .aplayer-music .aplayer-author {

        color: #fff

    }

     .aplayer .aplayer-info .aplayer-controller .aplayer-time {

        color: #eee

    }

     .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {

        fill: #eee

    }

     .aplayer .aplayer-list {

        background-color: #212121

    }

     .aplayer .aplayer-list::-webkit-scrollbar-thumb {

        background-color: #999

    }

     .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover {

        background-color: #bbb

    }

     .aplayer .aplayer-list li {

        color: #fff;

        border-top-color: #666

    }

     .aplayer .aplayer-list li:hover {

        background: #4e4e4e

    }

     .aplayer .aplayer-list li.aplayer-list-light {

        background: #6c6c6c

    }

     .aplayer .aplayer-list li .aplayer-list-index {

        color: #ddd

    }

     .aplayer .aplayer-list li .aplayer-list-author {

        color: #ddd

    }

     .aplayer .aplayer-lrc {

        text-shadow: -1px -1px 0 #666

    }

     .aplayer .aplayer-lrc:before {

        background: -moz-linear-gradient(top, #212121 0%, rgba(33, 33, 33, 0) 100%);

        background: -webkit-linear-gradient(top, #212121 0%, rgba(33, 33, 33, 0) 100%);

        background: linear-gradient(to bottom, #212121 0%, rgba(33, 33, 33, 0) 100%);

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#00212121', GradientType=0)

    }

     .aplayer .aplayer-lrc:after {

        background: -moz-linear-gradient(top, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.8) 100%);

        background: -webkit-linear-gradient(top, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.8) 100%);

        background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.8) 100%);

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00212121', endColorstr='#cc212121', GradientType=0)

    }

     .aplayer .aplayer-lrc p {

        color: #fff

    }

     .aplayer .aplayer-miniswitcher {

        background: #484848

    }

     .aplayer .aplayer-miniswitcher .aplayer-icon path {

        fill: #eee

    }

}

配置视频介绍文字

_index.md

<h2 class="try">Try</h2>

<!-- <p style="text-align:center" class="colbie">Colbie Caillat</p> -->

<p style="text-align:center">

<em>

You don't have to try so hard<br>

You don't have to, give it all away<br>

You just have to get up, get up, get up, get up<br>

You don't have to change a single thing</em>

</p>

config.toml

# 网络字体链接

fontsLink = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Cinzel+Decorative:wght@700&display=swap"

assets/scss/custom/_custom.scss

// about页

.try {   // io-oi.me

      margin-top: 50px;

      text-align: center;

      font-family: 'Cinzel Decorative', serif !important;

      background-image: linear-gradient(90deg, #f37055 0, #ef4e7b 40%, #f37055 45%, #a166ab 50%, #f37055 55%, #ef4e7b 60%, #f37055 100%);

      background-size: cover;

      background-clip: text;

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

     }

.colbie {

  text-align: center;

  font-family: 'Cinzel Decorative', serif !important;

  background-image: linear-gradient(90deg, #f37055 0, #ef4e7b 40%, #f37055 45%, #a166ab 50%, #f37055 55%, #ef4e7b 60%, #f37055 100%);

  background-size: cover;

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

// https://io-oi.me/tech/get-started-with-variable-fonts/

@font-face {

  font-family: 'Amstelvar';

  font-display: swap;

  src: url('#{$baseRelURL}/fonts/Amstelvar-Italic-VF.woff2') format('woff2-variations'),

    url('#{$baseRelURL}/fonts/Amstelvar-Italic-VF.woff2') format("woff2");

  font-weight: 100 900;

  font-stretch: 50% 125%;

  font-style: italic;

}

@font-face {

  font-family: 'Amstelvar';

  font-display: swap;

  src: url('#{$baseRelURL}/fonts/Amstelvar-Roman-VF.woff2') format('woff2-variations'),

    url('#{$baseRelURL}/fonts/Amstelvar-Roman-VF.woff2') format('woff2');

  font-weight: 100 900;

  font-stretch: 50% 125%;

  font-style: normal;

}

body {

  font-family: 'Amstelvar', 'Noto Serif SC',  serif;

}

:root {

  --text-wdth: 90;

  --text-opsz: 40;

  --text-YTLC: 460;

}

body {

  font-variation-settings:

    'wdth' var(--text-wdth),

    'opsz' var(--text-opsz),

    'YTLC' var(--text-YTLC);

}

.post-title {

  font-family: 'glyph-correction', 'Amstelvar', 'Noto Serif SC', serif;

  font-variation-settings:

    'wght' 550,

    'opsz' 60,

    'YOPQ' 90;

}

.list-item-time {

  font-feature-settings: 'tnum';

}

blockquote.quote {

  position: relative;

  margin: 2em auto !important;

  padding-left: 3em;

  color: inherit;

  border: none;

  p {

    text-indent: 0 !important;

  }

  &::before {

    position: absolute;

    left: 0;

    content: '“';

    font-size: 3em;

    font-weight: bold;

    line-height: 1;

  }

  &.poetry {

    display: table;

    padding: 0;

    &::before {

      left: -1em;

    }

    p {

      margin: 0 0 1em;

    }

    p:last-child {

      margin: 0;

    }

  }

  &.en {

    p {

      line-height: 1.618;

      text-align: left;

      hyphens: auto;

      -webkit-hyphens: auto;

      -moz-hyphens: auto;

    }

  }

  &.italic {

    p {

      font-style: italic;

    }

  }

}

@media (max-width: $maxWidth) {

  blockquote.quote {

    &.poetry {

      padding-left: 3em;

      &::before {

        left: 0;

      }

      }

      }

      }

配置toc到页面右边

参考博客

原本想实现滚动动画的，技术力不够，等大佬

创建mytoc.html

<!-- 注意需要在页面的front-matter中toc：false并rightToc：true -->

{{ if (.Params.rightToc | default false ) }}

<div class="post-toc" id="post-toc">

  <aside>

    <header>

      <h4>文章の字数: {{ .WordCount }}</h4>

    </header>

    {{ $emtLiPtrn := "(?s)<ul>\\s<li>\\s<ul>(.*)</li>\\s</ul>" }}

    {{ $rplcEmtLi := "<ul>$1" }}

      {{ .TableOfContents | replaceRE $emtLiPtrn $rplcEmtLi | safeHTML }}

      <!-- https://github.com/gohugoio/hugo/issues/1778#issuecomment-483880269 -->

      <!-- {{.TableOfContents}} -->

  </aside>

  <a href="#" id="toc-toggle"></a>

</div>

{{ end }}

创建single.html

{{ define "main" }}

    {{ partial "pages/post.html" . }}

<!--   	将主题的single复制后新加的内容 -->

    <div class = "toc-wrapper">

        {{ partial "mytoc.html" . }}

    </div>

{{ end }}

修改_custom.scss样式

.post-toc {

  position: fixed;

  right: 5px;

  max-width: 40%;

  overflow: auto;

  top: 5%;

  width: 25vw;

  bottom: 30px

}

.toc-wrapper {

  ::-webkit-scrollbar {

    width: 6px;

    height: 8px;

  }

  ::-webkit-scrollbar-thumb {

    height: 40px;

    background-color: #eee;

    border-radius: 16px;

    &:hover {

      background-color: #ddd;

    }

  }

}

@media only screen and (max-width: 1224px) {

  .post-toc {

    display: none;

  }

}