统计
  • 文章总数:42 篇
  • 评论总数:14 条
  • 分类总数:19 个
  • 最后更新:4天前

joe主题 博客美化功能折腾-持续更新

本文阅读 4 分钟
首页 折腾日志 正文

首先感谢joe提供的主题,关键是免费的。
这个博客主题,作者的分类非常的细致,非常适合我这种小白!
[card-nav]
[card-nav-item src="https://ae.js.cn" title="joe作者博客" img="网站图标" /]
[/card-nav]

一、更改网站字体

[collapse]
[collapse-item label="点击打开"]
先看效果

1.1 首先下载字体文件

[hide]
[btn href="https://blog.abu3d.com/attachment/down-1" type="success"]字体文件[/btn]
[/hide]

1.2 上传文件

把下载的字体上传到你服务器里面,也可以去找在线字体链接,后面有用

1.3 复制代码

复制下面代码到 主题设置 - 公共设置 - 自定义CSS

@font-face {
  font-family: 'nexzhu';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), 
         url(../字体路径/blockdole.woff2) format("woff2"),
         url(../字体路径/blockdole.woff) format("woff"),
         url(../字体路径/blockdole.eot) format("embedded-opentype"),
         url(../字体路径/blockdole.svg) format("svg");
  font-display: swap; 
}
body {
    font-family: nexzhu;
}
1.4 说明

代码中 url(../字体路径/blockdole.svg) format("svg"); 如果没有他不显示,我也是在网上看到的,反正加上就是了。还有就是,font-display: swap; 这个是为了,让加载字体的时候可以显示默认字体。
[/collapse-item]
[/collapse]

二、底部版权信息及底部链接

[collapse]
[collapse-item label="点击打开"]

2.1 版权信息

复制下面代码到 主题设置 - 公共设置 - 底部版权文字

<div style="display: inline;">
<a href="./" title="阿不的博客|璟点文化传媒">
<img src="https://blog.abu3d.com/usr/a-img/footlogo.png" style=width="215" height="26" alt="logo">
</a>
 |  
<a target="_blank" rel="noopener" href="https://beian.miit.gov.cn" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://blog.abu3d.com/usr/a-img/beian.png" style="float:left;" width="20" height="20" alt="logo">
<span> &nbsp;苏ICP备 20043146号-1</span>
</a>
 |
Theme <a href="//ae.js.cn" target="_blank">Joe</a></span>  
</div>
2.2 底部链接

复制下面代码到 主题设置 - 公共设置 - 底部链接

<a href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral" target="_blank" rel="noopener"><img src="https://docs.upyun.com/img/upyun_logo.png" style="width: 66px;height: auto;" wdith="70" height="35" alt="logo"></a>
<a href="https://tools.abu3d.com" target="_blank" rel="noopener">阿不工具坞</a>
<a target="_blank" rel="noopener" href="https://blog.abu3d.com/feed/">RSS</a>
<a target="_blank" rel="noopener" href="https://blog.abu3d.com/sitemap.xml">MAP</a> 

[/collapse-item]
[/collapse]

三、登录/注册链接跳转

[collapse]
[collapse-item label="点击打开"]
打开网站目录,在admin文件夹下的login.php和register.php下的第6、7、8行,加如下代码:

header("Location: /tepass/signin"); 

我的修改完之后的第4到第8行如下:

if ($user->hasLogin()) {
    $response->redirect($options->adminUrl);
}else{
    header("Location: /tepass/signin");
}

[/collapse-item]
[/collapse]

四、倒计时代码

[collapse]
[collapse-item label="点击打开"]

<style>
.time {
  color: #fff;
  background:url(图片地址);
  height:200px;
  width:980px
  text-transform: uppercase;
  display: flex;
  justify-content: center;
}

.time span {  
  padding: 110px 14px;
  font-size: 0.8rem;
}

