ANMERKUNG DER PROGRESSARBEITEN

I'-ve seit auf der Suche nach einem einfachen Kommentarsystem für meinen Blog, das Markdown verwendet .. . Ich konnte nicht finden ein, dass ich mochte , , so entschied ich mich zu schreiben meine eigene . . Dies ist eine einfache Kommentarsystem, das verwendet Markdown für die Formatierung ?. . Der zweite Teil dieses wird E-Mail-Benachrichtigungen an das System, das mir einen Link zu dem Kommentar senden wird . , , die mir erlaubt, ' approve .SK8 , bevor es auf der Website angezeigt wird ....

Wieder für ein Produktionssystem würde dies normalerweise eine Datenbank verwenden, aber für dieses Beispiel wird I'-m gerade markdown benutzen.

Das Kommentarsystem

Das Kommentarsystem ist unglaublich einfach Ich habe nur eine Markdown-Datei, die für jeden Kommentar mit dem Benutzer gespeichert wird.

Um den Kommentar einzugeben, benutze ich SimpleMDE-,. Dies ist in meinem _Layout: .-cshtml wie folgt

<!-- 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>

Ich initialisiere dann den SimpleMDE Editor auf beiden Seiten laden und HTMX laden

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

Hier gebe ich an, dass mein Kommentartextbereich ' genannt wird und erst dann initialisiert werden kann, wenn es erkannt wurde.'"s hier wickeln ich das Formular in ein "MSC4"IsAuthenticated.'-( welches ich in das ViewModel übergehe.MSC7" Das bedeutet, dass nur diejenigen, die sich angemeldet haben, mit Google angemeldet sind, Kommentare hinzufügen können...."

@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
    {
       ...
    }

You.'.ll auch beachten Ich verwende HTMX hier für den Kommentar Posting. .. Wo ich das hx.MSC2.vals Attribut und einen JS-Aufruf benutze, um den Wert für den comment zu erhalten. MSC3. Dies wird dann an den Blog Controller mit dem Kommentar gepostet'.

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