本文记录了开发一个名校公开课资料下载和讨论版的过程。选择了bulma作为css框架，通过CDN引入，并讨论了页面设计和布局，参考laracasts的布局方法。设计上考虑了用户界面和网站功能，目前仍在学习和构建页面阶段。
我准备开发一个名校公开课的资料下载和讨论版，功能就是站长发布信息和资料下载链接，用户可以在下面讨论，并且可以生成各种平台的分享方式分享出去。这一系列文章就记录这一过程。当然博文功能也是必不可少的。
样式
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 的首页还挺符合我的需求的，看起来也挺清爽：
![[新手开发记录] 规划网站目标](https://i-blog.csdnimg.cn/blog_migrate/d22871ff802e635ada976a75426f1216.png)
那就先照着它用 photoshop 把大概的样子设计一下，比如下图，当然，因为想法还很初步，所以都可以随时调整。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nPIXiG04-1590234946946)(https://cdn.learnku.com/uploads/images/202005/18/10195/CGTSSBEGTz.png!large)]
布局
在正式开始写之前，还应该了解一些 bulma 的基础，不过这个可能不适合放在这个系列里，我幕后了解一下，之后就开始慢慢写。
英文版文档：https://bulma.io/documentation/
中文版有好的文档欢迎留言推荐！
Bulma 文档具体看右侧的导航栏，可以按顺序学习了解：
![[新手开发记录] 规划网站目标](https://i-blog.csdnimg.cn/blog_migrate/97bf61c9196c35817ae78e4cdf3fe95d.png)
布局也是很重要的，既然设计初步达成了，就应该分析一下布局应该如何去做，主要是参考这个视频的方式：【中文语音】（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 的学习花了点时间，可能写得还不一定对，不过在后续可以逐步调整：
![[新手开发记录] 规划网站目标](https://i-blog.csdnimg.cn/blog_migrate/efea109d17487adaaa1c86c85e167b94.png)
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
