搜 索

Typecho Cuteen 美化

  • 1k阅读
  • 2022年02月14日
  • 8评论
首页 / 🍵Other / 正文

一、为你的博客加一个每日60秒早报

前言

相信大家已经看到本站置顶的其中一篇文章为“每日60S早报”,每日自动更新。下面教大家如何给自己的博客也添加一个

教程

1、前往ALAPI注册一个账号并登录

2、在个人管理-个人中心页面复制你的Token,然后替换下方代码的“你的Token”

![60s-for-news](https://v2.alapi.cn/api/zaobao?token=你的Token&format=image)

3、修改好后复制,新建博客文章,粘贴到正文部分,这样60s早报的主体部分就配置好了

二、添加网站运行时间

footer.php适当位置添加如下内容。

<span id = "runtime_span"></span>
    <script type = "text/javascript">
    function show_runtime()
    {window.setTimeout("show_runtime()",1000);X=new 
    Date("1/01/2021 00:00:00"); //初始建站时间修改此处
    Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
    a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
    runtime_span.innerHTML="网站已运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
    </script>

三、网站添加随机一言

效果展示

image-20220419135144887

配置教程

(1)css文件配置

把下面的代码放到 header.php<head></head>里面。

<link rel="stylesheet" type="text/css" href="https://www.whbblog.cn/css/yiyan.css">

(2)script 配置

将以下代码放置在 post.php 中的合适位置。

<div class="qinian"><div class="text-center main-shadow yiyan-box radius8 them-box"><p id="hitokoto">:D 获取中...</p><script src="https://v1.hitokoto.cn/?c=i&encode=js&select=%23hitokoto" defer></script></div></div>

4、侧边栏添加当前时间

效果展示

image-20220419135612332

教程

将以下代码放置在 sidebar.php 文件中合适的位置。

<section id="sidebar-current-time" class="bg-white dark:bg-black dark:bg-opacity-20 card card-bordered rounded border border-gray-900/10 relative mb-4">
  <div class="mx-4 py-2 my-2 flex items-center border-b border-gray-900/10">
    <svg class="w-5 h-5 mr-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8937" width="200" height="200">
      <path d="M512 514m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#1afa29" p-id="8938" data-spm-anchor-id="a313x.7781069.0.i0" class="">
      </path>
      <path d="M512 512m-253.15 0a253.15 253.15 0 1 0 506.3 0 253.15 253.15 0 1 0-506.3 0Z" fill="#FFFFFF" p-id="8939">
      </path>
      <path d="M512 512m-203.07 0a203.07 203.07 0 1 0 406.14 0 203.07 203.07 0 1 0-406.14 0Z" fill="#1296db" p-id="8940" data-spm-anchor-id="a313x.7781069.0.i3" class="selected">
      </path>
      <path d="M622.12 497h-91.31a24.09 24.09 0 0 0-11.46-7.92V360.22a6 6 0 0 0-6-6h-2.81a6 6 0 0 0-6 6v128.93a24.06 24.06 0 1 0 26.19 38.08h91.49a6 6 0 0 0 6-6V503a6 6 0 0 0-6.1-6z" fill="#69B452" p-id="8941">
      </path>
    </svg>
    <span>当前时间</span>
  </div>
  <div class="my-3">
    <iframe src="https://www.whbblog.cn/currenttime/index.html" width="100%" height="110" frameborder="no">
    </iframe>
  </div>
</section>

5、侧边栏添加小卡片

效果展示

image-20220419140150135

教程

将以下代码放置在 sidebar.php 文件中合适的位置。

<section id="custom_html-2" class="bg-white dark:bg-black dark:bg-opacity-20 rounded border border-gray-900/10 relative mb-4">
  <div class="textwidget custom-html-widget">
    <aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
      <div class="textwidget widget-text">
        <style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);border-radius: var(--main-radius);} #flip-box-1{overflow:hidden;height:50px;border-radius:99px} #flip-box-1 div{height:50px} #flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%} #flip-box-1 div:first-child{animation:show 8s linear infinite} .flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)} .flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);} .flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);} .flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);} .flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);} .flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);} @keyframes show{0%{margin-top:-300px} 5%{margin-top:-250px} 16.666%{margin-top:-250px} 21.666%{margin-top:-200px} 33.332%{margin-top:-200px} 38.332%{margin-top:-150px} 49.998%{margin-top:-150px} 54.998%{margin-top:-100px} 66.664%{margin-top:-100px} 71.664%{margin-top:-50px} 83.33%{margin-top:-50px} 88.33%{margin-top:0} 99.996%{margin-top:0} 100%{margin-top:300px} }</style>
        <div id="container-box-1">
          <div class="container-box-1-1">坚持每天来逛逛,会让你</div>
          <div id="flip-box-1">
            <div>
              <div class="flip-box-1-1">生活也美好了!</div>
            </div>
            <div>
              <div class="flip-box-1-2">心情也舒畅了!</div>
            </div>
            <div>
              <div class="flip-box-1-3">走路也有劲了!</div>
            </div>
            <div>
              <div class="flip-box-1-4">腿也不痛了!</div>
            </div>
            <div>
              <div class="flip-box-1-5">腰也不酸了!</div>
            </div>
            <div>
              <div class="flip-box-1-6">工作也轻松了!</div>
            </div>
          </div>
          <div class="container-box-1-2">你好我也好,不要忘记哦!</div>
        </div>
      </div>
      <div class="clear">
      </div>
    </aside>
  </div>
