基于 jekyll-theme-Wuk 的博客配置

基于 jekyll-theme-Wuk 的博客配置

Hello World!

不同于之前的 hexo ,这次使用了一个新框架搭建了博客!

以后将在这写一点学习的内容!请多多关照啦!

下面介绍下博客的搭建过程

主题

这里用的是基于 jekyll 的主题 wu-kan/jekyll-theme-WuK,不同于之前的 hexo,jekyll 可以直接在上传 md 文件,而不用在本地生成,这给博客的撰写和迁移带来了极大的方便,使其脱离的本地环境的限制!

配置过程

由于选用主题已经高度封装了,配置过程较为简单。只需要按照主题文档的说明,将原作者的站点 wu-kan/wu-kan.github.io 仓库 fork到自己的账号下,接着修改配置文件以及仓库内容就可以了。

修改配置文件

以原仓库中配置文件的行号为标准,需要修改的地方主要如下:

  • 1-22 行的标题、描述、域名等
  • 30-30 行的评论,使用 utteranc,需要新建一个仓库用于评论,评论作为该仓库的 issue,并在仓库中安装 utteranc 的 bot。如果不修改这部分内容,评论将不会返回给博主,而是出现在主题作者的对应仓库中
  • 50 行的头像地址
  • 217 行的博客建立时间
  • 255 行的博客版权、时间、名称信息
  • 257-270 行的备案信息
  • 305 行的头像信息
  • 310 行的头像信息
  • 660-692 行的打赏页配置,由于写文时 merger 的文档在维护,于是参考了网上的其他资料和历史文档,与当前版本可能存在差异。需要修改的有:
    • myname: 打赏页中显示的姓名
    • profile: 用于拉取 gravatar 的头像信息,需要先注册才能使用,本文中其他提到的头像也可这样拉取。头像链接的获取 api 使用了邮箱计算的 md5, 最后的 s 为尺寸
    • wechat、tenpay、alipay、paypal:各家的支付二维码信息,将微信、QQ、支付宝收款码中的链接使用二维码扫描工具扫出来替换即可。paypal 这里没有使用,不了解其接口是怎样的
  • 761-763 行的 SEO 优化标识,用于提交给搜索引擎优化。对于这部分还在学习中,所以没有修改。

其中,本博客建立时,原仓库的配置文件 wu-kan/wu-kan.github.io/blob/gh-pages/_config.yml 具体内容如下:

title: wu-kan # 站点标题
description: | # 头像背后的信息(html格式),<br/>代表换行
  SYSU第6年<br/>
  水野爱<br/>
  田宫例四驱车<br/>
  <a href="mailto:i@wu-kan.cn">
    <i class="fa-solid fa-envelope"></i>
  </a>
  <a href="https://github.com/wu-kan">
    <i class="fa-brands fa-github"></i>
  </a>
  <a href="https://vjudge.net/user/WuK">
    <i class="fa-solid fa-smile"></i>
  </a>
  <a href="https://space.bilibili.com/166390020">
    <i class="fa-brands fa-bilibili"></i>
  </a>
  <a href="https://www.zhihu.com/people/wu.kan/activities">
    <i class="fa-brands fa-zhihu"></i>
  </a>
  <br/>
url: https://wu-kan.cn # 你的域名,例如 https://wu-kan.github.io
baseurl: "" # 假如你的博客是建在某个目录下的,请在这里加上目录名,并且下面配置的所有链接里的`/assets`前也要加,即`/your_baseurl/assets`。这一项结尾不要有'/'。

