基于 Hexo 从零开始搭建个人博客（六）

permalink: :year/:month/:day/:title

npm install hexo-abbrlink --save

- permalink: :year/:month/:day/:title/
#修改为
permalink: post/:abbrlink.html # post为自定义前缀
abbrlink:
  alg: crc32   #算法： crc16(default) and crc32
  rep: hex     #进制： dec(default) and hex

©${theme.footer.owner.since} - ${nowYear} By ${config.author}

&copy;${theme.footer.owner.since} - ${nowYear ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

©${nowYear} By ${config.author} 

&copy;${nowYear ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before,
#post .post-outdate-notice:before,
.fontawesomeIcon,
.note:not(.no-icon)::before,
hr:before {
    display: inline-block;
    font-weight: 600;
    font-style: normal;
    font-variant: normal;
    font-family: 'Font Awesome 5 Free';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased
}
#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before {
    position: absolute;
    color: #f47466;
    /* 回形针 */
    content: '\f0c1';  
    line-height: 1;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out;
    /* 若要使用风车效果，请去掉下面的注释 */
    /* content: '\f863'; 
    animation: avatar_turn_around 1s linear infinite; */
}
#article-container h1 {
    padding-left: 1.4rem
}

#article-container h1 code {
    font-size: 1rem
}

#article-container h1:before {
    margin-left: -1.3rem;
    top: calc(50% - .5rem);
    font-size: 1rem
}

#article-container h1:hover {
    padding-left: 1.6rem
}

#article-container h2 {
    padding-left: 1.3rem
}

#article-container h2 code {
    font-size: .9rem
}

#article-container h2:before {
    margin-left: -1.4rem;
    top: calc(50% - .45rem);
    font-size: .9rem
}

#article-container h2:hover {
    padding-left: 1.5rem
}

#article-container h3 {
    padding-left: 1.2rem
}

#article-container h3 code {
    font-size: .8rem;
    top: calc(50% - .4rem);

}

#article-container h3:before {
    margin-left: -1.2rem;
    top: calc(50% - .4rem);
    font-size: .8rem
}

#article-container h3:hover {
    padding-left: 1.4rem
}

#article-container h4 {
    padding-left: 1.1rem
}

#article-container h4 code {
    font-size: .7rem
}

#article-container h4:before {
    margin-left: -1rem;
    top: calc(50% - .35rem);
    font-size: .7rem
}

#article-container h4:hover {
    padding-left: 1.3rem
}

#article-container h5 {
    padding-left: 1rem
}

#article-container h5 code {
    font-size: .6rem
}

#article-container h5:before {
    margin-left: -.8rem;
    top: calc(50% - .3rem);
    font-size: .6rem
}

#article-container h5:hover {
    padding-left: 1.2rem
}

#article-container h6 {
    padding-left: 1rem
}

#article-container h6 code {
    font-size: .6rem
}

#article-container h6:before {
    margin-left: -.8rem;
    top: calc(50% - .3rem);
    font-size: .6rem
}

#article-container h6:hover {
    padding-left: 1.2rem
}

npm install hexo-douban --save

douban:
  user: ethan_tzy
  builtin: false
  book:
    title: '腹有诗书气自华'
    quote: 'One who is filled with knowledge always behaves with elegance.'
  movie:
    title: '梦想与现实的碰撞'
    quote: 'The collision between dream and reality.'
  game:
    title: '诅咒中闪烁泪光，倾诉霜之哀伤。'
    quote: 'Tears flicker in the curse and pour out the sorrow of frost.'
  timeout: 10000

# 如果你有使用hexo-douban，可配置這個
douban:
   meta: true
   movies_img: https://fastly.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg
   books_img: https://fastly.jsdelivr.net/npm/blog-gallery@1.0.0/1/20200206161657.webp
#   games_img:

hexo douban

<script type="text/javascript" id="clstr_globe" src="**********************">

