更新日志

2021-10-12
版本：1.01
footer置底，新知识get✔

自从博客弄起来后
一直都在查教程丰富完善内容和功能
但是搞半天又总感觉哪里不对
思考了半天终于反应过来
缺了个门面！！！
进屋没门就很奇怪
于是乎又开始找导航页模板和教程
最终基于爆胎的模板结合自己的情况和喜好修改
爆胎原帖

一、演示

原帖演示
我的演示

二、修改思路

原模板主要的功能

  • 响应式设计，设备自适应
  • 获取访客IP
  • 调用一言或今日诗词
  • font-awesome 图标支持
  • 背景图片渐变效果

自适应现在是标配了肯定得留
获取访客ip这个我没多大需求，删
一言，自己还没想到写什么，暂时留着
图标支持，基础东西也是得留着
由于我vultr美国鸡线路确实不咋地
本来延迟就高，要是再加载张图片体验就更差了
所以背景图片想都不敢想
渐变效果也就没啥用了，删

三、具体操作

确定了功能，接下来要解决具体问题了

  • 背景怎么办
  • 一点图片都没有也不行啊，太单调了
  • 怎么样将导航页设置成typecho主页？

对于没有一丁点html+css+js基础的我来说
没有什么是百度解决不了的，如果有，那就谷歌
结果花了一个下午把问题都解决完并且成功上线
效果吧，只能说在我的能力范围内是满意的
在正常审美上来说还是差了点

1、背景怎么办

既然决定了不用图片，经过一番百度谷歌
知道了可以通过css生成样式，那就这么干吧，好像还挺方便
又是一番百度谷歌，找到了一个配色网站
里头有180种渐变配色，还能一键生成css代码
https://webgradients.com/
关键是这些配色我觉得都挺好看的
将代码添加到css文件body{}后发现了一件诡异的情况
{}

尼玛生成的样式竟然不能铺满页面！！
下面缺一块是什么鬼啊
搜啊搜，试啊试，总算是弄好了

  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
  background-size:100% 150%;

把背景高度调整到150%解决问题
反正渐变色块拉变形了也看不出来
保存后清理缓存看看效果
{}

2、一点图片都没有怎么办

这个好办，插头像呗
最好解决的问题没有之一，2分钟搞掂

<div class="circle">
<img src="url" alt=" "style="width:130px; height:130px; border-radius:50%; "/>
</div>

url替换成头像图片网址
width和height可以调整大小
{}

最后把一些元素丰富一下就算完事了

标签内容（含图标），需要多少个标签就该多少个
<a class="fa fa-home" href="url">&nbsp;博客</a>
..............

图标库

最终成品1.0
{}

3、怎么样把导航页设置成typecho主页？

首先，在主题目录下（注意：是主题的目录）
新建一个php文件
将css文件拷贝到与php同一文件夹

<?php
 /**
 *  首页
 * 
 * @package custom
 */
 ?>

将这个模板头信息粘贴进去php文件中
然后将刚才修改好的导航页html内所有内容粘贴进去
因为这个导航页是带有css文件的，所以css路径也要设置一下

<link rel="stylesheet" href="<?php $this -> options -> themeUrl('/main.css'); ?>" />

然后新建页面，标题内容都不用填
模板选择首页，发布后就能看到这个页面
回到后台，网站设置--阅读设置--使用刚才新建的页面做为主页同时更改文章列表路径
{}

至此导航页就弄好了

四、总结

经过这一下午的折腾
也还是有收获的
从一开始看代码跟看天书一样
到现在虽然还是看不懂
但是已经大概猜到代码之间的联系
这就是知行合一吧
学习和实践结合才学得快

现在这个导航页还是有很多不满意的地方
不过1.0版本都是有很多问题的
后续要好好学习一下html+css+js
继续优化，出2.0 3.0


END

本文作者：
 文章标题：响应式html5导航页1.01
 本文地址：https://kev.fit/archives/294/
 版权说明：若无注明，本文皆K E V.原创，转载请保留文章出处。
最后修改：2021 年 10 月 12 日 07 : 41 PM
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