首页 » 建站手册 » RAW主题添加一言原版教程

RAW主题添加一言原版教程

谷歌已收录,更新于2019年07月04日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

一言添加方式来自RAW主题,大佬已同意发布。改主题,代码放自己手里没啥用了,就发出来了。代码已经匹配了pjax,可以自由刷新,随着页面刷新自动更新一言,并且可以点击刷新按钮再次获取一言。对接的是hitokoto官方一言api接口。获取一个一言大约需要50ms,对网站速度基本无任何影响。

js代码

首先,将以下js添加到主题,你可以添加到自己的js文件,也可以添加到footer.php文件中。添加的js文件中,直接添加即可。添加到footer.php,需要用<script></script>包括js代码。

typecho预览

function hitokoto(item){$(item).addClass("fa-spin");$("#hitokoto>div").html(`<div class="idot"></div><div class="idot"></div><div class="idot"></div>`);$.ajax({url:" https://v1.hitokoto.cn/?c=a&encode=text",async:true,success:function(data){$(item).removeClass("fa-spin");$("#hitokoto>div").html(data)}})}hitokoto();
$(document).on('pjax:complete',function(){hitokoto()})

调用方式

在你想显示hitokoto一言的地方,添加如下代码即可。下方的fa fa-refresh为一个刷新图标,需要主题引入fontawesome字体图标。

<div id="hitokoto" class="nav-left-panel" style="animation-delay:0.4s">
    <span class="hidden-xs"><i class="fa fa-pencil"></i> Hitokoto <i style="cursor:pointer;font-size: 0.7em;opacity: 0.4" class="fa fa-refresh" onclick="hitokoto(this);"></i></span>
    <div style="padding:0.5rem;text-align: center;line-height: 1.5;">
    </div>
</div>

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 6 条评论

    1. 枂下 枂下说道:

      送你个邮件标记,mark成功

  1. 熊猫小A 熊猫小A说道:

    大佬牛逼!

    1. 枂下 枂下说道:

      别闹,RAW万岁

  2. 楚狂人博客 楚狂人博客说道:

    不错哦,希望博主主题越来越好

    1. 枂下 枂下说道:

      嗯嗯,每天魔改一小点

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