</section>

6、侧边栏添加和风天气组件

效果展示

image-20220419140602404

教程

将以下代码放置在 sidebar.php 文件中合适的位置。

<section data-id="sidebar-weather" class="bg-white dark:bg-black dark:bg-opacity-20 card card-bordered rounded border border-gray-900/10 relative mb-4">
  <div id="he-plugin-standard">
  </div>
  <script>WIDGET = {
      "CONFIG": {
        "layout": "2",
        "width": "238",
        "height": "260",
        "background": "1",
        "dataColor": "FFFFFF",
        "borderRadius": "5",
        "key": "3180d3c43e524753ab8bcef69dba023a"
      }
    }</script>
  <script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0">
  </script>
</section>

7、侧边栏添加小姐姐组件

效果展示

image-20220419140749657

教程

🚁 将以下代码放置在 header.php 文件中末尾的位置。

<script src="https://www.whbblog.cn/js/jquery-latest.js"></script>

🚀 将以下代码放置在 sidebar.php 文件中合适的位置。

<section data-id="sidebar-meimei" class="mb-4">
  <style>#player { margin: 10px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 10px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; }</style>
  <button type="button" id="ckxjj">点我看小姐姐视频</button>
  <div id="xjjsp">
    <video id="player" src="" controls alt="小姐姐视频"></video>
    <div class="kzsp">
      <button id="switch">连续: 开</button>
      <button id="next">下一个</button>
    </div>
    <button type="button" id="gbxjj">关闭视频</button>
  </div>
  <script type="text/javascript" src="https://www.whbblog.cn/js/video.js">
  </script>
</section>

8、网站底部添加波浪

效果展示

效果见本博客底部,代码如下,请添加至合适的位置:

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>

参考链接

谢谢以下大佬的支持!

尘烟博客 - 墨染尘烟 (mrcy0.com)

觅知博客-一个赋能网络IT科技魅力的博客 (98dou.cn)

打 赏
  • 微信
WeChatPay
SHELL 基础
下一篇 »
评论区
二次寒树 2022年8月6日 11:09
回复

想请教几个问题
①您网站底部的波浪是怎样添加的
②有没有办法修复在开启redis情况下评论区的bug(信息残留、评论失败)

whb
1 条回复
whb
whb 2022年8月6日 11:36
回复

您好,欢迎来访本站!
问题一:网站底部波浪效果代码已更新,详细见本文第8节。
问题二:本站暂未启用redis,无法解答您的问题。

Aika 2022年4月28日 17:37
回复

博主你这个博客搭建,是什么主题

whb
1 条回复
whb
whb 2022年4月28日 17:47
回复

Cuteen 5.1 Bug版

无羁 2022年4月21日 10:37
回复

美化的很好看,功能很齐全

whb
1 条回复
whb
whb 2022年4月21日 14:06
回复

哈哈哈

萌萌 2022年2月17日 12:58
回复

谢谢分享

whb
1 条回复
whb
whb 2022年2月17日 12:59
回复

不客气的

avatar