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

作者：dingzd 时间：2021年03月07日分类：编程字数：1527

这篇文章距离上次修改已过1236天，其中的内容可能已经有所变动。

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

效果

最终效果演示

实现方法

首先进入主题设置 > 置顶公告/自定义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>

最终在设置中的效果

具体的设置方法及代码

已有 20 条评论

qiushui

2021年03月10日 17:32:24

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

回复
1. dingzd
  
  2021年03月10日 21:11:28
  
  侧边栏的头像得在主题中设置，Gravatar的头像是出现在评论区的那个，是typecho自带的功能。
  
  回复
日常爱婷婷

2021年03月11日 08:07:30

好久不见，我亲爱的婷婷

回复
麋鹿

2021年03月14日 09:45:45

非常感谢，正好需要.

回复
麋鹿

2021年03月14日 09:51:35

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

回复
麋鹿

2021年03月14日 09:53:26

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

回复
1. dingzd
  
  2021年03月14日 15:34:50
  
  目前仅摘要模式支持，在编辑文章的时候，下面填入自定义字段【info】，选字符，后面填自定义的摘要就可以了
  
  回复
2. dingzd
  
  2021年03月14日 15:46:05
  
  对了，还有一件事，你【社交/分享链接】那好像设置错了，详细的方法可以看看这：https://www.idzd.top/archives/2680/
  
  回复
麋鹿

2021年03月14日 10:00:04

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

回复
邓迪

2021年03月15日 14:04:36

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

回复
1. dingzd
  
  2021年03月15日 21:21:32
  
  不喜欢那个标题标记吗？您可以在主题设置自定义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 是定义标题前显示的标记，可以换成您喜欢的或设为空，当然也可自定义颜色
  
  回复
日常爱婷婷

2021年03月25日 11:03:08

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

回复
111

2021年03月28日 13:22:55

侧边栏无法显示头像啊

回复
1. dingzd
  
  2021年03月28日 15:39:09
  
  侧边栏的头像得在主题中单独设置，尝试填写下完整的图片地址？如果还不行，可以截图发邮件给我吗？邮箱在关于页面那有~
  
  回复
MineADV

2021年04月03日 22:26:25

请问如何回复评论？

回复
1. dingzd
  
  2021年04月04日 13:15:09
  
  在后台评论管理处可以回复，前台暂时关闭了这部分功能
  
  回复
nemo

2021年09月27日 14:45:03

自定义js报错，有跟我一样的吗，我小白
You don't have permission to access this resource.

回复
1. dingzd
  
  2021年10月09日 10:55:36
  
  方便邮件发送我您添加的js吗？我看下。邮箱dingzd1995@gmail.com
  
  回复
kaka

2022年04月08日 20:47:58

哎，这个折叠目录怎么实现的啊

回复
1. dingzd
  
  2022年04月11日 08:56:52
  
  现在我用的是自己魔改了下的@老高大哥的插件《Table Of Contents 自动文章目录》
  下载地址：http://pic.idzd.top/typecho-theme-waxy/TableOfContents.tar.gz
  
  回复