ملاحظة: العمل في تقدم

أنا ' كنت أبحث عن نظام تعليق بسيط في مدونتي الذي يستخدم ماركداون . لم أستطع | ' | أن أجد أحداً أحبه |, | لذا قررت أن أكتب كتابي الخاص ♪ . | هذا هو نظام تعليق بسيطة يستخدم ماركدون للشكل ♪. | الجزء الثاني من هذا سوف يضيف إشارات بريدية إلى النظام الذي سوف يرسل لي رسالة بريدية مع رابط للتعليق ♪

مرة أخرى لنظام الإنتاج هذا في العادة يستخدم قاعدة بيانات , لكن في هذا المثال أنا ' سأستخدم فقط العلامة

نظام التعليقات

نظام التعليقات بسيط بشكل لا يصدق. أنا فقط أملك ملفاً يتم حفظه من أجل كل تعليق مع المستخدم' اسمهM SK2 بريد إلكتروني وتعليقه . تُظهر بعدها الملاحظات على الصفحة بالترتيب الذي حصلت عليه

لإدخال تعليق أستخدم SimpleMDE, محرر المؤشر المبني على Javascript. هذا مضمن في _التصميم.cshtml كالتالي:

<!-- Include the SimpleMDE CSS, here I use a dark theme -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/xcatliu/simplemde-theme-dark/master/dist/simplemde-theme-dark.min.css">

<!--Later in the page include the JS for SimpleMDE -->
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

ثم أبدأ محرر SimpleMDE على شحن الصفحات و HTMX load:

    var simplemde;
    document.addEventListener('DOMContentLoaded', function () {
    
        if (document.getElementById("comment") != null)
        {
        
       simplemde = new SimpleMDE({ element: document.getElementById("comment") });
       }
        
    });
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        if (document.getElementById("comment") != null)
        {
        simplemde = new SimpleMDE({ element: document.getElementById("comment") });
        
        }
    });

هنا أقوم بتحديد أن منطقة نص تعليقي تسمى 'comment' وتبدأ فقط عندما يتم إكتشافها 's detectedM SK3 هنا أغلب النموذج في | | 'IsAuthenticated |' |

@if (Model.Authenticated)
    {
        
  
        <div class=" max-w-none border-b border-grey-lighter py-8 dark:prose-dark sm:py-12">
            <p class="font-body text-lg font-medium text-primary dark:text-white">Welcome @Model.Name please comment below.</p>
            <textarea id="comment"></textarea>
       <button class="btn btn-primary" hx-action="Comment" hx-controller="Blog" hx-post hx-vals="js:{comment: simplemde.value()}" hx-route-slug="@Model.Slug" hx-swap="outerHTML" hx-target="#comment" onclick="prepareForSubmission()">Comment</button>
        </div>
    }
    else
    {
       ...
    }

ستلاحظون أيضاً أنني أستخدم HTMX هنا لنشر تعليقي. حيث أستخدم الخاصية hx-vals و إتصال JS للحصول على القيمة للتعليقM SK3 ثم يتم نشر هذا إلى جهاز التحكم في المدونات مع MSC4التعليق ' الإجراءMNK6 ثم تم استبدال هذا مع تعليق جديدMسک7

    [HttpPost]
    [Route("comment")]
    [Authorize]
    public async Task<IActionResult> Comment(string slug, string comment)
    {
        var principal = HttpContext.User;
        principal.Claims.ToList().ForEach(c => logger.LogInformation($"{c.Type} : {c.Value}"));
        var nameIdentifier = principal.FindFirst("sub");
        var userInformation = GetUserInfo();
       await commentService.AddComment(slug, userInformation, comment, nameIdentifier.Value);
        return RedirectToAction(nameof(Show), new { slug });
    }