首页 其他 / 未收录,推送中

请注意,本文最后更新于:2021年04月11日,31天前, 内容可能已经不具有时效性,请谨慎参考。

给导航栏加上天气

展开查看详情
打开和风天气,地址:https://www.qweather.com/ 进入后点击和风天气插件-天气简约插件-创建-这里看你自己了-然后生成代码
生成的代码如下:


<div id="he-plugin-simple"></div>
<script>
WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "FFFFFF",
    "tmpSize": "16",
    "cityColor": "FFFFFF",
    "citySize": "16",
    "aqiColor": "FFFFFF",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "0",
    "language": "auto",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "key": "09c1d0e6da8b42d4a68ee1b4083ae02b"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";></script>

图片圆角及阴影化

展开查看详情
自定义Css样式


img.lazy.loaded{
    border-radius: 15px;
    box-shadow: darkgrey 0px 0px 5px 5px;
}

文章边框、评论框、侧边栏圆角及阴影化

展开查看详情
自定义Css样式


.post-ctx,.post-comment.mt-4,.sidebar-box {
    background-clip: border-box;
    border-radius: 15px;
    box-shadow: -2px 8px 17px 0 rgb(157 167 255 / 36%), 0 6px 20px 0 rgb(255 255 255 / 19%);
}
 
.sidebar-banner{
    border-radius: 20px 20px 0px 0px;
}

顶部跑马灯特效

展开查看详情

头部自定义内容


<!-- 顶部跑马灯特效 -->
<style>
    #top-grrk{
    background:url(https://external-30160.picsz.qpic.cn/e94ff0137dfb6cc51925d4ccf61d2541);
    height:2px;
    position:fixed;
    width:100%;
    Z-index:10000;
}
</style>    
<div id="top-grrk"></div>
<!-- 顶部跑马灯特效 -->

美化无序标签

展开查看详情

示例及效果如下:

  • 这是第一个标签
    自定义Css样式

#post ul {
margin-top: 0.4rem;
padding: 0 0 0 0.8rem;
list-style: none;
counter-reset: li;
}
 
#post ul li {
position: relative;
margin: 0.2rem 0;
padding: 0.1rem 0.5rem 0.1rem 1.5rem;
}
 
#post ul li:hover:before {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
 
#post ul li:before {
position: absolute;
top: 0;
left: 0;
background: #49b1f5;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
 
#post ul > li:hover:before {
border-color: #ff7242;
}
#post ul > li:before {
top: 12.5px;
width: 0.8rem;
height: 0.8rem;
border: 0.2rem solid #49b1f5;
border-radius: 0.4rem;
background: transparent;
content: '';
line-height: 0.3rem;
}

美化有序标签

展开查看详情
自定义Css样式

  1. 标签

ol{
  list-style: none;  / 隐藏原来的 1. 2. 等序号样式 /
  counter-reset: ol-li;
}
 
