Pix 添加 hitokoto(一言)
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">
赵桑
感谢分享,麻烦问下你pix主题里的代码插件是哪个?我一直没有找到一个很适配的,还有,挂友联么?
xiamo
@赵桑 代码的编辑方式么,我是在本地用idea编辑完后commit的
赵桑
@xiamo 是目前文章里代码高亮插件
xiamo
@赵桑 pix自带的,代码高亮插件目前还没有动过