.card-widget.card-map
  .card-content
    .item-headline
      i.fa.fa-globe-asia(aria-hidden="true")
      span= _p('aside.card_map')
    script#clstr_globe(type="text/javascript" defer="defer" src="此处填入你自己的代码")

if theme.aside.card_map
        !=partial('includes/widget/card_map', {}, {cache:true})

.card-widget.card-pixiv
 .card-content
  .item-headline
    i.fa.fa-image(aria-hidden="true")
    span= _p('aside.card_pixiv')
    iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:99%;height:380px;margin:0;")

if theme.aside.card_pixiv
    !=partial('includes/widget/card_pixiv', {}, {cache:true})

npm install hexo-bilibili-bangumi --save

npm install hexo-bilibili-bangumi --update --save

bangumi:
  enable: true 
  vmid: 321638084
  title: '生命不息，追番不止。'
  quote: 'Where there is life, there is life.'
  show: 1
  loading: '/img/bangumi-loading.gif'

hexo new page bangumis

---
title: bangumis
date: 2020-12-14 14:43:39
type: "bangumis"
---

npm install --save hexo-helper-live2d

npm install --save live2d-widget-model-shizuku

live2d:
  enable: true
  scriptFrom: local # 默认
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-shizuku  #模型选择
  display:
    position: right  #模型位置
    width: 150       #模型宽度
    height: 300      #模型高度
    hOffset: 20
    vOffset: -20
  mobile:
    show: false      #是否在手机端显示

npm i hexo-tag-aplayer --save

aplayer:
  meting: true
  asset_inject: false

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

<div class="aplayer no-destroy" data-id="720305850" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div>

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="720305850" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div>

#toggle-sidebar {
    bottom: 80px
}

inject:
    head:
    - '<style type="text/css">#toggle-sidebar {bottom: 80px}</style>'

#toggle-sidebar {
    left: 100px
}

inject:
    head:
    - '<style type="text/css">#toggle-sidebar {left:100px}</style>'

/*
 * @Author: tzy1997
 * @Date: 2020-12-15 20:55:25
 * @LastEditors: tzy1997
 * @LastEditTime: 2021-01-12 19:02:25
 */