ol li:before {
    display: block;
    float: left;
    width: 19px;   / 宽度和高度需要根据自己的字体大小进行修正 /
    height: 19px;
    line-height: 19px;
    margin: 4px 12px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    background-color: #49b1f5;
    border-radius: 50%;
    text-align: center;
    content: counter(ol-li);
    counter-increment: ol-li;
    transition: all .5s;
}
ol li:hover::before{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

美化多彩信息条

展开查看详情
自定义Css样式


blockquote {
    color: #999;
    padding: 1em;
    border-radius: 1em;
    background: transparent;
    border: 2px #ccc dashed;
}
blockquote {
    margin: 0 0 1em;
    line-height: 1.8;
    font-style: oblique;
    background: transparent;
    padding: 1em 1em 1em 2em;
    border-left: 5px #3498db solid;
}

美化分隔符 hr 样式

展开查看详情
头部自定义


<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"; media='all'/>

自定义Css样式


/ 美化 hr 样式 /
hr {
    position: relative;
    margin: 2rem auto;
    width: calc(100% - 4px);
    border: 2px dashed #a4d8fa;
    background: #fff;
}
 
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
 
hr:before {
    position: absolute;
    top: -10px;
    left: 5%;
    z-index: 1;
    color: #49b1f5;
    content: 'f0c4';
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
 
hr:hover::before{
    left: 95%;
}

渐变 note 标签样式!!!

展开查看详情

默认情况

success

error

warning

引入图标库


<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.min.css"; rel="stylesheet">

自定义Css样式


.tip {
    position: relative;
    color: #fff;
    background: #20a0ff;
    background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
    background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
    background: linear-gradient(90deg,#20a0ff,#20b8ff);
    padding: 6px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
    box-shadow: 0 3px 5px rgba(32,160,255,.5);
    margin-bottom: 20px
}
 
.tip p {
    margin: 5px 0!important
}
 
.tip:before {
    background: #20a0ff;
    background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
    background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
    background: linear-gradient(0deg,#0092ff,#20b8ff);
    border-radius: 50%;
    color: #fff;
    content: "f129";
    font-size: 12px;
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 24.5px;
    left: -12px;
    top: -12px;
    -webkit-box-shadow: 0 0 0 2.5px #fff;
    box-shadow: 0 0 0 2.5px #fff;
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    text-align: center
}
 
.btn,.getit a {
    position: relative
}
 
.well .tip:before {
    -webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
    box-shadow: 0 0 0 2.5px #f7f8f9
}
 
.tip ol {
    margin: 0
}
 
.tip.success {
    background: #61be33;
    background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
    background: -webkit-linear-gradient(left,#61be33,#8fce44);
    background: linear-gradient(90deg,#61be33,#8fce44);
    text-shadow: 0 -1px #61be33;
    -webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
    box-shadow: 0 3px 5px rgba(104,195,59,.5)
}
 
.tip.success:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
    background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
    background: linear-gradient(0deg,#52bb1d,#95d34b);
    content: "f00c";
    text-shadow: 0 -1px #61be33
}
 
.tip.warning {
    background: #ff953f;
    background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
    background: -webkit-linear-gradient(left,#ff953f,#ffb449);
    background: linear-gradient(90deg,#ff953f,#ffb449);
    text-shadow: 0 -1px #ff953f;
    -webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
    box-shadow: 0 3px 5px rgba(255,154,73,.5)
}
 
.tip.warning:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
    background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
    background: linear-gradient(0deg,#ff8f35,#ffc149);
    content: "f12a";
    text-shadow: 0 -1px #ff953f
}
 
.tip.error {
    background: #ff4949;
    background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
    background: -webkit-linear-gradient(left,#ff4949,#ff7849);
    background: linear-gradient(90deg,#ff4949,#ff7849);
    text-shadow: 0 -1px #ff4949;
    -webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
    box-shadow: 0 3px 5px rgba(255,73,73,.5)
}
 
.tip.error:before {
    background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
    background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
    background: linear-gradient(0deg,#ff3838,#ff7849);
    content: "f00d";
    text-shadow: 0 -1px #ff4949
}
 
/夜间适配/
.night .tip {
    filter: brightness(0.7);
}
 
/ snote夜间模式 /
.night .tip{
  color: #4c4948;
}

note 标签

展开查看详情

这里是 info 标签样式
这里是不带符号的 info 标签样式
这里是 primary 标签样式
这里是不带符号的 primary 标签样式
这里是 warning 标签样式
这里是不带符号的 warning 标签样式
这里是 danger 标签样式
这里是不带符号的 danger 标签样式

引入图标库


<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"; media='all'/>

自定义Css样式


/ note 公共样式 /
.note {
    position: relative;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: initial;
    border-left: 3px solid #eee;
    background-color: #f9f9f9;
    border-radius: 3px;
    font-size: var(--content-font-size);
}
 
.note:not(.no-icon):before {
    position: absolute;
    font-family: FontAwesome;
    font-size: larger;
    top: 11px;
    left: 15px;
}
 
.note:not(.no-icon) {
    padding-left: 45px;
}
 
.note.info {
    background-color: #eef7fa;
    border-left-color: #428bca;
}
 
.note.info:not(.no-icon):before {
    content: "f05a";
    color: #428bca;
}
 
.note.warning {
    background-color: #fdf8ea;
    border-left-color: #f0ad4e;
}
 
.note.warning:not(.no-icon):before {
    content: "f06a";
    color: #f0ad4e;
}
 
.note.primary {
    background-color: #f5f0fa;
    border-left-color: #6f42c1;
}
 
.note.primary:not(.no-icon):before {
    content: "f055";
    color: #6f42c1;
}
 
.note.danger {
    background-color: #fcf1f2;
    border-left-color: #d9534f;
}
 
.note.danger:not(.no-icon):before {
    content: "f056";
    color: #d9534f;
}

自定义字体

展开查看详情
自定义Css样式


@font-face{
    font-family:FontStyle;
    src:url("https://xxx");    //字体URL地址
    format("truetype");
}
*{font-family:FontStyle;}
i{font-family:none;}
@media only screen and (min-width:0px) and (max-width:767px){.index-banner{height:50vh!important;}}

侧边栏加个性图标

展开查看详情
自定义Css样式


.sidebar-box:before {
    display:inline-block;
    z-index:1;
    content:" ";
    position:relative;
    -webkit-border-radius:50%;
    border-radius:50%;
    background:#f92900!important;
    width:12px;
    height:12px;
    -webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;
    box-shadow:20px 0 #fbc606,40px 0 #448ef6;
    float:right;right:55px;top:35px;
    border-color:transparent;
    margin-top:-15px;
}

人生倒计时

展开查看详情
侧栏页面添加


<div class="sidebar-box classListBox">
    <div class="aside aside-count">
        <div class="p-3"><span style="font-size: 1.2em; color: orange;"></span> 人生倒计时</div>
        <div class="content">
            <div class="item" id="dayProgress">
                <div class="title">今日已经过去<span></span>小时</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-1"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="weekProgress">
                <div class="title">这周已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-2"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="monthProgress">
                <div class="title">本月已经过去<span></span>天</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-3"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
            <div class="item" id="yearProgress">
                <div class="title">今年已经过去<span></span>个月</div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-4"></div>
                    </div>
                    <div class="progress-percentage"></div>
                </div>
            </div>
        </div>
    </div>
</div>

自定义Css样式


/ 时间表 /
.aside-count .content {
    padding: 15px
}
 
.aside-count .content .item {
    margin-bottom: 15px
}
 
.aside-count .content .item:last-child {
    margin-bottom: 0
}
 
.aside-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}
 
.aside-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}
 
.aside-count .content .item .progress {
    display: flex;
    align-items: center
}
 
.aside-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }
 
    100% {
        background-position: 30px 0
    }
}
.aside-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}
 
.aside-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.aside-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.aside-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.aside-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.aside-count .content .item .progress .progress-percentage {
    color: var(--info)
}

js里面创建名为timeinfo.js


function init_life_time() {
            function getAsideLifeTime() {
                / 当前时间戳 /
                let nowDate = +new Date();
                / 今天开始时间戳 /
                let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
                / 今天已经过去的时间 /
                let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
                / 今天已经过去的时间比 /
                let todayPassHoursPercent = (todayPassHours / 24) * 100;
                $('#dayProgress .title span').html(parseInt(todayPassHours));
                $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
                $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
                / 当前周几 /
                let weeks = {
                    0: 7,
                    1: 1,
                    2: 2,
                    3: 3,
                    4: 4,
                    5: 5,
                    6: 6
                };
                let weekDay = weeks[new Date().getDay()];
                let weekDayPassPercent = (weekDay / 7) * 100;
                $('#weekProgress .title span').html(weekDay);
                $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
                $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
                let year = new Date().getFullYear();
                let date = new Date().getDate();
                let month = new Date().getMonth() + 1;
                let monthAll = new Date(year, month, 0).getDate();
                let monthPassPercent = (date / monthAll) * 100;
                $('#monthProgress .title span').html(date);
                $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
                $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
                let yearPass = (month / 12) * 100;
                $('#yearProgress .title span').html(month);
                $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
                $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
            }
            getAsideLifeTime();
            setInterval(() => {
                getAsideLifeTime();
            }, 1000);
        }
        init_life_time()

head.php里面引入此js.(放在</head>上面即可)


<script async="" src="https://xxx/timeinfo.js";></script>

在线时间

展开查看详情
sidebar.php文件下-最新回复的上方


 <div class="sidebar-box sidebar-box-1">
        <div class="p-3">在线时间</div>
            <h5 class="widget-title m-t-none text-md">            
                <canvas id="canvas" style="width:100%;" width="820" height="250"></canvas>
                <script src="https://cdn.jsdelivr.net/gh/xbwlcm/Public/js/clock.js";></script>    
            </h5>
    </div>

支持Emoji表情

展开查看详情
点击SQL运行下列语句


alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_general_ci;

修改数据库类型


/* 定义数据库参数 /
$db = new Typecho_Db('Pdo_Mysql', 'typecho_');
$db->addServer(array (
  ...
  'charset' => 'utf8mb4',  // 将原来的utf8修改为 utf8mb4
  ...
), Typecho_Db::READ | Typecho_Db::WRITE);
Typecho_Db::set($db);[/card]


您阅读这篇文章共花了:




文章评论