defaults: # 将所有配置选项使用<https://jekyllrb.com/docs/configuration/front-matter-defaults/>功能进行配置
  - scope:
      path: "" # an empty string here means all files in the project
    values: # 以下配置项也可以在任意页面自定义
      jekyll-theme-WuK: # 我的主题的自定义样式都在这个命名空间
        comments: # 留言页,请先修改这里,确保使用的是你自己的repo!参照<https://utteranc.es/>
          append: |
            <script
              repo="wu-kan/utterances-storage"
              src="https://utteranc.es/client.js"
              issue-term="url"
              theme="github-light"
              crossorigin="anonymous"
              async="async"
            ></script>
        default:
          body:
            theme-base: theme-base-07 # 可选的主题色包括08~0f,见 <https://github.com/poole/lanyon>
            layout-reverse: true # 开启后sidebar在右边,反之左边
            sidebar-overlay: true # 开启后正文不随sidebar移动而移动
          html_lang: zh # <https://www.w3school.com.cn/tags/html_ref_language_codes.asp>
          sidebar: # 此配置项下是一些关于侧边栏的配置
            disable: false # 是否不显示sidebar
            avatar: # 侧边栏显示的头像
              enable: true
              img: https://gravatar.loli.net/avatar/289efba375d63424de3c49569c446744?s=320 # 头像的地址
            nav: # 导航部分的内容,你也可以自己增加文字、图标(来自fontawesome)和对应的链接
              - title: '<i class="fa-solid fa-home fa-fw"></i> 首页'
                href: /
              - title: '<i class="fa-solid fa-comment fa-fw"></i> 留言'
                href: /comments/
              - title: '<i class="fa-solid fa-archive fa-fw"></i> 归档'
                href: /archive/
              - title: '<i class="fa-solid fa-tags fa-fw"></i> 标签'
                href: /tags/
              - title: '<i class="fa-solid fa-coffee fa-fw"></i> 打赏'
                href: /merger/
            simple_jekyll_search: # 侧边栏的全站搜索
              enable: true
              full_text_search: false # 可能导致缓慢的搜索和加载
              append: | # 如果看不懂就不改
                <style>
                  #sidebar-search-input {
                    background: none;
                    border: none;
                    color: White;
                    width: 100%;
                  }
                  #sidebar-search-results-container {
                    overflow: hidden hidden;
                    max-height: 66.6vh;
                  }
                  #sidebar-search-results-container:hover {
                    overflow: auto auto;
                  }
                </style>
                <input
                  id="sidebar-search-input"
                  placeholder="搜索博文"
                />
                <ol
                  id="sidebar-search-results-container"
                ></ol>
                <script
                  src='https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.9.1'
                  async='async'
                  onload='
                    SimpleJekyllSearch({
                      json: "/assets/simple-jekyll-search/search.json",
                      searchInput: document.getElementById("sidebar-search-input"),
                      resultsContainer: document.getElementById("sidebar-search-results-container"),
                      searchResultTemplate: `<li><a href="{url}">{title}</a></li>`,
                      limit: 99,
                      fuzzy: true
                    })'
                ></script>
            jekyll-toc: # 侧边栏的目录插件,https://github.com/allejo/jekyll-toc
              enable: true
              prepend: | # 目录过长时自动折叠
                <style>
                  #toc {
                    overflow: hidden hidden;
                    max-height: 66.6vh;
                  }
                  #toc:hover{
                    overflow: auto auto;
                  }
                </style>
            append_to_sidebar:
              #- <script defer="defer" src="https://cdn.jsdelivr.net/gh/poole/lanyon@v1.1.0/public/js/script.min.js"></script> # 点击空白处而非按钮从而关闭侧边栏的插件,可选
              - | # 侧边栏使用主题色
                <style>
                  #sidebar-checkbox:checked ~ .sidebar-toggle,
                  .sidebar,
                  .sidebar-toggle:active {
                    background-color: var(--theme-base-color);
                  }
                </style>
              - | # 修复点击侧边栏按钮回到顶部的问题
                <style>
                  .sidebar-checkbox {
                    display: none;
                  }
                  .sidebar-toggle {
                    position: fixed;
                    background: none;
                  }
                </style>
              - | # 修复侧边栏特定情况下抖动的问题,感谢 [@AmachiInori](https://github.com/wu-kan/wu-kan.github.io/issues/11)
                <style>
                  .sidebar {
                    overflow: hidden;
                    min-height: 101%;
                  }
                  .sidebar:hover{
                    overflow-y: scroll; 
                  }
                </style>
              - | # 侧边栏头像效果
                <style>
                  .effect {
                    margin: 1rem;
                    perspective: 900px;
                  }
                  .effect-info {
                    text-align: center;
                    position: absolute;
                    top: 0;
                    width: 100%;
                    transform-style: preserve-3d;
                  }
                  .effect-img {
                    z-index: 11;
                    width: 100%;
                    height: 100%;
                    position: relative;
                    transition: all 0.5s ease-in-out;
                  }
                  .effect-img:before {
                    position: absolute;
                    display: block;
                  }
                  .effect-right_to_left .effect-img {
                    transform-origin: 0% 50%;
                  }
                  .effect-right_to_left:hover .effect-img {
                    transform: rotate3d(0, 1, 0, -180deg);
                  }
                </style>
              - | # 运行时间,可将倒数第三行的时间改成你自己的建站时间,格式仿照上面的;不需要的话可以把这一项都删掉
                <div>
                  <i class="fa-solid fa-cog fa-spin fa-fw"></i>
                  <span id="run_time_day">
                    <i class="fa-solid fa-spinner fa-pulse"></i>
                  </span>天
                  <span id="run_time_hour">
                    <i class="fa-solid fa-spinner fa-pulse"></i>
                  </span>时
                  <span id="run_time_minute">
                    <i class="fa-solid fa-spinner fa-pulse"></i>
                  </span>分
                  <span id="run_time_second">
                    <i class="fa-solid fa-spinner fa-pulse"></i>
                  </span>秒
                  <script>
                    setInterval(function (d,h,m,s,b) {
                      function setzero(i) {
                        return i < 10 ? "0" + i : i;
                      }
                      let BirthDay = new Date(b);
                      let today = new Date();
                      let timeold = (today.getTime() - BirthDay.getTime());
                      let sectimeold = timeold / 1000;
                      let secondsold = Math.floor(sectimeold);
                      let msPerDay = 24 * 60 * 60 * 1000;
                      let e_daysold = timeold / msPerDay;
                      let daysold = Math.floor(e_daysold);
                      let e_hrsold = (e_daysold - daysold) * 24;
                      let hrsold = Math.floor(e_hrsold);
                      let e_minsold = (e_hrsold - hrsold) * 60;
                      let minsold = Math.floor((e_hrsold - hrsold) * 60);
                      let seconds = Math.floor((e_minsold - minsold) * 60);
                      d.textContent = daysold;
                      h.textContent = setzero(hrsold);
                      m.textContent = setzero(minsold);
                      s.textContent = setzero(seconds);
                    },
                    1000,
                    document.getElementById("run_time_day"),
                    document.getElementById("run_time_hour"),
                    document.getElementById("run_time_minute"),
                    document.getElementById("run_time_second"),
                    "10/04/2017 11:03:56")// 这是我第一篇CSDN博客的时间
                  </script>
                </div>
              - | # 不蒜子页面统计,看不懂可不改
                <div>
                  <div>
                    <i class="fa-solid fa-eye fa-fw"></i>
                    <span id="busuanzi_value_page_pv">
                      <i class="fa-solid fa-spinner fa-pulse"></i>
                    </span>次
                  </div>
                  <div>
                    <i class="fa-solid fa-paw fa-fw"></i>
                    <span id="busuanzi_value_site_pv">
                      <i class="fa-solid fa-spinner fa-pulse"></i>
                    </span>枚
                  </div>
                  <div>
                    <i class="fa-solid fa-user-friends fa-fw"></i>
                    <span id="busuanzi_value_site_uv">
                      <i class="fa-solid fa-spinner fa-pulse"></i>
                    </span>人
                  </div>
                  <script
                    src='https://cdn.jsdelivr.net/npm/busuanzi@2.3/bsz.pure.mini.js'
                    async='async'
                  ></script>
                </div>
              - | # 觉得我的主题好用的话,让更多的人知道它吧!
                <div>
                  <i class="fa-solid fa-thumbs-up fa-fw"></i>
                  <a href="https://jekyll-theme-WuK.wu-kan.cn">
                    jekyll-theme-WuK
                  </a>
                </div>
              - | # Copyright声明
                <div>
                  <i class="fa-solid fa-copyright fa-fw"></i>
                  2017-2022 WuK
                </div>
              - | # 我的备案信息,请你的网站删掉这一项。互联网非法外之地!
                <div>
                  <i class="fa-solid fa-info-circle fa-fw"></i>
                  <a href="http://beian.miit.gov.cn">
                    粤ICP备 20024947号
                  </a>
                </div>
              - | # 公安网备信息
                <div>
                  <img src="https://Mizuno-Ai.wu-kan.cn/assets/image/2021/12/07/0.png" class="fa-fw"></img>
                  <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34070202000407">
                    皖公网安备 34070202000407号
                  </a>
                </div>
            wordcount: # 全站字数统计
              enable: false # 本地调试时建议关闭,非常影响站点生成速度(所需时间与博文数量的平方成正比)
              prepend: <i class="fa-solid fa-user-edit fa-fw"></i>
              kilo: 
              unit: 
          append_to_head: # 通过内嵌html的方式引入并定制插件,删改前确定知道自己在做什么。定制插件的方式可以参考这篇文章 <https://wu-kan.cn/_posts/2019-01-18-基于Jekyll搭建个人博客/>
            - | # jsdelivr 防挂脚本,来自 https://github.com/PipecraftNet/jsdelivr-auto-fallback/blob/0.2.2/index.min.js
              <script>
                (n=>{"use strict";let r,s,e;const l=["cdn.jsdelivr.net","fastly.jsdelivr.net","gcore.jsdelivr.net","cdn.zenless.top","testingcf.jsdelivr.net","test1.jsdelivr.net"],t="//",a=l[0],i=Date.now(),o=2e3,c="jsdelivr-auto-fallback",f="/gh/PipecraftNet/jsdelivr-auto-fallback@main/empty.css?",d=e=>e&&e.includes(t+a),m=e=>e.replace(t+a,t+r),u=window.setTimeout,v=n.querySelectorAll.bind(n),g=()=>{let e,t;for(e of v('link[rel="stylesheet"]'))t=e.href,d(t)&&!t.includes(f)&&(e.href=m(t));for(e of v("script"))if(t=e.src,d(t)){const r=n.createElement("script");r.src=m(t),e.defer=!0,e.src="",e.before(r),e.remove()}for(e of v("img"))t=e.src,d(t)&&(e.src="",e.src=m(t));for(e of v("*[style]"))t=e.getAttribute("style"),d(t)&&e.setAttribute("style",m(t));for(e of v("style"))t=e.innerHTML,d(t)&&(e.innerHTML=m(t))},y=()=>{!e&&s&&r&&(console.warn(a+" is not available. Use "+r),e=!0,u(g,0),u(g,20),setInterval(g,500))},b=(()=>{try{return Object.assign({},JSON.parse(localStorage.getItem(c)||"{}"))}catch{return{}}})();var h=()=>{b.time=i,b.failed=!1,b.fastNode=null;for(const t of l)((e,t)=>{let r;const s=n.createElement("link"),l=e=>{r&&(clearTimeout(r),r=0,e||(s.href="data:text/plain;base64,"),s.remove(),t(e))};r=u(l,o),s.addEventListener("error",()=>l(!1)),s.addEventListener("load",()=>l(!0)),s.rel="stylesheet",s.text="text/css",s.href=e+f+i,n.head.insertAdjacentElement("afterbegin",s)})("https://"+t,e=>{e||t!==a||(s=!0,b.failed=!0),e&&!r&&(r=t),e&&!b.fastNode&&(b.fastNode=t),y()});u(()=>{s&&!r&&(r=l[1],y()),localStorage.setItem(c,JSON.stringify(b))},o+100)};b.time&&i-b.time<36e5&&b.failed&&b.fastNode?(s=!0,r=b.fastNode,y(),u(h,1e3)):h()})(document);
              </script>
            - | # 自定义主题色(水野爱蓝),可对应 <https://www.runoob.com/cssref/css-colornames.html> 挑选
              <style>
                .theme-base-07 {
                  --theme-base-color: DarkSlateBlue;
                }
              </style>
            - | # 一些页面优化标签,看不懂可跳过
              <meta
                name="viewport"
                content="width=device-width,minimum-scale=1,initial-scale=1"
              />
              <meta
                http-equiv="content-type"
                content="text/html; charset=utf-8"
              />
              <link
                rel="alternate"
                href="/feed.xml"
                title="RSS"
                type="application/rss+xml"
              />
            - | # 网站小图标,可换成你自己的图片,改href中的部分即可
              <link
                rel="apple-touch-icon-precomposed"
                href="https://gravatar.loli.net/avatar/289efba375d63424de3c49569c446744?s=320"
              />
              <link
                rel="shortcut
                icon"
                href="https://gravatar.loli.net/avatar/289efba375d63424de3c49569c446744?s=32"
              />
            - | # 来自lanyon的页面样式,不要改
              <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/combine/gh/poole/lanyon@v1.1.0/public/css/poole.min.css,gh/poole/lanyon@v1.1.0/public/css/lanyon.min.css,gh/poole/lanyon@v1.1.0/public/css/syntax.min.css"
              />
            - | # fontawesome图标;标题和引用之前插一个图标
              <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css"
              />
            - | # 侧边栏放缩修正
              <style>
                .wrap {
                  transition-property: width,background-size,transform;
                  transition-duration: .3s;
                  transition-timing-function: ease-in-out;
                  display: inline-block;
                }
                @media screen and (min-width: 28rem) {
                  .sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
                    width: calc(100% - 14rem);
                    transform: translateX(14rem);
                  }
                  .layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
                    transform: translateX(0);
                  }
                }
              </style>
            - | # <https://zenozeng.github.io/fonts.css/>,跨平台中文字体解决方案
              <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/@fontsource/courier-prime@4.5.9/index.min.css"
              />
              <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-tc@4.5.12/500.min.css"
              />
              <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc@4.5.12/chinese-simplified-500.min.css"
              />
              <style>
                .sidebar, html, h1, h2, h3, h4, h5, h6, code, pre {
                  font-family: "Courier Prime", "Courier New", "Courier", "Noto Sans Mono", "Noto Serif TC", "Noto Serif SC", "Noto Serif CJK TC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", STZhongsong, STSong, "Songti SC", "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, monospace;
                }
              </style>
            - | # 修复行内图片默认样式
              <style>
                img {
                  display: inline-block;
                  margin: 0;
                }
              </style>
            - | # 自定义滚动条,仅对Chrome系浏览器生效
              <style>
                ::-webkit-scrollbar {
                  width: 3px;
                  height: 3px;
                }
                ::-webkit-scrollbar-thumb {
                  background-color: Gray;
                }
              </style>
            - | # 防止代码块过长
              <style>
                @media only screen {
                  pre {
                    white-space: pre;
                    max-height: 66.6vh;
                    padding: 0 1rem;
                    overflow: hidden hidden;
                  }
                  pre:hover {
                    overflow: auto auto;
                  }
                }
              </style>
            - | # 链接样式修正
              <style>
                .container a,
                .related-posts li a:hover {
                  color: inherit;
                  text-decoration: none;
                  border-bottom: 1px solid var(--theme-base-color);
                }
              </style>
        page:
          title: # 为每个页面自动生成一个 H1 title
            enable: true
          prepend:
            - | # 标题和引用前插一个图标
              <style>
                h1::before,
                h2::before,
                h3::before,
                h4::before,
                h5::before,
                h6::before,
                blockquote::before {
                  font-family: "Font Awesome 6 Free";
                  font-weight: bold;
                  font-size: smaller;
                  margin-right: .5rem;
                  content: "\f292";
                }
                blockquote::before { content: "\f10d"; }
              </style>
            - | # 选中字体颜色
              <style>
                ::selection {
                  color: White;
                  background: Black;
                }
              </style>
            - | # 调整标题样式
              <style>
                h1, h2, h3, h4, h5, h6 {
                  margin: 2rem 0rem 1rem 0rem;
                }
              </style>
            - | # 表格样式美化
              <style>
                td,
                th {
                  padding: 0px;
                  border: 0px;
                }
                table {
                  border: 0px;
                }
                table tbody {
                  display: block;
                  overflow: scroll;
                }
                table thead,
                tbody tr {
                  display: table;
                  table-layout: fixed;
                  width: 100%;
                }
              </style>
            - | # 列表项增加行距
              <style>
                .content li {
                  margin: .25rem;
                }
              </style>
            - | # 首行缩进2字符
              <style>
                p {
                  text-indent: 2rem;
                }
                p img {
                  max-width: calc(100% - 4rem);
                }
              </style>
            - | # 增加宽屏下的显示内容
              <style>
                .container {
                  min-width: 66.6%;
                  min-height: 100vh;
                }
                @media only print {
                  .container {
                    min-width: 100%;
                  }
                }
              </style>
            - |
              <style>
                .container.content {
                  padding: 2rem;
                }
              </style>
          plugin:
            - smart_include:
                enable: true
                key: $
              append:
                | # 对KaTeX过长公式渲染超出页面的修正,感谢[@AmachiInori](https://github.com/wu-kan/wu-kan.github.io/issues/13)
                <link
                  rel="stylesheet"
                  href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css"
                />
                <style>
                  .katex-display>.katex {
                    white-space: normal;
                  }
                </style>
                <script
                  src="https://cdn.jsdelivr.net/combine/npm/katex@0.16.4/dist/katex.min.js,npm/katex@0.16.4/dist/contrib/auto-render.min.js"
                  async="async"
                  onload='renderMathInElement(document.body, { delimiters: [{left: "$$", right: "$$", display: true}, { left: "$", right: "$", display: false }, {left: "\\(", right: "\\)", display: false}, {left: "\\[", right: "\\]", display: true}]})'
                ></script>
            - smart_include:
                enable: true
                key: language-vega-lite
              append: |
                <style>
                  pre.language-vega-lite,
                  code.language-vega-lite {
                    display: none;
                  }
                </style>
                <script
                  src="https://cdn.jsdelivr.net/combine/npm/vega@5.22.1,npm/vega-lite@5.6.0,npm/vega-embed@6.21.0"
                  async="async"
                  onload='
                    for(let x of document.getElementsByClassName("language-vega-lite"))
                      if(x.nodeName=="CODE")
                      {
                        let m = document.createElement("div");
                        x.parentNode.insertAdjacentElement("beforebegin", m);
                        vegaEmbed(m, JSON.parse(x.textContent));
                      }'
                ></script>
            - smart_include:
                enable: true
                key: language-mermaid
              append: |
                <style>
                  pre.language-mermaid,
                  code.language-mermaid {
                    display: none;
                  }
                  @media only screen {
                    .mermaid {
                      overflow: hidden hidden;
                      max-width: 100%;
                      max-height: 66.6vh;
                    }
                    .mermaid {
                      overflow: auto auto;
                    }
                  }
                </style>
                <script
                  src="https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.min.js"
                  async="async"
                  onload='
                    for(let x of document.getElementsByClassName("language-mermaid"))
                      if(x.nodeName=="CODE")
                      {
                        let m = document.createElement("div");
                        m.classList.add("mermaid");
                        m.textContent = x.textContent;
                        x.parentNode.insertAdjacentElement("beforebegin", m);
                      }'
                ></script>
            - smart_include:
                enable: false
              append: | # 引入live2d看板娘!不需要可以把这一项都删掉
                <link
                  rel="stylesheet"
                  href="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Pio@2.4/static/pio.min.css"
                />
                <style>
                  @media only print {
                    .pio-container {
                      display: none;
                    }
                  }
                </style>
                <script
                  async="async"
                  src="https://cdn.jsdelivr.net/combine/gh/Dreamer-Paul/Pio@2.4/static/l2d.min.js,gh/Dreamer-Paul/Pio@2.4/static/pio.min.js"
                  onload='
                    let pio_container = document.createElement("div");
                    pio_container.classList.add("pio-container");
                    pio_container.classList.add("right");
                    pio_container.style.bottom = "-2rem";
                    pio_container.style.zIndex = "1";
                    document.body.insertAdjacentElement("beforeend", pio_container);
                    let pio_action = document.createElement("div");
                    pio_action.classList.add("pio-action");
                    pio_container.insertAdjacentElement("beforeend", pio_action);
                    let pio_canvas = document.createElement("canvas");
                    pio_canvas.id = "pio";
                    pio_canvas.style.width = "14rem";
                    pio_canvas.width = "600";
                    pio_canvas.height = "800";
                    pio_container.insertAdjacentElement("beforeend", pio_canvas);
                    let pio = new Paul_Pio({
                      "mode": "fixed",
                      "hidden": true,
                      "night": "for(let i=7; i<16; ++i) if(document.body.classList.contains(`theme-base-0`+i.toString(16))) { document.body.classList.remove(`theme-base-0`+i.toString(16)); document.body.classList.add(`theme-base-0`+((i-6)%9+7).toString(16)); break; }",
                      "content": {
                        "link": ["https:\/\/jekyll-theme-WuK.wu-kan.cn"],
                        "skin": ["要换成我的朋友吗?", "让她放个假吧~"],
                        "hidden": true,
                        "custom": [{
                          "selector": "a",
                          "type": "link",
                        }, {
                          "selector": ".sidebar-toggle",
                          "text": "打开侧边栏叭~"
                        }, {
                          "selector": ".effect-info",
                          "text": "哇,你发现了什么!"
                        }, {
                          "selector": "#sidebar-search-input",
                          "text": "想搜索什么呢?很多干货哦!"
                        }, {
                          "selector": "#toc",
                          "text": "这是目录~"
                        }, {
                          "selector": ".page-title",
                          "text": "这是标题~"
                        }]
                      },
                      "model": [
                        "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/33/model.2018.bls-winter.json",
                        "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/platelet-2/model.json",
                        "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/xiaomai/xiaomai.model.json",
                        "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/mashiro/seifuku.model.json",
                        "https:\/\/cdn.jsdelivr.net/gh/imuncle/live2d/model/Violet/14.json",
                        "https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/Kobayaxi/Kobayaxi.model.json",
                        "https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/mikoto/mikoto.model.json",
                        "https:\/\/cdn.jsdelivr.net/gh/xiaoski/live2d_models_collection/uiharu/uiharu.model.json"]
                    });'
                ></script>
        post:
          date: # 显示博文时间
            enable: true
            prepend: <i class="fa-solid fa-calendar-day fa-fw"></i>
          wordcount: # 统计全文字数
            enable: true
            prepend: <i class="fa-solid fa-file-word fa-fw"></i>
            unit: 
          readtime: # 计算文章阅读时间
            enable: true
            prepend: <i class="fa-solid fa-clock fa-fw"></i>
            unit: 
            divided_by: 300 # 正常人的阅读速度大概每分钟三百个字
          copyright:
            | # 我的文章使用最宽松的知识共享协议:署名 4.0 国际 (CC BY 4.0)。您可以自由地:共享 — 在任何媒介以任何形式复制、发行本作品;演绎 — 修改、转换或以本作品为基础进行创作;在任何用途下,甚至商业目的。只要你遵守许可协议条款,许可人就无法收回你的这些权利。惟须遵守下列条件:署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
            <br/>
            <i class="fab fa-creative-commons-by fa-fw"></i>
            <a
              href="https://creativecommons.org/licenses/by/4.0/deed.zh"
              rel="license">
              CC BY 4.0
            </a>
            (除特别声明或转载文章外)
            <br/>
            <i class="fa-solid fa-coffee fa-fw"></i>
            <a href="/merger/">如果这篇博客帮助到你,可以请我喝一杯咖啡~</a>
        merger: # 打赏页,需要配置!
          append_to_head:
            - | # 需要配置的变量见<https://merger.justhx.com/cn/docs/configure>
              <script>
                var myname = "WuK";
                var profile = "i@wu-kan.cn";
                var usage = "payment";
                var wechat = "wxp://f2f0BhUoIC_9gex7-tC2PRvVuoA486mK5WyC";
                var tenpay = "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQ77zFwQMY-6u57gU%3D_xxx_sign&u=942759535&n=%E8%94%9A";
                var alipay = "https://qr.alipay.com/fkx02750b5kbplxvudqrx16";
                var paypal = "https://paypal.me/wukan0621";
                var multilingual = false;
                var branding = false;
                var title = "选择你的支付方式";
                var subtitle = "跟随进一步的指示以向" + myname + "付款";
                var qrcodeapi = "https://www.zhihu.com/qrcode?url=";
                var gravatar_url = "https://gravatar.loli.net/avatar/";
              </script>
            - |
              <meta
                charset="utf-8"
              />
              <meta
                name="viewport"
                content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
              />
              <meta
                http-equiv="Content-Security-Policy"
                content="upgrade-insecure-requests"
              />
            - | # merger的页面样式
              <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/gh/hifocus/merger@0.26.1/assets/styles/spectre.css/spectre-modified.min.css,gh/hifocus/merger@0.26.1/assets/styles/style.min.css">
              <script defer="defer" src="https://cdn.jsdelivr.net/combine/npm/jquery@3.5.1"></script>
              <script defer="defer" src="https://cdn.jsdelivr.net/combine/gh/lrsjng/jquery-qrcode@0.18.0/dist/jquery-qrcode.min.js,npm/blueimp-md5@2.18.0/js/md5.min.js,gh/hifocus/merger@0.26.1/assets/js/function.min.js,gh/hifocus/merger@0.26.1/assets/js/font_974919_xgtacm93vxp.min.js"></script>
        home: # 展示页的配置可跳过,详见<https://revealjs.com/>
          append_to_section_tag:
            - key: data-markdown
            - key: data-separator # 水平展示页分隔符
              value: <!-- .slide -->
            - key: data-separator-vertical # 垂直展示页分隔符
              value: <!-- .slide vertical=true -->
            - key: data-background-color
              value: "White"
          prepend: |
            <link
              rel="stylesheet"
              href="https://cdn.jsdelivr.net/combine/npm/reveal.js@4.4.0/dist/reveal.min.css,npm/reveal.js@4.4.0/dist/theme/serif.min.css"
            />
            <style>
              .sidebar {
                line-height: 1.5;
              }
              .reveal .slides {
                text-align: left;
              }
              .reveal a,
              .reveal a:hover,
              .reveal a:focus {
                color: inherit;
                border-bottom: 1px solid var(--theme-base-color);
              }
            </style>
          append: |
            <script
              async="async"
              src="https://cdn.jsdelivr.net/combine/npm/reveal.js@4.4.0/dist/reveal.min.js,npm/reveal.js@4.4.0/plugin/markdown/markdown.min.js,npm/reveal.js@4.4.0/plugin/math/math.min.js"
              onload="
              for(let x of document.getElementsByClassName('wrap'))
                x.classList.add('reveal');
              Reveal.initialize({
                height: '100%',
                mouseWheel: true,
                navigationMode: 'linear',
                plugins: [ RevealMarkdown,RevealMath.KaTeX ]
              });
            "></script>