$(function() {
    // 气泡
    function bubble() {
        $('#page-header').circleMagic({
            radius: 10,
            density: .2,
            color: 'rgba(255,255,255,.4)',
            clearOffset: 0.99
        });
    }! function(p) {
        p.fn.circleMagic = function(t) {
            var o, a, n, r, e = !0,
                i = [],
                d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
                l = this[0];

            function c() { e = !(document.body.scrollTop > a) }

            function s() { o = l.clientWidth, a = l.clientHeight, l.height = a "px", n.width = o, n.height = a }

            function h() {
                if (e)
                    for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
                requestAnimationFrame(h)
            }

            function f() {
                var t = this;

                function e() { t.pos.x = Math.random() * o, t.pos.y = a 100 * Math.random(), t.alpha = .1 Math.random() * d.clearOffset, t.scale = .1 .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" Math.floor(255 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.random().toPrecision(2) ")" : t.color = d.color }
                t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
            }! function() {
                o = l.offsetWidth, a = l.offsetHeight,
                    function() {
                        var t = document.createElement("canvas");
                        t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
                    }(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
                for (var t = 0; t < o * d.density; t++) {
                    var e = new f;
                    i.push(e)
                }
                h()
            }(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
        }
    }(jQuery);

    // 调用气泡方法
    bubble();
})

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
    - <script data-pjax defer src="https://npm.elemecdn.com/tzy-blog/lib/js/theme/chocolate.js"></script>

body {
    cursor: url(https://bu.dusays.com/2022/05/17/6283c365d20dd.png), auto;
}

.hide-block>.hide-button.open,
.hide-inline>.hide-button.open {
    display: block
}

a,
button,
img {
    cursor: url(https://bu.dusays.com/2022/05/17/6283c376afcfc.png), auto
}

/*!
 * Fairy Dust Cursor.js
 * - 90's cursors collection
 * -- https://github.com/tholman/90s-cursor-effects
 * -- http://codepen.io/tholman/full/jWmZxZ/
 */

(function fairyDustCursor() {

    var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
    var width = window.innerWidth;
    var height = window.innerHeight;
    var cursor = { x: width / 2, y: width / 2 };
    var particles = [];

    function init() {
        bindEvents();
        loop();
    }

    // Bind events that are needed
    function bindEvents() {
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('touchmove', onTouchMove);
        document.addEventListener('touchstart', onTouchMove);

        window.addEventListener('resize', onWindowResize);
    }

    function onWindowResize(e) {
        width = window.innerWidth;
        height = window.innerHeight;
    }

    function onTouchMove(e) {
        if (e.touches.length > 0) {
            for (var i = 0; i < e.touches.length; i++) {
                addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
            }
        }
    }

    function onMouseMove(e) {
        cursor.x = e.clientX;
        cursor.y = e.clientY;
        addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
    }

    function addParticle(x, y, color) {
        var particle = new Particle();
        particle.init(x, y, color);
        particles.push(particle);
    }

    function updateParticles() {
        // Updated
        for (var i = 0; i < particles.length; i++) {
            particles[i].update();
        }
        // Remove dead particles
        for (var i = particles.length - 1; i >= 0; i--) {
            if (particles[i].lifeSpan < 0) {
                particles[i].die();
                particles.splice(i, 1);
            }
        }
    }

    function loop() {
        requestAnimationFrame(loop);
        updateParticles();
    }

    /**
     * Particles
     */
    function Particle() {
        this.character = "*";
        this.lifeSpan = 120; //ms
        this.initialStyles = {
            "position": "fixed",
            "top": "0", //必须加
            "display": "block",
            "pointerEvents": "none",
            "z-index": "10000000",
            "fontSize": "20px",
            "will-change": "transform"
        };

        // Init, and set properties
        this.init = function(x, y, color) {
            this.velocity = {
                x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
                y: 1
            };
            this.position = { x: x - 10, y: y - 20 };
            this.initialStyles.color = color;
            this.element = document.createElement('span');
            this.element.innerHTML = this.character;
            applyProperties(this.element, this.initialStyles);
            this.update();
            document.body.appendChild(this.element);
        };
        this.update = function() {
            this.position.x += this.velocity.x;
            this.position.y += this.velocity.y;
            this.lifeSpan--;

            this.element.style.transform = "translate3d(" this.position.x "px," this.position.y "px,0) scale(" (this.lifeSpan / 120) ")";
        }
        this.die = function() {
            this.element.parentNode.removeChild(this.element);
        }
    }

    // Applies css `properties` to an element.
    function applyProperties(target, properties) {
        for (var key in properties) {
            target.style[key] = properties[key];
        }
    }

    init();
})();

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    border-radius: 2em;
    /* background-color: rgba(73, 177, 245, .2); */
}

::-webkit-scrollbar-thumb {
    background-color: rgb(255 255 255 / .3);
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    border-radius: 2em
}

::-webkit-scrollbar-corner {
    background-color: transparent
}

menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list||hide:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

/* 手机侧边栏默认不展开 */
var mobile_sidebar_menus = document.getElementById("sidebar-menus");
if (mobile_sidebar_menus) {
    var menus_item_child = mobile_sidebar_menus.getElementsByClassName(
        "menus_item_child"
    );
    var menus_expand = mobile_sidebar_menus.getElementsByClassName("expand");
    for (var i = 0; i < menus_item_child.length; i++) {
        menus_item_child[i].style.display = "none";
    }
}

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://bu.dusays.com/2021/03/06/38a2c5cd8b44e.jpg %}
{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>

{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}

/* valine 评论 */

/* 去除了dark模式下头像border和padding */
[data-theme='dark'] .v[data-class=v] .vcards .vcard .vimg {
    padding: 0;
    border: none;
}

[data-theme='dark'] #post .v[data-class=v] .vcontent img {
    display: inline-block;
}

.v[data-class=v] .emoji,
.v[data-class=v] .vemoji {
    vertical-align: text-bottom;
}

.v[data-class=v] .vwrap .vemojis {
    max-height: 260px !important;
}

.v[data-class=v] .vwrap .vemojis i[title|=menhera] {
    width: 22% !important;
    margin: 5px 10px;
}

.v[data-class=v] .vwrap .vemojis img[alt|=menhera] {
    max-width: 100% !important;
}

.v[data-class=v] .vcontent .emoji[alt|=menhera],
.v[data-class=v] .vcontent .vemoji[alt|=menhera] {
    max-width: 300px !important;
    /* vertical-align: middle; */
    margin: 8px 1px;
    display: block !important;
}

@media screen and (max-width: 1200px) {
    .v[data-class=v] .vwrap .vemojis i[title|=menhera] {
        margin: 5px 8px;
    }
}

@media screen and (max-width: 768px) {
    .v[data-class=v] .vcontent .emoji[alt|=menhera],
    .v[data-class=v] .vcontent .vemoji[alt|=menhera] {
        max-width: calc(100% - 30px) !important;
    }
}

@media screen and (max-width: 576px) {
    .v[data-class=v] .vwrap .vemojis {
        max-height: 200px !important;
    }
    .v[data-class=v] .vwrap .vemojis i[title|=menhera] {
        margin: 5px 5px;
    }
}

@media screen and (max-width: 400px) {
    .v[data-class=v] .vwrap .vemojis i[title|=menhera] {
        width: 21% !important;
    }
}

function initValine () {
    const valine = new Valine(Object.assign({
        el: '#vcomment',
        appId: '#{theme.valine.appId}',
        appKey: '#{theme.valine.appKey}',
        placeholder: '#{theme.valine.placeholder}',
        avatar: '#{theme.valine.avatar}',
        meta: '#{theme.valine.guest_info }'.split(','),
        pageSize: '#{theme.valine.pageSize}',
        lang: '#{theme.valine.lang}',
        recordIP: #{theme.valine.recordIP},
        serverURLs: '#{theme.valine.serverURLs}',
        emojiCDN: '#{theme.valine.emojiCDN}',
        emojiMaps: !{emojiMaps},
        enableQQ: #{theme.valine.enableQQ},
        path: window.location.pathname,
        requiredFields: [!{theme.valine.requiredFields ? JSON.stringify(theme.valine.requiredFields).split(',') : ''}],
      master: '#{theme.valine.master}'.split(','),
      friends: '#{theme.valine.friends}'.split(','),
      tagMeta: '#{theme.valine.tagMeta || "博主,小伙伴,访客"}'.split(','),
      metaPlaceholder: !{JSON.stringify(theme.valine.metaPlaceholder || {})},
        visitor: #{theme.valine.visitor}
    }, !{JSON.stringify(theme.valine.option)}))
}

# valine
# https://valine.js.org
valine:
  appId:  # leancloud application app id
  appKey:  # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder:  # valine comment input placeholder (like: Please leave your footprints)
  guest_info: nick,mail,link # valine comment header info (nick/mail/link)
  recordIP: false # Record reviewer IP
  serverURLs:  # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  emojiCDN:  # emoji CDN
  enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick,mail # required fields (nick/mail)
master: # md5加密后的博主邮箱
  - d4e7????????????44a14e9a94  #可添加多个
friends: # md5加密后的小伙伴邮箱
  - 5c?????????????e268ad3819c #可添加多个
  - 7c?????????????e2????3919c
tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'
metaPlaceholder:
  nick: 昵称/QQ号(必填)
  mail: 邮箱(必填)
  link: 网址(https://)

    CDN:
      # comments
      gitalk: https://fastly.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
      gitalk_css: https://fastly.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
-     valine: https://fastly.jsdelivr.net/npm/valine/dist/Valine.min.js
    valine: https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/valine_f/valine.min.js

extends includes/layout.pug
block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
  if theme.categoryBar.enable
    .recent-post-item(style='height:auto;width:100%;padding:0px;')
      #categoryBar!= list_categories(site.categories,{class: 'categoryBar',depth: 1})
    +postUI
    include includes/pagination.pug

if hexo-config('categoryBar.enable')
  #categoryBar
    width 100%!important
  ul
    &.categoryBar-list
      margin 5px 5px 0 5px!important
      padding 0!important

  li
    &.categoryBar-list-item
      font-weight bold
      display inline-block
      height 180px!important
      margin 5px .5% 0 .5%!important
      background-image linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(16, 16, 16, 0) 100%)
      border-radius 10px
      padding 25px 0 25px 25px!important
      box-shadow rgba(50, 50, 50, 0.3)  50px 50px 50px 50px inset
      overflow hidden
      background-size 100%!important
      background-position center!important
      &:hover
        background-size 110%!important
        box-shadow inset 500px 50px 50px 50px rgba(50,50,50, 0.6)
        span
          &.categoryBar-list-count
            &::after
              transition all .5s
              transform translate(-100%, 0)
  a
    &.categoryBar-list-link
      color white!important
      font-size 20px!important
      &::before
        content '|'!important
        color white!important
        font-size 20px!important
      &:after
        content ''
        position relative
        width 0
        bottom 0
        display block
        height 3px
        border-radius 3px
        background-color white
      &:hover
        &:after
          width 90%
          left 1%
          transition all 0.5s

  span
    &.categoryBar-list-count
      display block!important
      color white!important
      font-size 20px!important
      &::before
        content '\f02d'!important
        padding-right 15px!important
        @extend .fontawesomeIcon
      &::after
        padding 5px
        display block!important
        color white!important
        font-size 20px!important
        position relative
        right -100%
  covers = hexo-config('categoryBar.cover')
  for cover,i in covers
    li.categoryBar-list-item:nth-child({i+1})
      background unquote(cover)
  descrs = hexo-config('categoryBar.descr')
  for descr,i in descrs
    li.categoryBar-list-item:nth-child({i+1})>span::after
      content descr!important
  if hexo-config('categoryBar.column') == 'odd'
    li
      &.categoryBar-list-item
        width 32.3%!important
  else if hexo-config('categoryBar.column') == 'even'
    li
      &.categoryBar-list-item
        width 24%!important
  @media screen and (max-width: 650px)
    li
      &.categoryBar-list-item
        width 48%!important
        height 150px!important
        margin 5px 1% 0 1%!important

  $caterow =  hexo-config('categoryBar.row')?hexo-config('categoryBar.row'):2
  .categoryBar-list
    max-height 190px * $caterow
    overflow auto
    &::-webkit-scrollbar
      width 0!important
  @media screen and (max-width: 650px)
    .categoryBar-list
      max-height 160px * $caterow

categoryBar:
  enable: true
  column:  odd # 显示列数,odd：3列 | even：4列
  row: 2 #显示行数，默认两行，超过行数切换为滚动显示
  descr:
    - Good things to share
    - Back end talk
    - personal diary
    - Front end serialization
    - Butterfly theme
    - Other items
  cover:
    - url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover1.webp')
    - '#abcdef' # HEX格式色值需要用''包裹，不然会被识别成注释
    - rgba(45,67,89,0.7)
    - linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(200,16 , 16, 0) 100%)
    - url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover5.webp')
    - url('https://fastly.jsdelivr.net/npm/akilar-candyassets/image/cover6.webp')

npm install hexo-butterfly-clock --save 

# electric_clock
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/theme_f/loading.gif #加载动画自定义 

@font-face {
    font-family: 'tzy';
    /* 字体名自定义即可 */
    src: url('https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/font/ZhuZiAWan.woff2');
    /* 字体文件路径 */
    font-display: swap;
}

body,
.gitcalendar {
    font-family: tzy !important;
}

.categoryBar-list {
    max-height: 400px;
}

.clock-row {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*3s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/

#page-header,
#web_bg {
    -webkit-animation: imgblur 2s 1 ease-in-out;
    animation: imgblur 2s 1 ease-in-out;
}

@keyframes imgblur {
    0% {
        filter: blur(5px);
    }
    100% {
        filter: blur(0px);
    }
}

/*适配使用-webkit内核的浏览器 */

@-webkit-keyframes imgblur {
    0% {
        -webkit-filter: blur(5px);
    }
    100% {
        -webkit-filter: blur(0px);
    }
}
.table-wrap img {
    margin: .6rem auto .1rem !important;
}

/* 标签外挂 网站卡片 start */

.site-card-group img {
    margin: 0 auto .1rem !important;
}

.site-card-group .info a img {
    margin-right: 10px !important;
}

[data-theme='dark'] .site-card-group .site-card .info .title {
    color: #f0f0f0 !important;
}

[data-theme='dark'] .site-card-group .site-card .info .desc {
    color: rgba(255, 255, 255, .7) !important;
}

.site-card-group .info .desc {
    margin-top: 4px !important;
}
/* 代码块颜色 */

figure.highlight pre .addition {
    color: #00bf03 !important;
}

<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/css/function.min.css">

function forbidden_control() {
    $.extend({
        message: function(a) {
            var b = {
                title: "",
                message: "操作成功",
                time: "3000",
                type: "success",
                showClose: !0,
                autoClose: !0,
                onClose: function() {}
            };
            "string" == typeof a && (b.message = a), "object" == typeof a && (b = $.extend({}, b, a));
            var c, d, e, f = b.showClose ? '<div class="c-message--close">×</div>' : "",
                g = "" !== b.title ? '<h2 class="c-message__title">' b.title "</h2>" : "",
                h = '<div class="c-message animated animated-lento slideInRight"><i class=" c-message--icon c-message--' b.type '"></i><div class="el-notification__group">' g '<div class="el-notification__content">' b.message "</div>" f "</div></div>",
                i = $("body"),
                j = $(h);
            d = function() {
                j.addClass("slideOutRight"), j.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
                    e()
                })
            }, e = function() {
                j.remove(), b.onClose(b), clearTimeout(c)
            }, $(".c-message").remove(), i.append(j), j.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
                j.removeClass("messageFadeInDown")
            }), i.on("click", ".c-message--close", function(a) {
                d()
            }), b.autoClose && (c = setTimeout(function() {
                d()
            }, b.time))
        }
    }),
    document.onkeydown = function(e) {
        if (123 == e.keyCode || e.ctrlKey && e.shiftKey && (74 === e.keyCode || 73 === e.keyCode || 67 === e.keyCode) || (e.ctrlKey && 85 === e.keyCode)) return $.message({
            message: "采用本站js及css请注明来源，禁止商业使用！",
            title: "你真坏，不能打开控制台喔!",
            type: "error",
            autoHide: !1,
            time: "3000"
        }), event.keyCode = 0, event.returnValue = !1, !1
    }, document.oncontextmenu = function() {
        return $.message({
            message: "采用本站js及css请注明来源，禁止商业使用！",
            title: "不能右键/长按喔！",
            type: "error",
            autoHide: !1,
            time: "3000"
        }), !1
    }
}

