ashkan/comment

双语评论包(波斯语和英语语言)

dev-master 2021-06-16 14:55 UTC

This package is auto-updated.

Last update: 2024-09-16 22:09:06 UTC


README

Bilingual-Laravel-Package

双语评论 Laravel 包

(使用 Laravel Blade(bootstrap) 和 VUE JS 制作)

免费的双语评论包,让您在项目中拥有完整的评论部分(前端)。

安装和依赖项

composer require ashkan/comment

安装或启用 'gd' 扩展

;extension=gd

发布包

php artisan vendor:publish --provider="Ashkan\Comment\CommentServiceProvider"
php artisan migrate

设置要求

Add  'use HasComments;' to COMMENTER model like 'User'


use Ashkan\Comment\Traits\CanComment;

class User extends Authenticatable
{
    use HasFactory, Notifiable;
    
    # important
    use CanComment;

    protected $fillable = [
        'name',
        'email',
        'password',
    ];
Add  'use HasCommentable;' to COMMENTABLE model like 'Post , Article ,...'


use Ashkan\Comment\Traits\HasComments;

class Post extends Model
{
    use HasFactory;
    
    # important
    use HasComments;

    protected $fillable = [
        ...
    ];
}

     

使用方法

要使用此包,请在您的代码中渲染此行,并将您的模型对象(帖子、文章、课程等)传递给此行代码的参数

示例

@include('comment.partials.Comment' , ['obj' => $article])

您可以在任何地方使用 'Comment' 模型

use Ashkan\Comment\Models\Comment;
use Ashkan\Comment\Models\Likes_And_DisLikes;

Comment::create();
Comment::all();
Comment::paginate(10);
,...

Likes_And_DisLikes::create();
Likes_And_DisLikes::all();
Likes_And_DisLikes::paginate(10);
,...

或使用 'CommentFacade' 和 'LikeDisLikeFacade' 的方法(请参阅存储库类中的 facade 方法)

Ashkan\Comment\Repositories\CommentRepository
Ashkan\Comment\Repositories\LikeDisLikeRepository

     


 
 

自定义包和配置(包含您自己的依赖项的包配置和选项)

您可以在 'config/comment.php' 文件中自定义包的选项和事件

示例

要更改 'textarea' 编辑器,您可以选择您喜欢的选项

return [
            #  Editor Options :
                        #      1 => 'CKEDITOR' (Default)
                        #      2 => 'Tiny MCE'
                        #      3 => 'Without Editor'   ( simple textarea )
        'Editor' => 1,
        
      ]

要启用或禁用 '喜欢和不喜欢' 或 '加载' 或 '分页',您可以更改

return [
        'Has_Like_And_DisLike' => true,

        'Loading' => true,

             #  Pagination Options :
                        #      1 => 'Material Icons' (Default)
                        #      2 => 'Bootstrap'
                        #      3 => 'Without Pagination'      
        'Pagination' => 1,
        'PaginationDefaultNumber' => 8,
        
        
     ]

要更改日期时间的时区(例如 '波斯语')

set 'timezone' in 'config/app.php' to 'Asia/Tehran'

要自定义主题(卡片、表单和功能),您可以在 'resources/views/comment' 文件中更改它们

           
       <form @submit.prevent="Submit()" method="post" id="form">

            <div class="form-group">
                <label class="mb-2"> {{ __('comment.title') }} </label>
                <input v-model="title"
                       required
                       class="form-control input-block-level" type="text"
                       name="title">
            </div>

            <!-- /row -->
            <div class="form-group">
                <label class="mb-2"> {{ __('comment.content') }} </label>

                @if(config('comment.options.Editor') == 1)

                    <ckeditor v-model="content"></ckeditor>

                @elseif(config('comment.options.Editor') == 2)

                    <br>
                    <w-tinymce-vue
                        style="width: 100%"
                        :settings="TinyMCE_settings"
                        v-model="content"
                    ></w-tinymce-vue>

                @else

                    <textarea id="content" v-model="content"
                              required
                              class="form-control"
                              rows="10"></textarea>

                @endif

            </div>

            <button class="btn btn-info btn-circle text-uppercase pull-left"
                    type="submit"><span
                    class="glyphicon glyphicon-edit"></span>

                @{{ ButtonText() }}

            </button>

            <span class="pull-left">&nbsp &nbsp</span>

            <button id="BackButton"
                    v-if="type === 'edit' || type === 'answer'"
                    @click="SwitchToCreate()"
                    href="#comments-list" role="tab"
                    data-toggle="tab"
                    class="btn btn-danger btn-circle text-uppercase pull-left"><span
                    class="glyphicon glyphicon-remove-sign"></span> {{ __('comment.Back') }}
            </button>

        </form>
                        
      ##########################################################################################################################################
                        
                        
       new Vue({
        el: "#app",
        data() {
            return {
                TinyMCE_settings: {
                    menubar: '',
                    plugins: '',
                    directionality: "rtl",
                    toolbar: 'fontsizeselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
                    fontsize_formats: '8pt 10pt 11pt 12pt 14pt 18pt 24pt 36pt',
                },

                comment_id: null,
                type: 'create',

                loading: null,
                EnabledShowLoading: false,

                comments: [],

                results: [],
            }
        },

        methods: {
          
            HideLoading() {
                if (this.EnabledShowLoading) {
                    this.loading.hide()
                }
            },

            ButtonText() {
                if (this.type === 'create') {
                    return '{{ __('comment.Submit Comment') }}'
                } else if (this.type === 'edit') {
                    return '{{ __('comment.Edit') }}'
                }

                return '{{ __('comment.Answer Comment') }}'
            },

            DisplayUserName(user) {
                if (user) {
                    return user.{{ config('comment.options.Commenter Display Name Field') }}
                }
                return '{{ __('comment.Anonymous') }}'
            },
            
            , ...
        }
    })
       

界面屏幕

卡片

Alt text

表单

Alt text

联系我们