compress_html: # <https://github.com/penibelst/jekyll-compress-html>
  clippings: all
  comments: [] # 注释不能压缩,否则 reveal.js 的 ppt切屏受影响
  endings: all
  ignore:
    envs: all # 暂时关掉页面压缩
  blanklines: false
  profile: false
  startings: []

# githubpage上支持的插件见<https://pages.github.com/versions/>
plugins: # <https://jekyllrb.com/docs/plugins/>
  - jekyll-readme-index # 使用readme做index,从而和github渲染效果一致
  - jekyll-default-layout # 为每个markdown自动生成layout
  - jekyll-seo-tag # 为每个页面生成标题
  - jekyll-sitemap # 为站点生成站点地图
  - jekyll-feed # 为站点生成RSS源
  - jekyll-redirect-from # 站点页面重定向
  - jekyll-remote-theme # 使用remote_theme插件实现主题的前后分离,详见<https://github.com/benbalter/jekyll-remote-theme/>

remote_theme: https://github.com/wu-kan/jekyll-theme-WuK@4.2.0 #使用固定版本号以防止主题更新导致站点显示错乱

readme_index: # 缺失index.md和index.html时,使用README.md代替之
  with_frontmatter: true # 支持带有yaml头的README

webmaster_verifications: # <https://jekyll.github.io/jekyll-seo-tag/usage/>
  google: YIKi1rBnyUaS-DMYiluseI5kZzTwjCkTFmKkSkMZDJk
  baidu: szbTSfUGAB