.time span div {
  font-size: 3rem;
  background:rgba(0,0,0,0.3);
}
</style>

    <div class="time"><span style="font-size: 3rem;">距离圣诞节还有:</span>
        <span>
        <div id="d">
            00
        </div>
         天</span> <span>
        <div id="h">
            00
        </div>
        时 </span> <span>
        <div id="m">
            00
        </div>
        分 </span> <span>
        <div id="s">
            00
        </div>
        秒 </span>
    </div>
</div>

<script>

const comingdate = new Date("12 24, 2020 00:00:00");

const d = document.getElementById("d");
const h = document.getElementById("h");
const m = document.getElementById("m");
const s = document.getElementById("s");

const countdown = setInterval(() => {
  const now   = new Date();
  const des   = comingdate.getTime() - now.getTime();
  const days  = Math.floor(des / (1000 * 60 * 60 * 24));
  const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const mins  = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));
  const secs  = Math.floor((des % (1000 * 60)) / 1000);

  d.innerHTML = getTrueNumber(days);
  h.innerHTML = getTrueNumber(hours);
  m.innerHTML = getTrueNumber(mins);
  s.innerHTML = getTrueNumber(secs);

[/collapse-item]
[/collapse]

五、给注册用户增加密码功能

[collapse]
[collapse-item label="点击打开"]
直接要展示的文件里放入以下代码即可,CSS部分可以自行优化,本站是放在header.php页头里面。

<form stop-propagation id="registerForm" class="j-dropdown" action="<?php $this->options->registerAction(); ?>" method="post" name="register">
                                        <div class="form-item">
                                            <div>用户名</div>
                                            <input class="username" placeholder="请输入用户名" type="text" maxlength="16" name="name" autocomplete="off" />
                                        </div>
                                        <div class="form-item">
                                            <div>邮箱</div>
                                            <input class="mail" placeholder="请输入邮箱" type="text" name="mail" autocomplete="off" />
                                        </div>
                                        <div class="form-item">
                                            <div>输入密码</div>
                                            <input type="password" class="w-100" id="password" name="password" autocomplete="current-password" placeholder="输入密码" required="">
                                        </div>
                                        <div class="form-item">
                                            <div>确认密码</div>
                                            <input type="password" class="w-100" id="confirm" name="confirm" autocomplete="current-password" placeholder="再次输入密码" required="">
                                        <div class="form-item">
                                        </div>
                                            <button type="submit">注 册</button>
                                        </div>
                                    </form>

另外也可以直接在系统文件admin/register.php文件里找到以下代码

<div class="typecho-login">
        <h1><a href="https://laolion.com" class="i-logo">laolion</a></h1>
        <form action="<?php $options->registerAction(); ?>" method="post" name="register" role="form">
            <p>
                <label for="name" class="sr-only"><?php _e('用户名'); ?></label>
                <input type="text" id="name" name="name" placeholder="<?php _e('用户名'); ?>" value="<?php echo $rememberName; ?>" class="text-l w-100" autofocus />
            </p>
            <p>
                <label for="mail" class="sr-only"><?php _e('Email'); ?></label>
                <input type="email" id="mail" name="mail" placeholder="<?php _e('Email'); ?>" value="<?php echo $rememberMail; ?>" class="text-l w-100" />
            </p>

在下面放入代码也可以实现

<p>
            <input type="password" class="text-l w-100" id="password" name="password" autocomplete="current-password" placeholder="输入密码" required="">
            </p>
            <p>
            <input type="password" class="text-l w-100" id="confirm" name="confirm" autocomplete="current-password" placeholder="再次输入密码" required="">
            </p>

六、在网站挂灯笼等装饰

[collapse]
[collapse-item label="点击打开"]
直接在页脚之前加下面的一段代码即可!

