摘要：本文将使用框架开发一个全新的博客，开发设备为，使用环境，为。现在让我们先来创建一个文件夹，并将文件放置到其中。完成之后，点击右下角的按钮。

本文将使用Laravel5.4框架开发一个全新的博客，开发设备为Mac，使用Homestead 环境，IDE 为 Phpstorm。

> cd ~/Homestead && vagrant up
> vagrant ssh
> vagrant@homestead:~$ cd Code
> vagrant@homestead:~/Code$ composer create-project laravel/laravel digtime

// 或者指定版本
composer create-project --prefer-dist laravel/laravel digtime "5.5.*"

➜  ~ atom ~/.homestead/Homestead.yaml

---
ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/Code
      to: /home/vagrant/Code

sites:
    - map: digtime.app # <--- 这里，第四个项目
      to: /home/vagrant/Code/digtime/public # <--- 这里

databases:
    - digtime

variables:
    - key: APP_ENV
      value: local

# blackfire:
#     - id: foo
#       token: bar
#       client-id: foo
#       client-token: bar

# ports:
#     - send: 50000
#       to: 5000
#     - send: 7777
#       to: 777
#       protocol: udp

修改完 Homestead.yaml 文件后，需要重新加载配置文件信息才能生效。

➜  ~ cd Homestead
➜  Homestead git:(7924ab4) vagrant reload --provision

Hosts配置域名在mac的位置： /etc/hosts

192.168.10.10 digtime.app

digtime.app

cd ~/Homestead && vagrant up
vagrant ssh
cd ~/Code/digtime

npm install

执行所有未执行的迁移

php artisan migrate

回滚上一次的迁移

vagrant@homestead:~/Code/digtime$ php artisan migrate:rollback

php artisan make:auth

Laravel 为我们默认创建的模型文件放置在 app 文件夹下，为了更符合 MVC 模式的开发流程，本博文统一使用 app/Models 文件夹来放置所有的模型文件。现在让我们先来创建一个 app/Models 文件夹，并将 User.php 文件放置到其中。

$ mkdir app/Models
$ mv app/User.php app/Models/User.php

在执行完这一步的操作之后，我们还需要执行下面这两个操作：

1、修改 User.php 文件，更改 namespace 为我们新创建的文件夹路径：
app/Models/User.php

2、全局更改 AppUser 为 AppModelsUser，在 Atom中使用快捷键 shift + cmd(ctrl) + f 来进行全局搜索替换的操作。
完成之后，点击右下角的 Replace All 按钮。

三、github 托管项目
git 初始化
vagrant@homestead:~/Code/digtime$ git init
Initialized empty Git repository in /home/vagrant/Code/digtime/.git/
vagrant@homestead:~/Code/digtime$ git add -A
> git commit -m "Initial commit"

// 将项目推到github上
> git remote add origin git@github.com:corwien/digtime.git
> git push -u origin master

// 添加分支
> git checkout master
> git checkout -b users
四、webpack打包资源
有关Laravel5.4 的 webpack使用，请看我的这篇博文：
Laravel5.4新特性-Laravel-mix的使用
Mix 是位于 Webpack 顶层的配置层，所以要运行 Mix 任务你只需要在运行包含在默认 package.json 文件中的其中某个 NPM 脚本即可：
// 1.安装package.json 包
npm install

// 2.运行所有 Mix 任务...
npm run dev

// 运行所有 Mix 任务并减少输出...
// npm run production

// 3.监控前端资源改变
npm run watch
监控前端资源改变
五、密码重置邮件发送
对密码重置邮件发送进行重构，使用sendCloud进行发送。
在 AppModelsUser.php 用户 Model 方法中重写sendPasswordResetNotification($token)发送邮件的方法：
 /**
     * 重写重置密码的邮件发送通知，覆盖zhihu_app_reset_password底层的发送方法
     * 对这个类进行重写： IlluminateContractsAuthPasswordBroker
     *  $user->sendPasswordResetNotification(
     *   $this->tokens->create($user)
     *   );
     * 类文件：PasswordsPasswordBroker
     * @param $token
     */
    public function sendPasswordResetNotification($token)
    {
        // 重构发送邮件
        (new UserMailer())->resetPassword($token, $this->email);
    }

