内容简介：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.*"
- 注意：因为我们演示是使用的 laravel 5.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组件管理部分
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…
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- Go语法糖之‘...’ 的使用
- 使用 Calcite 做 SQL 语法解析
- 在ES6中使用扩展语法有什么好处？它与rest语法有什么不同？
- Kibana使用之Lucene的语法查询
- MySQL的安装和基础使用及语法指南
- 微信小程序使用async/await语法
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
