主题开发的其他说明

在html中应使用软连接

如果你需要在html中引入本地静态文件,你应该这样做:

{% load static %}
<link href="{% static '/custom_theme/css/m_theme.css' %}" />
<script src="{% static '/custom_theme/js/m_theme.js' %}"></script>

如果你需要使用文章url或者其他url,你应该这样做:

<a href="{% url 'app:detail_article' article.id %}>
<a href="{{ article.url }}>

<a href="{% url 'app:tag' 23 %}>
<a href="{{ tag.url }}>

<form action="{% url 'app:create_comment' %}" method="post"></form>

如何在html中读取新建的配置?

在admin中新建的配置默认在html代码中是无法获取,你需要修改两个地方

  1. 新建 custom_theme/consts.py 文件,并添加 custom_theme_config_context

    custom_theme_config_context = {
        'my_config' : '我的自定义配置'
    }
    
  2. custom_theme/app.py 中添加 deeru_config_context

    class CustomThemeConfig(AppConfig):

    … deeru_config_context = ‘custom_theme.consts.custom_theme_config_context’

关于评论的form

文章详情页面传了一个 CommentForm ,但并不建议直接用它来生成form。另外,该form评论中content生成的 <textarea> 并不是富文本编辑器。

下面给了一个form的示例

{% csrf_token %}

<div class="fieldWrapper">
    {{ comment_form.nickname }}
    {% if comment_form.nickname.help_text %}
        <p class="help">{{ comment_form.nickname.help_text|safe }}</p>
    {% endif %}
</div>

<div class="fieldWrapper">
    {{ comment_form.email }}
    {% if comment_form.email.help_text %}
        <p class="help">{{ comment_form.email.help_text|safe }}</p>
    {% endif %}
</div>

<div class="fieldWrapper">
    {{ comment_form.content }}
    {% if comment_form.content.help_text %}
        <p class="help">{{ comment_form.content.help_text|safe }}</p>
    {% endif %}
</div>

<input type="hidden" name="article_id" id="id_article_id" value="{{ article.id }}">
<input type="hidden" name="root_id" id="id_root_id" value="-1">
<input type="hidden" name="to_id" id="id_to_id" value="-1">
<input type="hidden" name="type" id="id_type" value="201">
<input type="hidden" name="anchor" value="#comment">
<div class="field" style="margin-top: 10px;display: flex">
    {{ comment_form.captcha }}
</div>

<!-- v2.0新增了评论验证码,还需要添加下面js代码 -->
<script>
    $('.captcha').click(function () {
        $.getJSON("/captcha/refresh/", function (result) {
            $('.captcha').attr('src', result['image_url']);
            $('#id_captcha_0').val(result['key'])
        });
    });
</script>

如何对主题进行大改

如果需要对主题进行大改,有两种方法:

  1. 实现所有模块,并在 settings 中修改 BASE_THEME2_TEMPLATES 指向你的html文件

  2. 只实现几个关键的模块。

    一般你只需要实现 head_static_template, body_navbar_template, body_footer_template, article_list_template, detail_article_template, detail_flatpage_template, 404_template