# Super yksinkertainen kommenttijärjestelmä merkitsemällä

<!--category-- ASP.NET, Markdown -->
<datetime class="hidden">2024-08-06T18:50</datetime>

TOTEAA: Työ etenee

Olen etsinyt yksinkertaista kommenttijärjestelmää blogilleni, jossa käytetään Markdown-merkintää.. En voinut löytää sellaista, joka miellyttäisi minua, ,, joten päätin kirjoittaa oman.

Toistan, että tuotantojärjestelmässä tämä käyttäisi tavallisesti tietokantaa, mutta tässä tapauksessa IM SK1 käytän vain merkitsemistä.

## Kommentointijärjestelmä

Kommentointijärjestelmä on uskomattoman yksinkertainen. Minulla on vain merkitsevä tiedosto, joka tallennetaan kullekin kommentille käyttäjän kanssa 'nimeisnimi, sähköposti ja kommenttiM SK3 Kommentit esitetään sitten sivulle niiden vastaanottaman järjestyksen mukaisesti

Kommenttia varten käytän SimpleMDE, Javascriptin mukaista Markdown-editoria.
Tämä sisältyy _Layout.cshtml seuraavastiM SK1

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

```

Aloitan sitten SimpleMDE-editorin sekä sivun että HTMX-laadun parissa:

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

Tässä täsmennän, että kommenttitekstialueeni kutsutaan 'comment' ja että se on initialisoitava vain sen jälkeen, kun se on havaittavissaM SK2. Tässä kätken lomakkeen 'Authentifioidaan~' \(, jonka välitän ViewModeliinMSC7 Tämä tarkoittaa, että voin varmistaa, että ainoastaan ne, jotka ovat olleet tällä hetkellä Googlessa logged-in |(, voivat lisätä huomautuksia.

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

Huomaatte myös, että käytän täällä HTMX:tä huomautuksen lähettämiseen.

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

```