开发主题

使用django的模板开发，下面给出了一些必要说明（

建议新建一个deeru项目，在里面开发:

  1. deeru-admin install deeru2
  • 创建django app:
  1. python manage.py startapp m_theme

执行之后会生成m_theme文件夹，里面的主要文件有:

  1. m_theme/
  2.     templates/
  3.         m_theme
  4.  
  5.     static/
  6.         m_theme

编写代码时，你的html文件应放在 templates/m_theme 下，静态文件应放在 static/m_theme 下。

  • 把 m_theme添加到 settings_local.py 中的 CUSTOM_APPS 下:
  1. CUSTOM_APPS = [
  2.     ...
  3.     'm_theme',
  4. ]
  • 编写html

你需要编写5个html模板，分别是（注意，模板名不能改变）：

  • home.html : 博客首页
  • detail_article.html : 文章页面
  • category.html : 分类下的文章列表页
  • tag.html : 标签下的文章列表页
  • detail_flatpage.html : 单页面
  • url与html的对应关系
  • / : home.html
  • /article/<int:article_id> : detail_article.html
  • /category/<int:category_id> : category.html
  • /tag/<int:tag_id> : tag.html
  • /你的单页面前缀/<path:flatpage_url> : detail_flatpage.html
  • view传递的context结构

查看 Context , url-view

  • 在模板中使用软连接

如果你需要在模板中引入静态文件，你应该这样做:

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

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

  1. <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>
  • 如何使用ui配置？

如果你看了使用者指南你应该清楚，DeerU内置了”顶部导航栏”、”顶部图标栏”两个配置，你可以在view传到的context[‘config’]中找到他们

如果你的主题还需要其他配置，你可以把配置放到”通用配置”中，你也可以新建一个自己的配置。

  • 如何新建配置？

内置的配置满足不了你的需要，想增加一个”侧边栏配置”？

首先你需要在 m_theme/consts.py 的 m_theme_config_context 中加入你的配置:

  1. m_theme_config_context = {    'm_theme_aside_config' : 'M_Theme侧边栏配置'}

然后在admin中添加名为”M_Theme侧边栏配置”的配置，这样context就会传递你的配置，位置在 context['config']['m_theme_aside_config']

  • 关于评论的form

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

下面给了一个form的示例:

  1. {% 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>