laravel中使用markdown及語法高亮
一、 新建專案
composer create-project laravel/laravel=5.3 blog --prefer-dist
二、安裝所需要的擴充套件包
- 切換到專案目錄
cd blog
複製程式碼
-
建立並修改資料庫
-
npm安裝
npm install
如果是淘寶映象源用
cnpm install
複製程式碼
沒有報錯就算安裝好了
- artisan生成登入註冊模組
php artisan make:auth
複製程式碼
- 執行遷移
php artisan migrate
複製程式碼
因為上面的auth命令會生成這兩個表,執行php artisan migrate
遷移命令之後,就會自動建立好這兩個表。
- 安裝中文語言包
composer require "caouecs/laravel-lang:~3.0"
複製程式碼
如果你不確定要安裝什麼版本或者包名稱以及版本等,也可以這樣使用
composer requre
通過關鍵詞`lang`搜尋
Search for a package: lang
輸入關鍵詞之後會列出所有關鍵詞相關的包
Enter package # to add, or the complete package name if it is not listed: 1
然後輸入對應數字就可以安裝了
版本之類的預設可以了
複製程式碼
安裝之後將語言包移動到對應位置就好了,語言包預設位置是resources/lang
cp -a vendor/caouecs/laravel-lang/src/zh-CN resources/lang
複製程式碼
最後我們將本地語言改成zh-CN
就好了
修改config/app.php
將local
的值改為zh-CN
三、安裝laravel-admin後臺管理
當然了,你也可以自己寫一個後臺模板。但畢竟費時費力,laravel後臺有很多優秀的開源管理後臺。為了方面快捷的演示,我們就選擇laravel-admin這個管理後臺。
專案:GitHub地址: z-song/laravel-admin
- 安裝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就好了。
複製程式碼
在config/app.php
加入ServiceProvider:
Encore\Admin\Providers\AdminServiceProvider::class
複製程式碼
然後執行下面的命令來發布資源:
php artisan vendor:publish --tag=laravel-admin
複製程式碼
在該命令會生成配置檔案config/admin.php,可以在裡面修改安裝的地址、資料庫連線、以及表名。
然後執行下面的命令完成安裝:
php artisan admin:install
複製程式碼
啟動服務後,在瀏覽器開啟 http://localhost:8000/admin/ ,使用使用者名稱 admin 和密碼 admin登陸.
如果需要上傳圖片請參考檔案上傳設定
四、快速建立文章管理
- 建立遷移表
php artisan make:migration create_posts_table --create=posts
複製程式碼
- 修改遷移表
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();
});
}
複製程式碼
- 執行遷移
php artisan migrate
- 建立文章模型和控制器
建立Post
模型
php artisan make:model App\\Models\\Post
複製程式碼
建立PostController
控制器
php artisan admin:make PostController --model=App\\Models\\Post
複製程式碼
- 新增一條路由
Admin/routes.php
$router->resource('/post', 'PostController');
複製程式碼
- 修改
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
五、整合markdown編輯器
如何修改預設編輯器,請參考form元件管理部分
-
去 https://simplemde.com 下載simplemde的檔案 先下載前端庫檔案Simplemde, 解壓到目錄
public/packages/admin/simplemde
-
新建元件類
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();
}
}
複製程式碼
- 註冊元件
在
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);
複製程式碼
- 使用
在控制器使用
$form->editor('content');
就可以使用markdown編輯器了。
六、前端解析及語法高亮
- npm安裝simplemde
npm install simplemde --save
複製程式碼
- 引用
在
resources/assets/js/bootsrap.js
中引入simplemde
window.simplemde = require('simplemde');
複製程式碼
- 編譯 使用命令編譯剛引入的資源,這樣才可以編輯在 public/app.js 中
npm run dev
複製程式碼
- 建立markdown解析類 segmentfault 的Markdown解析類:SegmentFault/HyperDown
Laravel 引入第三方類檔案,我們在app目錄下新建一個路徑,app/Markdown
,並將下載的類檔案 Parser.php 放在該目錄下,然後再新建一個檔案,引用該類,這樣做的好處就是可以完全分離核心類檔案,如同合約contacts 一樣,如果以後我們的解析類變了,我們只需對核心類做改變,而其他應用的方法不需要再修改。
markdown.php 引用 parse.php 類:
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);
複製程式碼
- 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>
複製程式碼
七、完成前臺markdwon解析及高亮顯示
- 建立一條路由
route/web.php
Route::resource('/article', 'ArticleController');
複製程式碼
- 建立控制器
ArticleController
php artisan make:controller ArticleController
複製程式碼
- 建立文章列表及詳情頁模板
在
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
複製程式碼
- 修改
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'));
}
}
複製程式碼
列表頁效果圖
詳情頁及高亮效果圖
- 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');
}
複製程式碼
八、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>
複製程式碼
效果圖
markdown解析部分基本上參考
Corwlen
大神的 Laravel5.4 部落格開發關於
laravel-admin
使用,可以去laravel-admin官網閱讀說明文件原文連結www.bear777.com/blog/larave…
github地址github.com/pandoraxm/l…