Pix 添加 hitokoto(一言)

    479

1️⃣ Eg

2️⃣ 使用自定义 JavaScript & 自定义 CSS

因为没有对主题进行编辑,因此更新并不会影响到这里(除非 .left_menu_box 类名变了,或许不会吧 🤔

缺点则是 JS 生成 Dom 体验不太好

CSS Source Code
/* hitokoto start */

.top-hitokoto {
    padding: 0 40px 20px 40px;
    color: #89978c;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    min-height: 90px;
    opacity: 0;
    gap: 5px;
}

.top-hitokoto-show {
    animation: top-hitokoto-ani .5s forwards;
}

@keyframes top-hitokoto-ani {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

.top-hitokoto-from {
    display: flex;
    justify-content: flex-end;
    color: #5f936e;
}

.dark .top-hitokoto-say {
    color: #5b5f80;
}

.dark .top-hitokoto-from {
    color: #8c92b3;
}

/* hitokoto end */
JavaScript Source Code
const createElement = function (tag, style) {
  let dom = document.createElement(tag);
  dom.classList.add(...style);
  return dom;
}

let leftMenuBox = document.querySelector('.left_menu_box');
let hitokotoDom = createElement('div', ['top-hitokoto']);
hitokotoDom.appendChild(createElement('div', ['top-hitokoto-say']));
hitokotoDom.appendChild(createElement('div', ['top-hitokoto-from']));
leftMenuBox.parentNode.insertBefore(hitokotoDom, leftMenuBox);

const hitokotoInit = async function() {
  let res = await $.get('https://v1.hitokoto.cn/?c=a');
  $('.top-hitokoto-say').html(res['hitokoto']);
  $('.top-hitokoto-from').html("《"+res['from']+"》");
  document.querySelector('.top-hitokoto').classList.add('top-hitokoto-show');
}

window.addEventListener("DOMContentLoaded", () => {
      hitokotoInit ()
})

2️⃣ 修改主题

<head> 标签中添加 JS 代码
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="<?php getKeywords(); ?>">
    <meta name="description" content="<?php getDescription(); ?>">
    <title><?php gettitle(); ?></title>
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <link rel="shortcut icon" href="<?php echo get_op('favicon'); ?>" title="Favicon">
    <?php wp_head(); ?>

    <!-- add start -->
    <script type="text/javascript">
        const hitokotoInit = async () => {
            let res = await $.get('https://v1.hitokoto.cn/?c=a');
            $('.top-hitokoto-say').html(res['hitokoto']);
            $('.top-hitokoto-from').html("《"+res['from']+"》");
            document.querySelector('.top-hitokoto').classList.add('top-hitokoto-show');
        }


        window.addEventListener("DOMContentLoaded", () => {
            hitokotoInit ()
        })
    </script>
    <!-- add end -->

</head>
添加 Dom
<?php echo site_logo();
echo m_site_logo() ?>

<!-- add start -->
<div class="top-hitokoto">
    <div class="top-hitokoto-say"></div>
    <div class="top-hitokoto-from"></div>
</div>
<!-- add end -->

<div class="left_menu_box">
Comments | 4 条评论
  • 赵桑

    感谢分享,麻烦问下你pix主题里的代码插件是哪个?我一直没有找到一个很适配的,还有,挂友联么?

    • xiamo

      @赵桑 代码的编辑方式么,我是在本地用idea编辑完后commit的

      • 赵桑

        @xiamo 是目前文章里代码高亮插件

        • xiamo

          @赵桑 pix自带的,代码高亮插件目前还没有动过

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息