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

Affren 的个人博客 / 186 / 0 / 创建于 3年前 / 更新于 3年前

我准备开发一个名校公开课的汉化资料下载和讨论版，功能就是站长发布信息和资料下载链接，用户可以在下面讨论，并且可以生成各种平台的分享方式分享出去。这一系列文章就记录这一过程。当然博文功能也是必不可少的。

样式

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">

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

<!DOCTYPE html>

加上自适应的 viewpoint meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

具体参看这个：Getting started with Bulma

Vue 也引入：

<script type="text/javascript" src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

这里我发现一个小技巧，就是通过 https://unpkg.com 去引入什么文件的时候，比如 Vue，你也不确定到底什么版本，直接访问这个 URL ：https://unpkg.com/vue@2，然后它自动帮你跳转到最新版本的具体文件 URL，很方便。

设计

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

有没有现成比较好的可以参考。
我最终希望呈现给用户是什么样的，用户应该如何使用我的网站。

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

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

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

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

布局

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

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

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

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

<body>
    {{ $slot }}
</body>

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

<x-main>
   <!--要放入的其他代码 -->
</x-main>

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

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

bulma 国外教程视频

本作品采用《CC 协议》，转载必须注明作者和本文链接

博客：[完结] Laravel 6 From Scratch [Laracasts 免费视频中文语音] Laravel 国外汉化视频教程微信公众号：affrencom

Affren

课程读者 128 声望

官网：https://affren.com —— 中文 Affiliate Marketing 资讯

1 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

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

样式

设计

布局

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

样式

设计

布局

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录