permalink: pretty
# timezone: Asia/Shanghai # 解决githubpage显示时间不正确的问题,见<https://www.iana.org/time-zones>
future: true # 允许发布时间在未来的文章

# limit_posts: 999 # 限制博文数量
# encoding: utf-8

markdown: kramdown
kramdown: # 见<https://kramdown.gettalong.org/options.html>
  input: GFM # 见<http://jekyllcn.com/docs/configuration/#kramdown>
  syntax_highlighter_opts: # 可见<https://kramdown.gettalong.org/syntax_highlighter/rouge.html>
    block:
      disable: false
      line_numbers: false #渲染出来的效果好鬼畜
    span:
      disable: false
# 以下为 githubpage上不可修改的参数,见<https://help.github.com/en/github/working-with-github-pages/about-github-pages-and-jekyll>
#lsi: false # 为相关文章生成索引
#safe: true # 禁用自定义插件
#source: [your repo's top level directory] # Jekyll 读取文件的路径
#incremental: false # 增量生成
#highlighter: rouge # 代码高亮器
#gist:
#  noscript: false
#kramdown:
#  math_engine: mathjax
#  syntax_highlighter: rouge

修改仓库内容

  • README.md:是访问博客站带你默认看到的内容,作为博主的自我介绍
  • _posts/2017-09-01-comments.md:留言存放友链的地方
  • _posts/:由于 fork 的是主题作者的博客,因此主题作者的博文也都在其中

