Blog/templates/index.html

{% extends "_common/base.html" %}
{% block css %}
    {% load avatar_tags %}
    {% load day_util %}

{% endblock %}
{% block container %}
    <div class="ui grid stackable container">
        <div class="row" id="article">
            <div class="eleven wide column">
                <div class="ui feed">
                    <h2>动态</h2>
                    <div class="ui divider"></div>
                    {% for item in articles_new %}
                        {% if item.status == 1 %}
                            {% if item.type == 1 %}
                                <div class="event">
                                    <div class="label">
                                        <img src="/user_avatar/{{ item.user_id }}">
                                    </div>
                                    <div class="content">
                                        <div class="date"
                                             style="font-size: 1.1em">{{ item.created_time | days_until }}</div>
                                        <div class="summary"><a>
                                            {{ item.user__first_name }}{{ item.user__last_name }}</a>
                                            发布了{{ item.category__name }}:&nbsp;<a
                                                    href="/article/{{ item.id }}.html">{{ item.title }}</a></div>
                                        <div class="extra text">{{ item.intro }}
                                            &nbsp;&nbsp;&nbsp;Tags:
                                            {% for tag in item.tags %}
                                                <a href="/tag/{{ tag }}?page=1"><span
                                                        class="label label-success">{{ tag }}</span></a>
                                            {% endfor %}</div>
                                    </div>
                                </div>
                            {% elif item.type == 2 %}
                                <div class="event">
                                    <div class="label">
                                        <img src="/user_avatar/{{ item.user_id }}">
                                    </div>
                                    <div class="content">
                                        <div class="date"
                                             style="font-size: 1.1em">{{ item.created_time | days_until }}</div>
                                        <div class="summary"><a>
                                            {{ item.user__first_name }}{{ item.user__last_name }}</a>
                                            发布了{{ item.category__name }}:&nbsp;<a
                                                    href="/article/{{ item.id }}.html">{{ item.title }}</a></div>
                                        {% autoescape off %}
                                            <div class="extra images">
                                                {{ item.html_text }}
                                            </div>
                                        {% endautoescape %}

                                    </div>

                                </div>
                            {% endif %}
                        {% endif %}
                    {% endfor %}

                    {% if is_login %}
                        <h3>发布动态</h3>
                        <div class="ui divider"></div>
                        <form class="ui reply form">
                            {% csrf_token %}
                            <div class="field">
                                <!-- 编辑器 DOM -->
                                <input placeholder="文字" name="title" class="ui input">
                                <div style="border: 1px solid #ccc;margin-top: 5px">
                                    <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
                                    <div id="editor-text-area"></div>
                                </div>
                            </div>
                            <div onclick="submit()" style="float: right" class="ui primary submit labeled icon button">
                                <i class="icon send"></i> 发布
                            </div>
                        </form>
                    {% endif %}
                </div>
            </div>

            <div class="four wide right floated column">

                <h4 class="ui header">搜索</h4>
                <div id="search" class="ui category search">
                    <div class="ui icon input">
                        <input class="prompt" type="text" placeholder="搜索">
                        <i class="search icon"></i>
                    </div>
                </div>
                <h4 class="ui header">归档</h4>
                <div class="ui list">
                    {% for record in records %}
                        <a class="item" href="/date/{{ record.datetime }}?page=1">{{ record.datetime }}
                            ({{ record.count }})</a>
                    {% endfor %}

                </div>
                <h4 class="ui header">Top</h4>
                <div class="ui list">
                    {% for tag in tags %}
                        <a class="item" href="/tag/{{ tag.name }}?page=1">{{ tag.name }} ({{ tag.count }})</a>
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    {% if is_login %}
        <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
        <script>
            const E = window.wangEditor

            // 切换语言
            const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
            E.i18nChangeLanguage(LANG)
            const imageToHtmlConf = {
                type: 'image',
                elemToHtml: function imageToHtml(elemNode) {
                    const {src, alt, href = '', style = {}, width, height} = elemNode || {}

                    return `<a data-pswp-width="${alt.split(',')[1]}" data-pswp-height="${alt.split(',')[1]}" href="${src}"><img data-magnify="gallery" data-src="${src}"  src="${src}"  data-href="${href}" "/></a>`
                }
            };

            const editorConfig = {
                placeholder: 'Type here...',
                scroll: false, // 禁止编辑器滚动
                MENU_CONF: {
                    uploadImage: {
                        server: '/management/files/upload',
                        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                        fieldName: 'file',

                        // 单个文件的最大体积限制，默认为 2M
                        maxFileSize: 4 * 1024 * 1024, // 1M

                        // 最多可上传几个文件，默认为 100
                        maxNumberOfFiles: 10,

                        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                        allowedFileTypes: ['image/*'],

                        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                        meta: {
                            csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val()
                        },

                        // 将 meta 拼接到 url 参数中，默认 false
                        metaWithUrl: false,

                        // 自定义增加 http  header

                        // 跨域是否传递 cookie ，默认为 false
                        withCredentials: true,

                        // 超时时间，默认为 10 秒
                        timeout: 5 * 1000, // 5 秒
                    }
                },
                onChange(editor) {
                    const html = editor.getHtml()
                    $('#title').val($('#page_title').val())
                }
            }

            E.Boot.registerElemToHtml(imageToHtmlConf);

            // 先创建 editor
            const editor = E.createEditor({
                selector: '#editor-text-area',
                content: [],
                // html: '',
                config: editorConfig
            })

            // 创建 toolbar
            const toolbar = E.createToolbar({
                editor,
                mode: 'simple',
                selector: '#editor-toolbar',
                config: {
                    excludeKeys: ['blockquote', 'header1', 'header2', 'header3', '|', 'bold', 'underline', 'italic', 'through', 'color', 'bgColor', 'clearStyle', '|', 'bulletedList', 'numberedList', 'todo', 'justifyLeft', 'justifyRight', 'justifyCenter', '|', 'insertLink', 'insertVideo', 'insertTable', 'codeBlock', '|', 'undo', 'redo', '|', 'fullScreen']
                }
            })


        </script>
    {% endif %}
    <script>

        function submit() {
            let formData = new FormData()
            formData.append('title', $("input[name='title']").val())
            formData.append('intro', editor.getText())
            formData.append('category', 6)
            formData.append('html', editor.getHtml())
            formData.append('markdown', editor.getText())
            formData.append('type', 2)
            formData.append('tags', '')
            formData.append('status', 1)
            formData.append('is_top', 1)
            formData.append('csrfmiddlewaretoken', $("input[name='csrfmiddlewaretoken']").val())

            $.ajax('/management/article/add_article', {
                method: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    window.location.href = '/'
                },
                error: function (err) {
                }
            })
        }
    </script>
{% endblock %}
{% load static %}