如何丰富导航网站-WebStack部署(续一)

usairaq 36 0

时光轴

之前写到如何部署WebStack导航站,春暖花开,万物复苏,网站部署好之后,看着单调的页面,自己也心也忍不住躁动起来[wb_嘻嘻]。原网站部署好之后自带about页面,自己就想能不能给网站新加点页面,比如时光轴页面,作为自己导航站的大事记。

首先还是要伸手找代码,就发现了纯代码为你的wordpress网站创建一个时光轴页面

如何丰富导航网站-WebStack部署(续一)

页面看起来简洁大方,个人非常喜欢,而且最重要的是作者开源代码。[wb_鼓掌]

过程

闲话不多说,马上搞起来。看了下新部署导航站的结构,只有index.blade.php和about.blade.php这两个页面,感觉新建个timeline.blade.php,header部分引入css样式文件,然后就可以搞定[aru_51]。事实证明,如果作为一个小白能这么简单搞定,那人家靠这个吃饭的岂不是不用活了[aru_25]。

1、新建时光轴页面

所想即所得,按照自己想的,首先下载个about.blade.php文件,然后把about页面显示内容删除,把原作者时光轴的内容代码粘贴进去试验一下。

/* 注释:2018时间轴结束*/
<h4><span style="font-size: 20px; color: #99ccff;"><a style="color: #99ccff;">2018</a></span></h4>
<div id="teamnewslist">
<ol>
    <li><b>2018年08月18日</b>购置腾讯云服务器【标准型S2】和.cn域名【uednote.cn】。</li>
    <li><b>2018年08月16日</b>本地使用typecho博客程序搭建网站成功,并购入handsome主题包。</li>
    <li><b>2018年07月24日</b>续费OSS对象存储。</li>
    <li><b>2018年3月26日</b>升级【共享虚拟主机普惠版】到【独享虚拟主机经济版】。</li>
    <li><b>2018年3月24日</b>续费.cn 域名【uistudy.cn】</li>
    <li><b>2018年1月24日</b>阿里云平台上注册.top 域名【liangzhiquan.top】</li>
    <li><b>2018年01月07日</b>续费阿里云【共享虚拟主机普惠版】</li>
</ol>
</div>
/* 注释:2018时间轴开始*/
/* 注释:2017时间轴结束*/
<h4><span style="font-size: 20px; color: #99ccff;"><a style="color: #99ccff;">2017</a></span></h4>
<div id="teamnewslist">
<ol>
    <li><b>2017年12月03日</b>注册.com域名【liangzq.com】</li>
    <li><b>2017年06月27日</b>提交管局审核,通过。备案信息变更成功。</li>
    <li><b>2017年05月25日</b>备案信息变更,站点名称改为【行动派】,备案初审通过。</li>
    <li><b>2017年05月17日</b>购置OSS资源包</li>
    <li><b>2017年04月02日</b>注册.com域名【uitwo.com】。</li>
    <li><b>2017年03月31日</b>注册.cn域名【uistudy.cn】、【iconui.cn】。</li>
    <li><b>2017年03月14日</b>购置云解析。</li>
    <li><b>2017年03月12日</b>注册.studio 域名【ebike.studio】、.cn 英文域名【bikestyle.cn】。</li>
    <li><b>2017年01月33日</b>购置网站木马查杀。</li>
    <li><b>2017年01月22日</b>购置【共享虚拟主机普惠版】。</li>
</ol>
</div>
/* 注释:2017时间轴开始*/
/* 注释:2016时间轴结束*/
<h4><span style="font-size: 20px; color: #99ccff;"><a style="color: #99ccff;">2016</a></span></h4>
<div id="teamnewslist">
<ol>
    <li><b>2016年12月05日</b>企业邮箱免费版0元续费。</li>
    <li><b>2016年01月17日</b>购置CDN流量包(建站版)。</li>
</ol>
</div>
/* 注释:2016时间轴开始*/

编辑完成后,更名为timeline.blade.php,上传到about页面的同目录。

2、新建css样式文件

新建timeline.css样式文件,代码还是直接拷贝原作者提供的。

/* 站点动态时间轴 */
#teamnewslist ol{list-style:none;padding-left: 14px;border-left: 2px solid #eee;font-size: 15px;color: #666;}
#teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
#teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
#teamnewslist li:hover{color: #555;}
#teamnewslist li:hover b::after{border-color: #00cc00;}
#teamnewslist li:hover b{color: #00cc00;}
#teamnewslist{padding-left:33px;}
#timedd dd{margin:0;padding:0;}
#timedd dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}
#timedd dt,dt a{width:100%;height:auto;display:block;font-weight: bold;color:#333;font-size:18px;cursor:pointer;padding: 1px 0 0 14px;}
#timedd dt a:hover{color: #FF0000;}

编辑保存,上传到/vendor/web-stack/css/目录下,当然你也可以随便找个css目录下的样式文件,直接复制上面的代码粘贴到里面。

3、增加时光轴链接

在首页侧边栏下面增加时光轴链接,为保持一致(新写我也不会[aru_15]),样式参照about的链接代码样式。

到这里三步做完了,个人感觉应该大功告成了,激动打开首页,时光轴链接出现了,美滋滋。

如何丰富导航网站-WebStack部署(续一)

赶紧点击链接,凉凉,新打开页面显示:

Sorry, the page you are looking for could not be found!

4、填坑

其实作为小白,虽然这种事遇到过太多次,但是心里还是有点失望。遇到这种事也是作为小白最恼火的,毕竟页面代码、样式文件没问题,其他什么问题鬼知道。。。这个问题怎么解决,自己首先还是用最笨的办法,在网站文件下不停的找可能与这个问题有关的文件,记事本打开搜索“about”,因为about页面是显示正常的。网站文件太多,找了一圈没找到,没办法最后还是要找度娘,期间搜索关键词换了很多,问题没有一样的,好在还是找到了解决问题的蛛丝马迹。

在WebStack-Laravel/routes/目录下的web.php文件中发现了“about”这个关键词:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', 'HomeController@index');
Route::get('/about', 'HomeController@about');

照葫芦画瓢,在下面添加一行:

Route::get('/timeline', 'HomeController@timeline');

到网上查了一下,这个文件应该是Laravel中的路由文件,网站部署过程app/Http/routes.php文件被移动到routes目录下,并且分割成两个文件:web.php和api.php,当然,我是看不懂[aru_31]。。。

回到网站首页,打开时光轴的链接,这时候出现了新的错误

如何丰富导航网站-WebStack部署(续一)

这次虽然错误看起来一大堆,但是核心问题还是能看到:

Method [timeline] does not exist on [App\Http\Controllers\HomeController].

找到该目录下的HomeController.php,依然有关键词“about”,同样,用记事本在下面依照about的代码样式新增代码:

     public function timeline()
    {
        return view('timeline');
    }

保存后去点击首页时光轴链接,一切现实正常了,虽然简陋,但是成功了。

如何丰富导航网站-WebStack部署(续一)

后记

以上神操作在稍微有点编程或者Laravel基础的人,真得是非常搞笑,吃了没文化的亏。作为小白还是可以稍稍YY一下,毕竟很有成就感,写在这里也只是作为一个备忘录,说不定下次遇到就用上了,大家就当笑话看一下就好。

老板通道


「觉得本文对你有帮助,请点个赞!」
发表评论 取消回复
表情 图片 链接 代码

分享
微信
微博
QQ