&.not-home-page
  height: 20rem

  +maxWidth768()
    height: 14rem !important

#page-site-info
  position: absolute
  top: 10rem
  padding: 0 .5rem
  width: 100%
  z-index: 2

  +maxWidth768()
    top: 7rem !important

#post-info
  position: absolute
  ... ...

&.has-video
  position: relative 
  height: 80vh !important
  
  #page-site-info
    top: 50% !important
    margin-top: -1.425em

    +maxWidth768()
      top: 7rem !important
      margin-top: 0
    
  +maxWidth768()
    height: 14rem !important
    
&.not-top-img
  margin-bottom: .5rem
  ... ...

#index-video {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 80vh;
    width: 100%;
    object-fit: cover;
}
@media only screen and (max-width: 768px) {
    #index-video {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .bg-cover {
        background-image: none !important;
    }
}

---
title: 留言板
type: 'comment' 
---

- var isHomeClass = is_home() ? 'full_page' : (page.type == 'comment' || page.type == 'link' ) ? 'not-home-page has-video bg-cover' : 'not-home-page'

if page.type == 'comment' 
    video#index-video(autoplay='' loop='' muted='')
        source(src='你的视频地址')
if page.type == 'link' 
    video#index-video(autoplay='' loop='' muted='')
        source(src='你的视频地址')