IlluminateAuthPasswordsPasswordBroker.php
 /**
     * Send a password reset link to a user.
     *
     * @param  array  $credentials
     * @return string
     */
    public function sendResetLink(array $credentials)
    {
        // First we will check to see if we found a user at the given credentials and
        // if we did not we will redirect back to this current URI with a piece of
        // "flash" data in the session to indicate to the developers the errors.

        // 根据传递过来的email获取用户信息
        $user = $this->getUser($credentials);

        if (is_null($user)) {
            return static::INVALID_USER;
        }

        // Once we have the reset token, we are ready to send the message out to this
        // user with a link to reset their password. We will then redirect back to
        // the current URI having nothing set in the session to indicate errors.
        $user->sendPasswordResetNotification(
            $this->tokens->create($user)
        );

        return static::RESET_LINK_SENT;
    }
IlluminateAuthPasswordsCanResetPassword.php
 /**
     * Send the password reset notification.
     *
     * @param  string  $token
     * @return void
     */
    public function sendPasswordResetNotification($token)
    {
        $this->notify(new ResetPasswordNotification($token));
    }
最底层的发送邮件方法：
IlluminateAuthNotificationsResetPassword.php
 /**
     * Build the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return IlluminateNotificationsMessagesMailMessage
     */
    public function toMail($notifiable)
    {
        return (new MailMessage)
            ->line("You are receiving this email because we received a password reset request for your account.")
            ->action("Reset Password", route("password.reset", $this->token))
            ->line("If you did not request a password reset, no further action is required.");
    }
六、自定义函数方法
在app目录下，创建共用的函数文件Support/helpers.php

创建方法文件之后，需要在composer.json文件中自动加载：
 "autoload": {
        "files":[
            "app/Support/helpers.php"
        ],
       
    },
然后执行 composer 重新加载方法:
> composer dump-autoload
七、Markdown编辑器
http://editor.integ.me/ segmentfault 家的，解析库也有：https://segmentfault.com/a/11...
https://laravel-china.org/top...
1.Markdown编辑器
Markdown编辑器：https://simplemde.com/

这个编辑器看起来挺不错，很简洁，我们可以集成在我们的项目中。
1.1 npm 安装
npm install simplemde --save
1.2 引用
在resources/assets/js/bootsrap.js 中引入刚下载的资源包：
// 引入markdown编辑器
window.simplemde = require("simplemde");
1.3 编译静态资源
使用命令编译刚引入的资源，这样才可以编辑在 public/app.js 中:
npm run dev
OK,这样就引入到前端资源文件中了
Demo:
demo.html
  


    
        
        
       
       
        
    

    

        
SimpleMDE Dome

        

            
        

        

    

1.4 在Laravel-admin中集成Simplemde编辑器
我们可以给下边的 laravel-admin后台 集成该 Markdown 的编辑器。


Simplemde 是一个优秀简洁的Markdown编辑器，如果 laravel-admin 自带的基于 ckeditor 的编辑器组件使用上有问题，可以通过下面的步骤可以集成它，并覆盖掉ckeditor：
1.4.1 先下载前端库文件Simplemde
先下载前端库文件Simplemde, 解压到目录 public/packages/admin/simplemde
1.4.2 新建组件类
然后新建组件类app/Admin/Extensions/Simplemde.php
script = <<
1.4.3 注册
然后注册进laravel-admin,在 app/Admin/bootstrap.php 中添加以下代码：

 *
 * Bootstraper for Admin.
 *
 * Here you can remove builtin form field:
 * EncoreAdminForm::forget(["map", "editor"]);
 *
 * Or extend custom form field:
 * EncoreAdminForm::extend("php", PHPEditor::class);
 *
 * Or require js and css assets:
 * Admin::css("/packages/prettydocs/css/styles.css");
 * Admin::js("/packages/prettydocs/js/main.js");
 *
 */

// EncoreAdminForm::forget(["map", "editor"]);

use AppAdminExtensionsSimplemde;
use EncoreAdminForm;

Form::extend("editor", Simplemde::class);