配置的文档

配置过程可以参考主题作者提供的文档

具体内容如下:

Quick Start

感谢使用我的博客主题,下面跟随一些简单操作快速生成你的站点/文档/展示页面吧~无需命令行~

在 Github 上阅读此页

Licensecommit-activitylast-commitCountLanguageTopLanguageCodeSizeRepoSizeDownloadsWatcherscontributorsReleaserelease-date

第一步

点这个链接https://github.com/wu-kan/wu-kan.github.io/fork,把示例站点 fork 到你的仓库。注意,fork 的是示例站点,fork 主题仓库是不完整的!

第二步

在你 Fork 之后的仓库里,选择 Setting,将仓库名改成your-name.github.io

例如这里我用来示例的 GitHub 小号是 @Mizuno-Ai ,改的名字就是Mizuno-Ai.github.io

TW9GSNUkfv6lsyr8Xh1qKaRjwD

第三步

把 Setting 拉到下面找到 Github Pages 相关选项,将 Source 从改成 None 改到 master branch,再将 Custom domain 改成你的网址。

csFVmdQfKTP4SWApE9DOkMwhZt

2t96cfb85yDwxeAn3XLPmkrI1U

稍等一下,应该会提示你的博客地址可以访问了!你已经成功大半啦~

第四步

回到仓库根目录下,自行配置_config.yml,能看懂多少就改多少。大部分配置项我都加了注释。

