您好,欢迎光临营销网站推广服务网站,我们提供网站推广服务、网站关键词SEO优化、关键词排名SEO服务。

[新手开发记录] 规划网站目标

作者:jcmp      发布时间:2021-05-04      浏览量:0
一、样式css 框架用什么呢?以前我一直

一、样式

css 框架用什么呢?以前我一直使用 bootstrap,主要是熟悉了。这次想试试新的框架,比如 bulma 。 还有看到 laracasts 视频教程 Laravel From Scratch( [完结] Laravel 6 实战 - 写一个 Twitter - [Laracasts 免费视频中文语音] ) 中实战案例采用了 TailwindCSS,它和上述两者略有不同,是用类的方法替代了传统写 css 的方法,也可以尝试一下。由于我暂时没精力反复调试样式,还是就用现成固定的框架好了。 我这次选择 bulma ,也不去研究怎么定制化,就直接通过 CDN 引入就好:

Bulma 也有一些要求,包括使用 HTML 5 的 doctype :

加上自适应的 viewpoint meta tag

具体参看这个: Getting started with Bulma。

Vue 也引入:

二、设计

样式选择好了,但是页面到底怎么规划还是没想好,简单 PS 一个,至少有个方向,也可以研究一下 laracasts 中出现多次的 zeplin,如果你精力确实很旺盛的话。 对于设计,我思考的角度主要有两个:

关于第1点,我就不多说了,青菜萝卜,各有所爱。 关于第2点,我首先希望展现网站的logo和网站名称,作为品牌印象。其次我希望用户第一时间了解网站是做什么的,以及目前进展的一些情况,然后可以有一些直观的入口:一方面老用户可以迅速进入想要进入的版块,另一方面,新用户也可以快速了解如何开始使用网站。 所以我不得不说,似乎 Bulma 的首页还挺符合我的需求的,看起来也挺清爽:

那就先照着它用 photoshop 把大概的样子设计一下,比如下图,当然,因为想法还很初步,所以都可以随时调整。

三、布局

在正式开始写之前,还应该了解一些 bulma 的基础,不过这个可能不适合放在这个系列里,我幕后了解一下,之后就开始慢慢写。 英文版文档: https://bulma.io/documentation/ 中文版有好的文档欢迎留言推荐! Bulma 文档具体看右侧的导航栏,可以按顺序学习了解:

布局也是很重要的,既然设计初步达成了,就应该分析一下布局应该如何去做,主要是参考这个视频的方式: 【中文语音】(61)【实战】在组建中嵌套布局文件 - Laracasts - Laravel 6 From Scratch。

我在 view 目录下新建了 components 目录,然后新建了一个 main.blade.php 主要代码除了一些 html 就是在 body 中插入了 {{ $slot }} :

{{ $slot }}

然后任何页面要使用 main.blade.php 这个布局文件,就可以这样写:

两个标签中间的内容就会插入上面 {{ $slot }} 的位置。 目前而言,我都可以使用一些占位的内容将整个页面先构建起来,然后逐步把一些真正业务的东西加入进去。 最后大概写成这个样子,这里主要还是 bulma 的学习花了点时间,可能写得还不一定对,不过在后续可以逐步调整:

我的公众号:laravelgo,分享和汉化一些国外优秀视频教程。