laravel中使用markdown及語法高亮

時間  2019-11-16
標籤 laravel 使用 markdown 語法 欄目 Markdown 简体版
原文   原文鏈接

laravel中使用markdown及語法高亮

1、 新建項目

composer create-project laravel/laravel=5.3 blog --prefer-distjavascript

0

2、安裝所須要的擴展包

  1. 切換到項目目錄
cd blog
複製代碼

  1. 建立並修改數據庫php

  2. npm安裝css

npm install
	若是是淘寶鏡像源用
	cnpm install
複製代碼

1

沒有報錯就算安裝好了html

  1. artisan生成登陸註冊模塊
php artisan make:auth
複製代碼
  1. 執行遷移
php artisan migrate
複製代碼

由於上面的auth命令會生成這兩個表，執行php artisan migrate遷移命令以後，就會自動建立好這兩個表。前端

3

  1. 安裝中文語言包
composer require "caouecs/laravel-lang:~3.0"
複製代碼

若是你不肯定要安裝什麼版本或者包名稱以及版本等，也能夠這樣使用java

composer requre
經過關鍵詞`lang`搜索
Search for a package: lang
輸入關鍵詞以後會列出全部關鍵詞相關的包
Enter package # to add, or the complete package name if it is not listed: 1
而後輸入對應數字就能夠安裝了
版本之類的默承認以了
複製代碼

4

安裝以後將語言包移動到對應位置就行了，語言包默認位置是resources/langpython

cp -a vendor/caouecs/laravel-lang/src/zh-CN resources/lang
複製代碼

最後咱們將本地語言改爲zh-CN就行了 修改config/app.php 將local的值改成zh-CNlinux

5

3、安裝laravel-admin後臺管理

固然了，你也能夠本身寫一個後臺模板。但畢竟費時費力，laravel後臺有不少優秀的開源管理後臺。爲了方面快捷的演示，咱們就選擇laravel-admin這個管理後臺。laravel

項目：GitHub地址: z-song/laravel-admingit

中文說明文檔

  1. 安裝laravel-admin
composer require encore/laravel-admin "1.3.*"
複製代碼
  • 注意：由於咱們演示是使用的laravel5.3版本

固然也能夠這樣安裝

composer requre
輸入關鍵字`laravel-admin`
Enter package # to add, or the complete package name if it is not listed: 3
這列表項裏選擇 [3] `encore/laravel-admin`
Enter the version constraint to require (or leave blank to use the latest version): 1.3
注意咱們這裏版本不能選默認版本的，版本填1.3就行了。
複製代碼

6

在config/app.php加入ServiceProvider:

Encore\Admin\Providers\AdminServiceProvider::class
複製代碼

而後運行下面的命令來發布資源：

php artisan vendor:publish --tag=laravel-admin
複製代碼

7

在該命令會生成配置文件config/admin.php，能夠在裏面修改安裝的地址、數據庫鏈接、以及表名。

而後運行下面的命令完成安裝：

php artisan admin:install
複製代碼

8

啓動服務後，在瀏覽器打開 http://localhost:8000/admin/ ,使用用戶名 admin 和密碼 admin登錄.

若是須要上傳圖片請參考文件上傳設置

4、快速建立文章管理

  1. 建立遷移表
php artisan make:migration create_posts_table --create=posts
複製代碼
  1. 修改遷移表database/2018_01_13_165831_create_posts_table.php
public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->text('title');
            $table->text('subtitle');
            $table->text('cover');
            $table->enum('type', ['0', '1', '2', '3', '4', '5', '9'])->default('0');
            $table->text('content');
            $table->timestamps();
        });
    }
複製代碼
  1. 執行遷移php artisan migrate

9

  1. 建立文章模型和控制器

建立Post模型

php artisan make:model App\\Models\\Post
複製代碼

10

建立PostController控制器

php artisan admin:make PostController --model=App\\Models\\Post
複製代碼

11

  1. 新增一條路由Admin/routes.php
$router->resource('/post', 'PostController');
複製代碼
  1. 修改Admin/PostController裏面的form和grid兩個方法