1.4.4 使用
// 这样就可以使用我们上边自定义的Simplemde Markdown编辑器了
$form->editor("content");
完整文件
  /**
     * Make a form builder.
     *
     * @return Form
     */
    protected function form()
    {
        return Admin::form(Article::class, function (Form $form) {

            $form->display("id", "ID");
            $form->text("title", "标题")->rules("required|min:3");
            $form->text("subtitle", "副标题");

            $form->text("user_id", "作者ID")->default(4);
            $form->text("slug", "Slug")->default("My-blog-4");
            $form->text("category_id", "分类ID")->default(1);
            $form->text("order", "排序")->default(1);
            $form->radio("is_excellent", "是否精华")->options(["F" => "否", "T" => "是"])->default("T");

            // 图片路径为upload/images/
            $form->image("page_image", "上传文章背景图")->move("images", function($file){

                // 自定义文件名,时间戳+五个随机字符串+用户ID
                $file_name =  date("Ymd") . str_random(6);
                return $file_name . "." . $file->guessExtension();
            });

            $form->datetime("published_at", "发布作品时间")->format("YYYY-MM-DD HH:mm:ss");

            $form->display("created_at", trans("admin::lang.created_at"));
            $form->display("updated_at", trans("admin::lang.updated_at"));
            
            // 自定义的编辑器
            $form->editor("content")->rules("required|min:3");
        });
    }
2.Markdown解析类
segmentfault 的Markdown解析类：SegmentFault/HyperDown
Laravel 引入第三方类文件，我们在app目录下新建一个路径，app/Markdown,并将下载的类文件 Parser.php 放在该目录下，然后再新建一个文件，引用该类，这样做的好处就是可以完全分离核心类文件，如同合约contacts 一样，如果以后我们的解析类变了，我们只需对核心类做改变，而其他应用的方法不需要再修改。
markdown.php 引用 parse.php 类:

parser = $parser;
    }

    public function markdown($text)
    {
        $html = $this->parser->makeHtml($text);

        return $html;
    }


}

在引用第三方类后，需要执行下面命令进行自动加载：
composer dump-autoload
使用方法：
markdown = $markdown;
}

// 解析Markdown 内容
$this->markdown->markdown($article->content);

3.Markdown语法高亮
找了一个非常简洁的 Markdown 样式文件，我放在了 Gist 上，有需要的朋友可以看看：
Gist: corwien/Markdown.scss
将该文件下载放在Laravel中  resources/assets/css/vendor/markdown.scss，然后在 resources/sass/app.scss 中引入：
// Markdown

// 代码高亮
@import "./../css/vendor/highlight.min";

// 编辑器样式文件
@import "./../css/vendor/simplemde.min";

// 引入markdown样式文件
@import "./../css/vendor/markdown.scss";   
然后编译前端资源文件：
npm run dev
这样，该markdwon样式文件就编译到前端资源文件中了。
我们可以在前端的内容字段处引入 class="markdown" 样式，然后看看渲染效果：
article.blade.php
    

       {!! $article->content !!}
    

代码块是不是很简洁清爽许多呢？
八、开源的管理后台
我们可以在项目中引入开源的管理后台，这样可以大大的提高我们的项目开发速度，这里推荐两个非常强大的开源管理后台。
1.Laravel-Administrator
【扩展推荐】管理员后台快速生成工具 Administrator "增强版" 分享
项目GitHub地址：summerblue/administrator
该后台非常好用，由Laravel-China 团队维护开发，十分钟就可以搭建起一个简单的管理后台：

2.laravel-admin
该管理后台非常强大，使用Laravel AdminLTE开发，可以快速实现增删改查功能及角色管理。
项目：GitHub地址: z-song/laravel-admin
Demo： 后台用户名：admin 密码：admin

由于该前端资源有引入google地图，所以，前端加载会非常慢，这里我们对源码进行一下修改：
换掉谷歌的地图，加载时间过长：
/vendor/encore/laravel-admin/src/Form/Field/Map.php
/**
     * Get assets required by this field.
     *
     * @return array
     */
    public static function getAssets()
    {
        // 本项目配置环境使用的语言包是zh-CN,"resources/lang/zh-CN/", 所以这里对zh_CN做出修改【20170501】
        if (config("app.locale") == "zh-CN") {
            $js = "http://map.qq.com/api/js?v=2.exp";
        } else {
            $js = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=".env("GOOGLE_API_KEY");
        }

        return compact("js");
    }

九、Markdown侧边栏生成
为了使我们的文章详情页更利于浏览，像SF一样，有一个侧边导航栏，这里我们使用一段js代码就可以轻松的实现该功能。

js代码：

 


 



DemoGist:corwien/markdown-side-menu-demo.html