strangefate/blogger

用于轻松将博客或新闻文章添加到Laravel项目的处理器

v1.1.0 2023-05-08 21:24 UTC

This package is auto-updated.

Last update: 2024-09-09 00:17:06 UTC


README

包安装

此模块提供了一些快速模板,用于将博客添加到您的Laravel网站中。它包括对CKEditor的支持,这是一个可以直接将图片附加到您的帖子上的所见即所得编辑器。CKEditor需要Vue.js,但您可以根据需要自定义项目以排除它。如果您不想使用CKEditor,还有一个简化的编辑器,它包含一个基本的文本编辑器。

依赖包

composer require strangefate/blogger

运行迁移以将所需的评论、点赞和报告表添加到数据库中

php artisan migrate

您可以将配置文件公开以覆盖一些基本配置,包括文章模型的slug。

php artisan vendor:publish --provider=StrangeFate\Blogger\BloggerServiceProvider --tag=config

CKEditor (所见即所得)

要使用CKEditor,运行此Artisan命令,它将自动化大部分安装过程。

php artisan blogeditor:install

这将通过npm安装Vue CKEditor模块并添加大多数所需模块。您仍然需要添加一个javascript处理器来上传附加到或拖到编辑器中的图片。为此,向默认Vue实例添加一个方法,指定图片上传表单的路径。

import CustomUploadAdapter from './classes/ckeditor-upload-adapter-class'; //added by blogeditor:install

const app = new Vue({
    el: '#app',
    mounted() {},

    // This code will be inserted into your app.js file. Customize this code for your project. You can make as many of these modules as needed for your project.
    methods: {
    	CustomUploadAdapterPlugin( editor ) {
		    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
	    	    loader.uploadUrl = '/api/posts/editorimages';
	        	return new CustomUploadAdapter( loader );
		    }
		}
    },
    //end required code.
});

由于CKEditor使用HTML标签,您可能不想使用blades {{}} 清洁器。Blogger有自己的清洁方法来删除代码。您可以通过在发布后编辑 config\blogger.php 中的 safe_tags 数组来指定项目中可以保留的标签。

'sanitizer' => [
    'safe_tags' => [
        'pre','b','em','u','ul','li','ol','p','br','tt','hr','i','table','tr','th','td',
    ]
],

Blogger还会调整上传图片的大小以节省文件空间。您可以在Blogger配置文件中自定义图片的最大尺寸。

'social' => [ 
    'height' => 601,
    'width' => 1147,
],

路由和控制器

现在您需要为项目设置路由和控制器。由于围绕博客的多种支持案例(主要是授权),默认情况下不会执行这些操作。Blogger确实有一些快速且易于使用的Controller类,您可以使用它们来加速此过程。建议您创建一个新控制器并继承这些类,根据需要覆盖方法。

web.php

Route::resource('/posts', 'PostController');
Route::post('/posts/{post}/comment', 'PostController@comment');
Route::post('/posts/{post}/like', 'PostController@like');
Route::get('/posts/{post}/image', 'PostController@image');
php artisan make:controller PostController
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use StrangeFate\Blogger\Controllers\BloggerPostWithEditorController;  //BloggerPostController without CKEdit

class PostController extends BloggerPostWithEditorController  //BloggerPostController without CKEdit
{
	public function __construct() {
        $this->middleware('auth')->except(['index','show', 'image']);
    }
}

对于CKEditor模块,还有一个基于API的控制器来处理图片上传。像前面的示例一样,您应该创建一个新控制器并继承CKEditorImageUploadController。api.php

Route::post('/posts/images', 'api\PostImageController@image_upload'); //single image upload (ImageSelector.vue)
Route::post('/posts/editorimages', 'api\PostImageController@editor_image_upload');  //CKeditor Image. This URL should match what you put in for the loader.uploadUrl in the app.js module.
php artisan make:controller api\PostImageController
<?php

namespace App\Http\Controllers\api;

use Illuminate\Http\Request;
use StrangeFate\Blogger\Controllers\CKEditorImageUploadController;

class PostImageController extends CKEditorImageUploadController {
   
   public function __construct() {
       $this->middleware(['auth:api']);
   }  
}

视图

此项目有可快速定制的视图,以便快速定制您的解决方案。您很可能需要覆盖它们。为此,将视图发布到您的项目并格式化为所需格式。

php artisan vendor:publish --provider=StrangeFate\Blogger\BloggerServiceProvider --tag=views

视图

@include('blogger::index') {{-- Index layout for base overview --}}
@include('blogger::card') {{-- Basic card layout for index view --}}
@include('blogger::create') {{-- Create form with image upload --}}
@include('blogger::ck_create') {{-- Create form with text editor and image picker --}}
@include('blogger::edit') {{-- Create form with image upload --}}
@include('blogger::ck_edit') {{-- Edit form with text editor and image picker --}}
@include('blogger::show') {{-- Article view --}}
@include('blogger::templates.text-editors') {{-- Note to be used. Example text editors. --}}

评论

Blogger使用 strangefate\commenthandler 来处理帖子评论和点赞,并且将自动与本项目一起拉入。请查阅评论处理器的文档以获取更多配置详细信息。