/*
 * @Author: tzy1997
 * @Date: 2020-12-15 20:55:25
 * @LastEditors: tzy1997
 * @LastEditTime: 2021-11-25 18:15:47
 */
// TODO 获取窗口高度  11-19
var b_h = $(window).height()
var b_w = $(window).width()

$(function() {

    // 气泡
    function bubble() {
        $('#page-header').circleMagic({
            radius: 10,
            density: .2,
            color: 'rgba(255,255,255,.4)',
            clearOffset: 0.99
        });
    }! function(p) {
        p.fn.circleMagic = function(t) {
            var o, a, n, r, e = !0,
                i = [],
                d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
                l = this[0];

            function c() { e = !(document.body.scrollTop > a) }

            function s() {
                // TODO 获取窗口高度  ethan_tzy
                var a_c = l.clientHeight
                if ($('#index-video').length > 0 && b_w > 768) {
                    a = b_h * 0.8
                } else {
                    a = a_c
                }
                // o = l.clientWidth, a = l.clientHeight, l.height = a "px", n.width = o, n.height = a
                o = l.clientWidth, l.height = a "px", n.width = o, n.height = a
            }

            function h() {
                if (e)
                    for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
                requestAnimationFrame(h)
            }

            function f() {
                var t = this;

                function e() { t.pos.x = Math.random() * o, t.pos.y = a 100 * Math.random(), t.alpha = .1 Math.random() * d.clearOffset, t.scale = .1 .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" Math.floor(255 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.random().toPrecision(2) ")" : t.color = d.color }
                t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
            }! function() {
                // TODO 气泡的高度  11-19
                var a_c = l.clientHeight
                if ($('#index-video').length > 0 && b_w > 768) {
                    a = b_h * 0.8
                } else {
                    a = a_c
                }
                o = l.offsetWidth,
                    // o = l.offsetWidth, a = l.offsetHeight,
                    function() {
                        var t = document.createElement("canvas");
                        t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
                    }(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
                for (var t = 0; t < o * d.density; t++) {
                    var e = new f;
                    i.push(e)
                }
                h()
            }(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
        }
    }(jQuery);
    bubble();
})

if theme.aside.card_announcement.enable
  .card-widget.card-announcement
    .item-headline
      i.fas.fa-bullhorn.card-announcement-animation
      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
 .xpand(style='height:200px;')
   canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
+script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople1.js')
+script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/zdog.dist.js')
+script#rendered-js(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople.js')
+style.
 .card-widget.card-announcement {
 margin: 0;
 align-items: center;
 justify-content: center;
 text-align: center;
 }
 canvas {
 display: block;
 margin: 0 auto;
 cursor: move;
 }

function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()

/* 背景宇宙星光  */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

inject:
  bottom:
+		# 星空背景
   - <canvas id="universe"></canvas>
   - <script defer src="/js/universe.js"></script>

inject:
  head:
   ## 星空背景
   - <link rel="stylesheet" href="/css/universe.css">

inject:
  bottom:
   # 樱花飘落效果
   # - <script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"></script>