更新日志

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
如果觉得我的文章对你有用,请随意赞赏