4.1.png

4.2.png

4.3.png

要注意 yaml 格式中缩进是很重要的,不要破坏本来的缩进。

第五步

回到仓库根目录下,点开/_posts/文件夹,这个目录存放博客文章。点 Create new file 就可以写你自己的博客了。这些文章使用的格式是 Markdown,这是一种非常简单易用的有格式文本标记语言,文件后缀名是 md

5.1.png

文件命名方式需要是日期-标题.md;文件内容前最好要有一个title: 标题的 yaml 头,以防止显示错乱。

5.2.png

写好之后和改配置的操作类似,点 Commit 提交。现在再访问你的博客,可以发现你的博文已经出现在归档页的最上面了!Enjoy~

欢迎StarForkIssue

进一步定制

以上所有操作均可直接在 github 网页上进行。如果你在本地运行博客的测试,或是对博客进行更高级别的定制,推荐先阅读以下几篇博文:

统一中文文案、排版的相关用法,降低团队成员之间的沟通成本,增强网站气质,推荐阅读:

Demo

Demo

文件结构

我的主题主要实现了如下几种渲染页面的样式供选择。

layout: default

基于poole/lanyon的页面,提供一个侧边栏和可随侧边栏移动的 warp。

layout: page

基于layout: default,提供了一个标题栏.masthead和文本框的.content