protected function grid()
    {
        return Admin::grid(Post::class, function (Grid $grid) {

            $grid->id('ID')->sortable();
            $grid->title('標題');
            $grid->subtitle('副標題');
            $grid->type('類型')->options([
                '0' => 'php',
                '1' => 'laravel',
                '2' => 'javascript',
                '3' => 'python',
                '4' => 'golang',
                '5' => 'linux',
                '9' => 'other'
            ]);
            $grid->cover('封面')->image();
            $grid->content('內容')->limit(100);
            $grid->created_at('建立時間');
            $grid->updated_at('修改時間');
        });
    }

    protected function form()
    {
        return Admin::form(Post::class, function (Form $form) {

            $form->display('id', 'ID');
            $form->text('title', '標題');
            $form->textarea('subtitle', '副標題')->rows(3);
            $form->select('type', '類型')->options([
                '0' => 'php',
                '1' => 'laravel',
                '2' => 'javascript',
                '3' => 'python',
                '4' => 'golang',
                '5' => 'linux',
                '9' => 'other'
            ]);
            $form->image('cover', '封面');
            $form->editor('content', '內容');
            $form->display('created_at', '建立時間');
            $form->display('updated_at', '修改時間');
        });
    }
複製代碼

建立一個文章表單，打開是這樣的。laravel_admin默認是集成了CKEditor

12

5、集成markdown編輯器

如何修改默認編輯器，請參考form組件管理部分

  1. 去 https://simplemde.com 下載simplemde的文件 先下載前端庫文件Simplemde, 解壓到目錄 public/packages/admin/simplemde

  2. 新建組件類app/Admin/Extensions/Simplemde.php

<?php

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class Simplemde extends Field
{
    protected $view = 'admin::form.editor';

    protected static $css = [
        '/packages/admin/simplemde/dist/simplemde.min.css',
    ];

    protected static $js = [
        '/packages/admin/simplemde/dist/simplemde.min.js',
    ];

    public function render()
    {
        $this->script = <<<EOT

 var simplemde = new SimpleMDE({
               autofocus: true,
                autosave: {
                    enabled: true,
                    delay: 5000,
                    unique_id: "editor01",
                },
                spellChecker: false,
            });

EOT;
        return parent::render();

    }
}
複製代碼
  1. 註冊組件 在 app/Admin/bootstrap.php 中添加如下代碼
<?php

/**
 * Laravel-admin - admin builder based on Laravel.
 * @author z-song <https://github.com/z-song>
 *
 * Bootstraper for Admin.
 *
 * Here you can remove builtin form field:
 * Encore\Admin\Form::forget(['map', 'editor']);
 *
 * Or extend custom form field:
 * Encore\Admin\Form::extend('php', PHPEditor::class);
 *
 * Or require js and css assets:
 * Admin::css('/packages/prettydocs/css/styles.css');
 * Admin::js('/packages/prettydocs/js/main.js');
 *
 */
use App\Admin\Extensions\Simplemde;
use Encore\Admin\Form;

Form::extend('editor', Simplemde::class);
複製代碼
  1. 使用 在控制器使用$form->editor('content');就可使用markdown編輯器了。

13

6、前端解析及語法高亮

  1. npm安裝simplemde
npm install simplemde --save
複製代碼
  1. 引用 在resources/assets/js/bootsrap.js 中引入simplemde
window.simplemde = require('simplemde');
複製代碼
  1. 編譯 使用命令編譯剛引入的資源，這樣才能夠編輯在 public/app.js 中
npm run dev
複製代碼

14

  1. 建立markdown解析類 segmentfault 的Markdown解析類：SegmentFault/HyperDown

Laravel 引入第三方類文件，咱們在app目錄下新建一個路徑，app/Markdown，並將下載的類文件 Parser.php 放在該目錄下，而後再新建一個文件，引用該類，這樣作的好處就是能夠徹底分離核心類文件，如同合約contacts 同樣，若是之後咱們的解析類變了，咱們只需對核心類作改變，而其餘應用的方法不須要再修改。

markdown.php 引用 parse.php 類:

15

