Waxy主题:自定义公告显示动态一言

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

效果

最终效果演示最终效果演示

实现方法

置顶公告

<div class="hitokoto"><span class="typed" id="hitokoto"></span></div>

自定义CSS样式、

.top-text-body {
    /*设置公告栏高度,可以按需更改*/
    height: 25px;
}
.top-text-body::before{
    /*删除公告栏中公告两个字*/
    content: "";
}

自定义JS

<!--引入打字机效果插件-->
<script src="//cdn.bootcss.com/typed.js/2.0.11/typed.min.js"></script>
<script>
//显示的文字
var typed = null;
//当页面加载好开始执行
$(function () {
  showHitokoto();
});
function showHitokoto(){
  if(typed !== null){typed.destroy(); typed = null;}
  //if(location.pathname !=='/') return;
  $.get("https://v1.hitokoto.cn/", function (data) {
      var data = data;
    var str =  data.hitokoto + "&#12288;By "
    var options = {
      strings: [
          //此处如果有多行,则会展示完后,删除在展示下一行,^1000表示等待时间
        //str + "此处显示1秒^1000",
        //str + "此处显示2秒^2000",
        //str +'此处将一直显示',
        str + data.from,
      ],
      //详细参数请移步typed文档
      typeSpeed: 80,
      startDelay:300,
      // loop: true,
    }
    typed = new Typed(".hitokoto .typed", options);
  })
  //一个定时器,20秒后在调用执行一次自己
  setTimeout(function(){
    showHitokoto();
  },20000);
}
</script>

最终在设置中的效果

具体的设置方法及代码具体的设置方法及代码

已有 16 条评论

  1. 博主,用了你的主题,头像要怎么更新呀。我转到Gravatar注册了账号,也弄了图片,但是博客上还是没有头像呢

    1. 侧边栏的头像得在主题中设置,Gravatar的头像是出现在评论区的那个,是typecho自带的功能。

  2. 日常爱婷婷 日常爱婷婷

    好久不见,我亲爱的婷婷

  3. 非常感谢,正好需要.

  4. 额 我 按照教程 成这个样子了... 麻烦转到我的网站看看吧.....

  5. 博主 这个主题怎么能像你一样自定义文章摘要啊...

    1. 目前仅摘要模式支持,在编辑文章的时候,下面填入自定义字段【info】,选字符,后面填自定义的摘要就可以了

    2. 对了,还有一件事,你【社交/分享链接】那好像设置错了,详细的方法可以看看这:https://www.idzd.top/archives/2680/

  6. 啊那个一言 找到问题 已经修复了....

  7. 邓迪 邓迪

    文章编辑页面设置的标题 如 '## 主标题 ## ',展示出来的效果,标题前面都会有个 # 呢, 如何去掉这个“#”

    1. 不喜欢那个标题标记吗?您可以在主题设置自定义CSS样式中添加如下内容:

      .post-content h1::before, .post-content h2::before, .post-content h3::before, .post-content h4::before, .post-content h5::before, .post-content h6::before {
      content: "";
      }

      其中 content 是定义标题前显示的标记,可以换成您喜欢的或设为空,当然也可自定义颜色

  8. 日常爱婷婷 日常爱婷婷

    日常摸鱼时候想婷婷(*╹▽╹*)

  9. 111 111

    侧边栏无法显示头像啊

    1. 侧边栏的头像得在主题中单独设置,尝试填写下完整的图片地址?如果还不行,可以截图发邮件给我吗?邮箱在 关于 页面那有~

  10. MineADV MineADV

    请问如何回复评论?

    1. 在后台评论管理处可以回复,前台暂时关闭了这部分功能

添加新评论

* 人工审核评论,通过后即可正常显示。《隐私政策》