Share: A new comment system ---- Waline access mkdocs

[iambinlin]

Now, we can use a new comment system ---- waline in Mkdocs.

Some basic configurations can be found in the original documentation, I'll just list here how to access.

1. Open meta config in mkdocs.yml

markdown_extensions:
  - meta

2. Set overrides folder for your project as follow

.
📦docs-project
    ┣ 📂docs
    ┣ 📂overrides
    ┃  ┗ 📜main.html
    ┣ 📜.gitignore
    ┣ 📜mkdocs.yml
    ┗ 📜package.json

3. Set core code in main.html

{% extends "base.html" %}

{% block content %}
{{ super() }}
{% if page and page.meta and page.meta.template %}
<div id="waline-container" style="margin-top: 80px;padding-top: 12px;"></div>
{% endif %}
{% endblock %}

{% block styles %}
{{ super() }}
<link
        rel="stylesheet"
        href="https://unpkg.com/@waline/client@v2/dist/waline.css"
/>
<style>
    .md-grid {
        max-width: 1200px;
    }
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
{% if page and page.meta and page.meta.template %}
<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
<script>
    Waline.init(
        {
            el: '#waline-container',
            serverURL: "http://xxxxxx",
        }
    )
</script>
{% endif %}
{% endblock %}

4. Set meta config for your every .md file

---
template: main.html
---

Now! we can use~~~