首先感谢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> 苏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&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="点击打开"]
直接在页脚