layout: comments

基于layout: page的留言页,留言插件使用了Valine

示例:https://wu-kan.cn/comments/

layout: post

基于layout: comments的博文页,为每篇博文增加描述信息。

示例:基于 Jekyll 搭建个人博客

layout: merger

基于 merger 的打赏页。

示例:https://wu-kan.cn/merger/

layout: home

v3.1.0版本开始,layout: home被我重写,基于hakimel/reveal.js实现了一个简洁的展示页面,既可以作为博客的封面,也可以用作 presentation!

示例:我的数图期末展示页

向你的 markdown 文件中插入水平页面分隔符和垂直页面分隔符(可自定义),即可快速开始使用啦!可以以本篇文档作为使用示例。

推荐的分隔符是垂直标签水平标签,这样可以和vscode-markdown-preview-enhanced的标记兼容,方便本地预览。

如果你希望使用它来渲染主页之外的页面,可以在你的 markdown 的 yaml 头中设置layout: home即可!当然,如果你不希望使用它来渲染主页,你也可以将主页的 layout 设置成其他的。

想针对特定页面默认开启侧边栏?在 yaml 头中设置jekyll-theme-WuK: default: sidebar: open: true即可!

想针对特定页面隐藏侧边栏?在 yaml 头中设置jekyll-theme-WuK: default: sidebar: disable: true即可!会覆盖sidebar: open的设置。

这是一个仍在开发的特性(主要是找不到美观精致的展示主题),如果有建议/需求欢迎 issue!

更多的功能,请尽情探索hakimel/reveal.js例如,按 Esc 可以生成一个 ppt 大纲

初心

我曾做什么?

我正做什么?

我想做什么?

我该做什么?

章北海感到父亲的灵魂从冥冥中降落到飞船上,与他融为一体,他按动了操作界面上那个最后的按钮,心中默念出那个他用尽一生的努力所追求的指令:

“‘自然选择’,前进四!”

目标是打造一个尽可能简洁,而可定制内容又尽可能丰富的博客。如果有更好的建议,欢迎给我提 Issue!

声明

除特别声明或转载外,所有博文采用署名-相同方式共享 4.0 国际协议进行许可。

博客基于MIT License开源于GitHub

致谢

托管于Github Pages,感谢。

博客引擎来自于jekyll/jekyll,感谢。

CDN 加速服务来自于https://cdn.jsdelivr.net/https://loli.net,感谢。

博客主题基于poole/lanyon,感谢。

图标库来自于fontawesome-free,感谢。

展示页基于hakimel/reveal.js,感谢。

捐赠页来自hifocus/merger,感谢。

页面压缩来自于penibelst/jekyll-compress-html,感谢。

评论系统来自于utterance/utterances,感谢。

页面统计来自于不蒜子,感谢。

博客搜索插件来自于christian-fei/Simple-Jekyll-Search,感谢。

博文目录插件来自于allejo/jekyll-toc,感谢。

代码高亮及插件来自于PrismJS,感谢。

Live2D 前端插件来自于Dreamer-Paul/Pio,感谢。

Live2D Model 来自于imuncle/live2dxiaoski/live2d_models_collection,感谢。

头像、壁纸来自于https://www.pixiv.net/artworks/71574257https://www.pixiv.net/artworks/71932901https://www.pixiv.net/artworks/74559485,感谢(侵权必删)。

头像翻转效果受启发自leopardpan/leopardpan.github.io,感谢。

历程

2022-01-26 v4.2.0

  • layout: page 页面的插件支持智能引入

2021-06-07 v4.1.0

  • 对主题进行精简,去掉
    • layout: archive
    • layout: tags
    • layout: page404
  • 配合 jekyll-redirect-from 模板,增加
    • layout: redirect
  • 使用utterances代替 valine

2021-06-03 v4.0.5

  • 一些页面选项的增强
    • 可直接从前一个版本升级

2021-05-23 v4.0.4

  • 后端实现精简,去掉主页部分

2021-01-10 v4.0.3

  • document 样式更新,渲染成类似于 $\LaTeX$ 的样式

2020-09-15 v4.0.2

  • 侧边栏增加 minivaline-counter 的可选功能
    • 可用于替代不蒜子计数器,修复两个计数器数量不一致的问题

2020-07-23 v4.0.1

  • 修复使用 rouge 并开启代码行号时使用jekyll-compress-html导致渲染错误的问题
  • 修复 search.json 失效的问题
  • default、home 增加 append 配置项
  • 打包发布

2020-06-21 v4.0.0

  • 将所有主题配置变量移动到 front-matter-defaults,从而使得所有页面可以自定义配置
  • 标签页、归档页增加一个目录(可选)
  • 插件位置调整到页面底部,提高页面加载速度

2020-05-29 v3.2.1

2020-05-21 v3.2.0

  • 修复 reveal.js 自动更新到 4.0 版本后渲染错误的问题!
  • document 页回归,现在可以生成 github readme 风格的可打印文档
  • 修复当博文没有标签时仍然显示标签图标的 bug
  • 配置项中的 alert 命名不规范,全部换成 append/prepend
  • 博客目录插件更换成 allejo/jekyll-toc,纯 Liquid !
    • 下一步将按同样思路优化 katex、mermaid、prism 三个插件的渲染速度

2020-04-28 v3.1.5

  • 修复博文字数统计忽略中文的问题
  • 修复 valine 阅读量统计失效的问题

2020-04-20 v3.1.4

  • 修复归档页年份博文数量统计错误的问题

2020-04-20 v3.1.3

  • 归档页、标签页增加一个饼状统计图
    • 好丑啊,可以关掉
  • 归档页现在按照年份归档

