hugp-MemE关键美化

标签：MemE Get 33 aplayer color hugp background font 美化

配置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;
  }
}

标签：MemE,Get,33,aplayer,color,hugp,background,font,美化
From： https://www.cnblogs.com/zds1366/p/17464760.html