README

为 Nody 脚手架安装一个现成的博客模块

特性

• CRUD 分类
• CRUD 文章
• CRUD 标签
• CRUD 评论
• 在创建文章视图中创建分类或标签
• 响应式缩略图
• SEO 优化
• 用户可以点赞或评论您的文章
• 用户可以通过链接或 Twitter / Facebook / LinkedIn 分享您的文章
• 管理员快捷键，返回仪表板编辑文章
• 英语 🇬🇧 & 法语 🇫🇷

安装

您可以通过 composer 安装此包

composer require nody/nody-blog

使用安装命令发布迁移和配置文件

php artisan nody-blog:install

发布 spatie media-library 文件并运行迁移

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-migrations"

php artisan migrate

您还可以覆盖翻译或通过发布 lang 文件夹创建新的翻译

php artisan vendor:publish --provider="Nody\NodyBlog\NodyBlogServiceProvider" --tag="nody-blog-translations"

在 filesystems.php 配置文件中设置文章缩略图的媒体磁盘

        'media' => [
            'driver' => 'local',
            'root' => storage_path('app/public/images'),
            'url' => env('APP_URL') . '/storage/images',
            'visibility' => 'public',
            'throw' => false,
        ],

在 storage 文件夹中创建 images 文件夹并创建符号链接

php artisan storage:link

在 User.php 中建立文章与用户模型之间的关系

    use Nody\NodyBlog\Models\Post;
    use Nody\NodyBlog\Livewire\PostComments;

    public function posts()
    {
        return $this->hasMany(Post::class);
    }

    public function likes()
    {
        return $this->belongsToMany(Post::class, 'post_like')->withTimestamps();
    }

    public function hasLiked(Post $post)
    {
        return $this->likes()->where('post_id', $post->id)->exists();
    }

    public function comments()
    {
        return $this->hasMany(PostComments::class);
    }

在 Filament AdminPanelProvider 中定义插件

    use Nody\NodyBlog\NodyBlogPlugin;

    ->plugin(new NodyBlogPlugin());

在导航中定义 "博客" 组

    $builder->group('Blog', [
        ...CategoryResource::getNavigationItems(),
        ...PostResource::getNavigationItems(),
        ...TagResource::getNavigationItems(),
        ...CommentResource::getNavigationItems(),
    ]);

将以下内容添加到您的 CSS 文件中

@layer components {
    #post-content {
        h2 {
            @apply text-2xl font-bold text-gray-800 dark:text-gray-200 mt-8 mb-4;
        }

        h3 {
            @apply text-xl font-bold text-gray-800 dark:text-gray-200 mt-8 mb-4;
        }

        blockquote {
            @apply border-l-4 border-gray-300 dark:border-gray-700 pl-4 my-4;
        }

        pre {
            @apply my-4 p-4 text-sm bg-gray-100 dark:bg-gray-800 rounded-lg;
        }

        ul {
            @apply list-disc list-inside;
        }

        ol {
            @apply list-decimal list-inside;
        }

        figure > a > img {
            @apply my-4 rounded-xl;
        }

        a {
            @apply text-indigo-500 dark:text-indigo-400 underline hover:no-underline;
        }
    }
}

可能需要重新启动 vite 以编译 CSS

npm run dev

通过这种方式调用自定义视图中的文章

{{-- Posts section --}}
<div class="bg-white dark:bg-gray-900">
    <div class="container mx-auto">
        <h2
            class="text-3xl text-center font-semibold text-gray-900 dark:text-white"
        >
            The Blog section
        </h2>
        <livewire:get-posts
            postsCount="3"
            showLoadMore="0"
            showSearch="0"
            showFilters="0"
        />
    </div>
</div>

⚠️ 不要错过 livewire 组件的参数

• postsCount="3" ➡️ 您想显示多少篇文章？
• showLoadMore="0" ➡️ 您想有一个按钮来加载更多文章吗？
• showSearch="0" ➡️ 您想有一个搜索栏来通过标题、内容或摘要搜索文章吗？
• showFilter="0" ➡️ 您想有一个过滤栏来通过分类或标签搜索文章吗？

变更日志

请参阅变更日志以获取有关最近更改的更多信息。

安全漏洞

请查看我们的安全策略以了解如何报告安全漏洞。

致谢

• Thomas-DL

许可

MIT 许可证 (MIT)。有关更多信息，请参阅许可文件。