App\Markdown\Markdown.php

<?php

namespace App\Markdown;

/**
 * Class Markdown
 *
 * @package \App\Markdown
 */
class Markdown
{
    protected $parser;

    /**
     * Markdown constructor.
     *
     * @param $parser
     */
    public function __construct(Parser $parser)
    {
        $this->parser = $parser;
    }

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

        return $html;
    }


}
複製代碼

在引用第三方類後，須要執行下面命令進行自動加載：

composer dump-autoload
複製代碼

使用方法

<?php

protected $markdown;
public function __construct(Markdown $markdown)
{
   $this->markdown = $markdown;
}

// 解析Markdown 內容
$this->markdown->markdown($article->content);
複製代碼
  1. markdown語法高亮 一個很是簡潔的 Markdown 樣式文件 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

<div class="markdown" >
       {!! $article->content !!}
    </div>
複製代碼

7、完成前臺markdwon解析及高亮顯示

  1. 建立一條路由 route/web.php
Route::resource('/article', 'ArticleController');
複製代碼
  1. 建立控制器ArticleController
php artisan make:controller ArticleController
複製代碼
  1. 建立文章列表及詳情頁模板 在resource\home\article下建立index.blade.php及list.blade.php

index.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<div class="panel">
				<h2>文章列表頁</h2>
			</div>
			@foreach ($data as $list)
			<div class="panel panel-default">
				<h3><a href="/article/{!! $list->id !!}">{!! $list->title !!}</a></h3>
				<div class="panel-heading">
					{!! $list->subtitle !!}
				</div>

				<div class="panel-body" style="max-width:100%;height:300px;overflow:hidden;">
					<a href="/article/{!! $list->id !!}">
						<img src="/upload/{!! $list->cover !!}" style="max-width:100%;">
					</a>
				</div>
				<div class="panel-footer">
					{!! $list->created_at !!}
				</div>
			</div>
			@endforeach

			{!! $data->links() !!}
		</div>
	</div>
</div>
@endsection
複製代碼

list.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <h3><a href="/article/{!! $data->id !!}">{!! $data->title !!}</a></h3>
                <div class="panel-heading">
                    {!! $data->subtitle !!}
                </div>
                <div class="panel-body">
                    <div class="markdown">
                        {!! $data->content !!}
                    </div>
                </div>
                <div class="panel-footer">
                    {!! $data->created_at !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
複製代碼
  1. 修改ArticleController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;
use App\Markdown\Markdown;

class ArticleController extends Controller
{
    protected $markdown;
    public function __construct(Markdown $markdown)
    {
       $this->markdown = $markdown;
    }

    public function index()
    {
    	$data = Post::paginate(5);
    	return view('home.article.index', compact('data'));
    }

    public function show($id)
    {
    	$data = Post::find($id);
        $data->content = $this->markdown->markdown($data->content);
    	return view('home.article.list', compact('data'));
    }
}
複製代碼

列表頁效果圖

16

詳情頁及高亮效果圖

17

  1. google地圖的問題 由於laravel-admin默認加載了google地圖，網頁加載會很是慢。 修改一下源碼便可。 /vendor/encore/laravel-admin/src/Form/Field/Map.php
public static function getAssets()
    {
		// 將語言包判斷`zh_CN`改成`zh-CN`,由於語言包咱們默認的就是`zh-CN`
        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');
    }
複製代碼

8、markdown側邊欄

生成文章側邊欄

<script type="text/javascript">
 $(document).ready(function(){
      $("h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","wow"+i);
        $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
        $(".newh2").css("margin-left",0);
        $(".newh3").css("margin-left",20);
        $(".newh4").css("margin-left",40);
        $(".newh5").css("margin-left",60);
        $(".newh6").css("margin-left",80);
      });
 });
</script>
<div id="category"></div>
複製代碼

效果圖

18

markdown解析部分基本上參考Corwlen大神的 Laravel5.4 博客開發

關於laravel-admin使用，能夠去laravel-admin官網閱讀說明文檔

原文連接www.bear777.com/blog/larave…

github地址github.com/pandoraxm/l…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程