NOTE: Праця в прогресі

Я шукав просту систему коментарів для мого блогу, яка використовує Маркдау. я не міг знайти ту, яка мені сподобалась ' так що вирішив написати свою власну МSK4 Це проста система коментарів, яка використовуватиме Маркдау для форматування M SK5 Друга частина цього додасть електронні повідомлення до системи, яка відправить мені електронну пошту з посиланням на коментар , даючи мені змогу MSC7 підтвердити MST8 це перед тим, як воно буде показано на сайті M ST9

Знову ж таки, для системи виробництва це зазвичай використовуватиме базу даних,, але для цього прикладу я ' я просто буду використовувати позначкуM SK2

Система коментарів

Комментарна система неймовірно проста. Я просто зберігаю відмітковий файл для кожного коментарів з користувачамM SK1 ім 'я, електронні листи та коментарMSC3 Комментари потім відображаються на сторінці в тому порядку, в якому вони були отримані .

Для введення коментарів я використовую SimpleMDE, редактор Markdown, що базується на 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' і інisiaлізується лише тоді, коли це виявленоM SK2MSC3 Тут я загортаю бланк у МSK4IsAuthenticatedMNK5 (, який я передаю в ViewModelMRK7 Це означає, що я можу впевнитись, що тільки ті, хто прийшов на (на даний момент з Google) можуть додати коментаріMسک10

@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 тут для публікації коментарів. Там, де я використовую hxM SK2 атрибут vals і JS виклик, щоб отримати значення для коментарів . Потім це відображається в контроллері блогу з 'KommentarомMSC5 поведінкоюMスク6 Потім його переміняють на новий коментар

    [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 });
    }