<head>
<style>
.deng-box {
    position: fixed;
    top: -40px;
    right: -20px;
    z-index: 999;
}
 
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 30px;
    z-index: 999;
}
.deng-box2 {
    position: fixed;
    top: -30px;
    left: 30px;
    z-index: 999;
}.deng-box3 {
    position: fixed;
    top: -30px;
    left: -20px;
    z-index: 999;
}
.deng-box3 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
 
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
 
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
 
.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
 
.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
 
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
 
.deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
 
.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
    background: transparent !important;
}
 
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
 
    50% {
        -moz-transform: rotate(10deg)
    }
 
    100% {
        -moz-transform: rotate(-10deg)
    }
}
 
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
 
    50% {
        -webkit-transform: rotate(10deg)
    }
 
    100% {
        -webkit-transform: rotate(-10deg)
    }
}
</style>
<body>
<!-- 灯笼1 -->
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">庆</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!-- 灯笼2 -->
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">国</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!-- 灯笼3 -->
<div class="deng-box2">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">度</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!-- 灯笼4 -->
<div class="deng-box3">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">欢</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
</body>

[/collapse-item]
[/collapse]

七、免费API视频接口

[collapse]
[collapse-item label="点击打开"]

http://api.bbbbbb.me/jx/?url=

http://www.a305.org/weixin.php?url=

http://api.91exp.com/svip/?url=

http://api.bbbbbb.me/ipsign/player.php?v=

http://api.ledboke.com/vip/?url=

http://17kyun.com/api.php?url=

http://vip.qike.ink/?url=

http://www.47jx.com/?url=

http://jx.hanximeng.com/vip.php?url=

http://yun.baiyug.cn/vip/?url=

http://jx.myxit.cn/vip/?url=

http://aikan-tv.com/?url=

http://jiexi.92fz.cn/player/vip.php?url=

http://api.662820.com/xnflv/index.php?url=

http://000o.cc/jx/ty.php?url=

http://qigetv.xyz/tv.php?url=

[/collapse-item]
[/collapse]

八、添加自定义页面

[collapse]
[collapse-item label="点击打开"]

8.1 新建页面

首先在博客的主题文件下面新建一个页面,命名为:page-tv.php,也可以自定义命名。

8.2 添加代码

然后在page-tv.php页面里添加以下代码

<?php
 /**
 * 归档页面 电视
 * 
 * @package custom
 */
 ?>
<?php if(!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this -> need('header.php'); ?>
<div class="tab-a list-all w1214" style="padding-top:10px;">
<iframe width="100%" scrolling="no" height="600" align="middle" frameborder="no"
                src="http://tv.bingdou.net/live.html" hspace="0" vspace="0" marginheight="0"
                marginwidth="0" name="tv">
        </iframe>
<?php $this -> need('footer.php'); ?>

以上代码中http://tv.bingdou.net/live.html 是直播的原地址,大家可以自由的更改自己喜欢的速度比较快的播放地址。

8.3 新建独立页面

最后在博客后台新建一个独立页面,在自定义模板的下拉菜单里选择归档页面 电视,发布即可!
[/collapse-item]
[/collapse]

九、添加弹跳窗口

[collapse]
[collapse-item label="点击打开"]

放到想弹跳的地方
<!--弹窗开始-->
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js"></script>
<script>
swal('本站最新公告:','阿不的博客!\n\n blog.abu3d.com!\n\n 阿不的博客!','success'); function AddFavorite(title, url) {
  try {
      window.external.addFavorite(url, title);
  }
catch (e) {
     try {
       window.sidebar.addPanel(title, url,);
    }
     catch (e) {
         alert("抱歉,您所使用的浏览器无法完成此操作。");
     }
  }
}
</script>
<!--弹窗结束-->

[/collapse-item]
[/collapse]

本文来自投稿,不代表本站立场,如若转载,请注明出处:
[FCPX插件]Pixel Film Studios-Tracker Suite 五合一工具包
« 上一篇 01-18
记一次电脑硬件升级-技嘉 Z390 DESIGNARE “设计师” 主板
下一篇 » 01-25