版本: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"> 博客</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
6 条评论
很厉害啊,颜色没那么好看一点,我看挺简介的,要不搞成白色的看看
白色也可以,不过我个人比较偏向这种略显深沉的颜色哈哈哈哈
感觉这个蓝色有种上个世纪的感jio。
所以是土了吗
图片上传第三方图床引用就行,或者整体颜色改一下,不过这是我的审美,自己喜欢就好,毕竟服务器是自己花钱的。
对噢,我都忘了可以图床。。。。。