评论

Twikoo

添加输入提醒

搬运自给你的评论添加一个输入提醒吧 | Leonus

/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
    content: '输入QQ号会自动获取昵称和头像🐧';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
    content: '收到回复将会发送到您的邮箱📧';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
    content: '可以通过昵称访问您的网站🔗';
}

/* 当用户点击输入框时显示 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
    display: block;
}

/* 主内容区 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
    /* 先隐藏起来 */
    display: none;
    /* 绝对定位 */
    position: absolute;
    /* 向上移动60像素 */
    top: -60px;
    /* 文字强制不换行，防止left:50%导致的文字换行 */
    white-space: nowrap;
    /* 圆角 */
    border-radius: 10px;
    /* 距离左边50% */
    left: 50%;
    /* 然后再向左边挪动自身的一半，即可实现居中 */
    transform: translate(-50%);
    /* 填充 */
    padding: 14px 18px;
    background: #444;
    color: #fff;
}

/* 小角标 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
    display: none;
    content: '';
    position: absolute;
    /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。
    我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */
    border: 12px solid transparent;
    border-top-color: #444;
    left: 50%;
    transform: translate(-50%, -48px);
}

样式调整

/* 输入框布局调整 */
#twikoo .tk-comments .tk-input .el-textarea__inner {
    min-height: 160px!important;
}

/* 评论区代码块样式 */
.twikoo div.code-toolbar>.toolbar>.toolbar-item>button {
    border: 1px solid rgba(128, 128, 128, 0.31);
    color: var(--hl-color);
}

pre.language-yml {
    color: #c3e88d;
    background: var(--hl-bg);
    border-radius: 7px;
    padding: 10px;
}

Waline评论添加配置项

butterfly_v4.13.0默认只有serverURL、bg、pageview、option、comment四个配置项，不能自定义表情包，很难受

1. 添加emoji(自定义表情包)、search(表情包搜索) 配置项，修改themes\butterfly\layout\includes\third-party\comments\waline.pug

//- const { serverURL, option, pageview } = theme.waline
- const { serverURL, option, pageview, emoji, search } = theme.waline
- const { lazyload, count, use } = theme.comments

script.
  (() => {
    let initFn = window.walineFn || null

    const initWaline = (Fn) => {
      const waline = Fn(Object.assign({
        el: '#waline-wrap',
        serverURL: '!{serverURL}',
        pageview: !{lazyload ? false : pageview},
        dark: 'html[data-theme="dark"]',
        path: window.location.pathname,
        comment: !{lazyload ? false : count},
        emoji: ['!{emoji}'], //- 添加
        search: !{search}, //- 添加
      }, !{JSON.stringify(option)}))

      const destroyWaline = () => {
        waline.destroy()
      }

      btf.addGlobalFn('pjax', destroyWaline, 'destroyWaline')
    }

    const loadWaline = async () => {
      if (initFn) initWaline(initFn)
      else {
        await getCSS('!{url_for(theme.asset.waline_css)}')
        const { init } = await import('!{url_for(theme.asset.waline_js)}')
        initFn = init || Waline.init
        initWaline(initFn)
        window.walineFn = initFn
      }
    }

    if ('!{use[0]}' === 'Waline' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
      else setTimeout(loadWaline, 0)
    } else {
      window.loadOtherComment = loadWaline
    }
  })()

2. 设置默认值，修改themes\butterfly\scripts\events\merge_config.js

    waline: {
      serverURL: null,
      bg: null,
      pageview: false,
      option: null,
      emoji: 'https://unpkg.com/@waline/emojis@1.2.0/qq',
      search: false,
    },

3. 配置，修改_config.butterfly.yml

waline:
  serverURL: waline.xdog.run # Waline server address url
  bg:  # waline 背景
  pageview: false
  option:
  emoji: https://cdn.xdog.top/bmoji # 自定义默认表情包
  search: false # 关闭表情包搜索

4. 文档功能不好使，没找到配置项，只能用CSS关了

[data-waline] a {
    display: none !important;
}