2020-04-12 v3.1.2

  • poole/lanyon 更新至 v1.1.0
  • Live2D 增加变换主题按钮
  • page 中用到的变量移动到jekyll-theme-WuK命名空间下

2020-03-28 v3.1.1

  • 删去壁纸,加快本地测试速度
  • 修复 layout: home 中代码块渲染可能存在的一些问题

2020-02-29 v3.1.0

  • 使用 bundle 管理版本和运行依赖
  • 使用 Remote_theme 将博客主题和博文分离
  • 部署 gitlab 镜像站,解决百度爬虫爬不到的问题
  • 基于hakimel/reveal.js重写layout: home
  • 更换 live2d 插件为Dreamer-Paul/Pio
  • 更换 live2d 模型
  • 定制 live2d 提示语
  • css 样式更新
    • 彩虹滚动条
    • 页面加载动画
    • 更换竖屏下壁纸

这么大的更新感觉版本号改成“4.0.0”也不为过嘛。

不过实际上这个版本保持了和前一个版本的兼容,因此是“3.1.0”。

2020-02-14 v3.0.0

  • 插件引入方式完全重构,现在直接嵌入 html 即可
  • 更换 live2d 插件为kooritea/live2d-helper,从而支持 live2d 定制
    • 看板娘隐藏按钮
  • 去除 jQuery
  • 去除 categories 标签,使用 tags 代替
  • 博客结构调整,把/public目录迁移到 jekyll 默认的/assets
  • merger 打赏页
  • 侧边栏样式调整,更加简洁
  • 为竖屏显示增加壁纸
  • 全局搜索
  • $\KaTeX$ 行间公式

2020.01.31 v2.4.1

  • 赞赏按钮样式修复
  • 使用https://loli.net加速 gravatar,感谢~
  • 网站字体更换为等宽字体+微软正黑体
  • live2d 移动到页面右侧
  • 更换爱酱壁纸

2019.11.11 v2.4.0

  • 修复sidebar-overlay失效的 Bug
  • 修复赞助按钮点两次才出现的 Bug
  • 修复 mermaid 不显示的 Bug
  • 去掉正文部分的白色半透明背景
  • 动态背景增加 nest 粒子动画(花里胡哨,默认关闭
  • Ribbon 动态背景默认关闭,可在配置文件中去掉注释打开(花 里 胡 哨
  • 博文显示信息增加 tag
  • 变迁页面增加 tag、categories 图标及对应分类文章数量
  • 页面显示适应宽屏显示器
  • layout 增加
    • index
    • tag
    • page404

2019-08-30 v2.3.0

  • 更换 cdn 为jsDelivr
  • 升级 fontaswsomev4.7.0 至 fontawesome-freev5.10.2,支持的图标数量由 675 增加至 1535
  • 所有脚本和插件 JSLoader 化,增加移植性和访问速度
  • 界面调整
    • 正文部分增加背景,从而减少动态 ribbon 背景影响的阅读体验
    • sidebar 微调
  • layout 删除 document 页

2019-07-06 v2.2.1

  • prismjs 使用UNPKG加速
  • 删去 layout 中的 404 页(因为只需要引入 js 脚本)

2019-06-28 v2.2.0

  • 博客结构微调
  • 将大部分博客用到的 jscdn 换成 unpkg.com,感谢其提供的加速服务~
  • 留言板加入友链

2019-05-03 v2.1.4

  • valine 更新
    • 现在支持记录访问者 IP
    • 每次重新拉取评论者头像

2019-04-29 v2.1.3

  • 页面样式微调,将 masthead 调矮,将标题字号改小

2019-03-20 v2.1.2

  • 修复 sidebar 展开时回到顶部的问题

2019-03-18 v2.1.1

  • 一些界面上的小调整

2019-03-01 v2.1.0

  • 调整某些插件
  • layout 新增 document 页,一个只开启$\KaTeX$而不引入任何其他样式的页面,主要是方便自己生成可打印的 ICPC 模板和一些课程报告
  • layout 新增 404 页,可选择开启腾讯公益
  • mermaid 支持 markdown 扩展了

2019-02-24 v2.0.1

  • sidebar 的触发按钮样式换成了 bars,原来的样式更像是菜单
  • 一点页面上的小调整

2019-02-23 v2.0.0

  • 重构完成
  • 正式开源

2019-02-19

  • 模块化·初步
  • 博客搜索实现

2019-02-01

2019-01-31

  • mathjax 换 katex
  • post 访问量统计

2019-01-24

  • 代码高亮
  • 选中代码按钮
  • 代码语言按钮

2019-01-23

  • 加入文章目录到 SideBar

2019-01-22

  • 加入 Ribbon 动态背景

2019-01-21

  • 加入 valine 评论系统,留言页实现

2019-01-20

  • 加入归档页

2019-01-19

  • 加入标签页

2019-01-18

  • 开始用 Jekyll 重构整个博客

折腾吧,折腾是才最好玩的。

2019-01-13

  • 更换 Next.Muse 主题模板
  • 少量修改页面自定义样式布局,主要是 sidebar
  • 将网易云音乐 iframe 移动到 description,感觉挺有意思的

2019-01-12

  • 将 NexT 版本更新至 v6.7.0

2018-12-23

  • 页面字体修改
  • 网易云音乐 iframe 加入 SideBar

2018-12-16

  • 引入 mermaid 支持
  • 修复部分 Latex 渲染的 Bug

2018-11-24

  • 将 NexT 版本更新至 v6.5.0
  • 用 Valine 更换失效的 Gitment 评论系统
  • 加入 Leancloud 和 busuanzi 页面统计

2018-11-20

  • 谷歌,百度搜索页面提交

2018-11-18

  • 全局透明化
  • 动态背景
  • 页面加载动画
  • Latex 支持

2018-11-16

  • 主题由默认的 Landspace 换至 NexT v5.1.4
  • 使用 Next.Pisces 主题模板
  • 开始对网页进行自定义样式布局
  • 尝试加入 Gitment,但初始化总是不成功

2018-11-15

  • 在 Github 上成功部署博客
  • 成功迁移原 CSDN 博客上的所有文章
  • live2d