Django+HTML之编码问题报错解决方案（UnicodeDecodeError: 'utf-8' codec can't decode byte 0xce in position 1587: invalid continuation byte）

一、问题描述

　　HTML文件里面写了中文然后出现编码报错：UnicodeDecodeError: 'utf-8' codec can't decode byte 0xce in position 1587: invalid continuation byte。

二、问题原因

　　html文件没有设置编码为UTF-8，未设置之前代码如下：

{% extends base_template %}
{% load i18n xadmin_tags %}


{% block bodyclass %}dashboard{% endblock %}
{% block breadcrumbs %}{% endblock %}

{% block nav_title %}
  {% if icon %}<i class="{{icon}}"></i>{%endif%} {{ title }}
{% endblock %}

{% block nav_toggles %}
{% include "xadmin/includes/toggle_menu.html" %}
{% if has_add_widget_permission %}
  <a title="{% trans "Add Widget" %}" href="{{ add_widget_url }}" class="navbar-toggle pull-right">
    <i class="fa fa-plus"></i></a>
{% endif %}
{% endblock %}

{% block nav_btns %}
{% if has_add_widget_permission %}
  <a title="{% trans "Add Widget" %}" href="{{ add_widget_url }}" class="btn btn-primary">
    <i class="fa fa-plus"></i> <span>{% trans "Add Widget" %}</span></a>
{% endif %}
{% endblock %}

{% block content %}
<head>
<meta charset="utf-8">
</head>
<style>
  .home .home_data ul li
  {
    float: left;
    width: 298px;
    height: 92px;
    text-align: center;
    line-height: 92px;
    background-color: white;
    margin-right: 15px;
    margin-top: 2px;

  }
  ul,li {
    list-style: none;
  }
  .home .home_title {
    width: 100%;
    height: 42px;
    border-bottom:1px solid #e7e7e7;
    text-align: left;
    line-height: 42px;
    padding:0 15px;
    border-radius:2px 2px 0px 0px;
  }
  .home {
    width: 100%;
    height: 160px;
    background-color: #F8F8F8;
  }
  .home .home_data {
    margin-left: -25px;
  }
  .home .home_data ul li a:link {
    text-decoration: none;
  }
</style>
<div class="home">
  <div class="home_title" >'我'</div>
  <div class="home_data" >
    <ul>
      <li>
        <a href="#">
          <p>
            <cite>Coming soon</cite>
          </p>
        </a>
      </li>
      <li><a href="#">Coming soon</a></li>
      <li><a href="#">Coming soon</a></li>
      <li><a href="#">Coming soon</a></li>
      <li><a href="#">Coming soon</a></li>
    </ul>
  </div>
</div>
<div class="dashboard row">
  {% for c in columns %}
  <div class="{{ c.0 }} column">
    {% for widget in c.1 %}
      {{ widget.widget|safe }}
    {% endfor %}
  </div>
  {% endfor %}
</div>
<input type='hidden' id='_portal_key' value='{{ portal_key }}' />
{% endblock %}

三、解决方案

　　将整个代码放在html中，并设置编码为utf-8即可解决该问题，设置后的代码：

<!DOCTYPE html>
{% extends base_template %}
{% load i18n xadmin_tags %}
  <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>

  <body>
    {% block bodyclass %}dashboard{% endblock %}
    {% block breadcrumbs %}{% endblock %}

    {% block nav_title %}
    {% if icon %}<i class="{{icon}}"></i>{%endif%} {{ title }}
    {% endblock %}

    {% block nav_toggles %}
    {% include "xadmin/includes/toggle_menu.html" %}
    {% if has_add_widget_permission %}
    <a title="{% trans "Add Widget" %}" href="{{ add_widget_url }}" class="navbar-toggle pull-right">
    <i class="fa fa-plus"></i></a>
    {% endif %}
    {% endblock %}

    {% block nav_btns %}
    {% if has_add_widget_permission %}
    <a title="{% trans "Add Widget" %}" href="{{ add_widget_url }}" class="btn btn-primary">
    <i class="fa fa-plus"></i> <span>{% trans "Add Widget" %}</span></a>
    {% endif %}
    {% endblock %}

    {% block content %}
    <style>
      .home .home_data ul li
      {
        float: left;
        width: 298px;
        height: 92px;
        text-align: center;
        line-height: 92px;
        background-color: white;
        margin-right: 15px;
        margin-top: 2px;

      }
      ul,li {
        list-style: none;
      }
      .home .home_title {
        width: 100%;
        height: 42px;
        border-bottom:1px solid #e7e7e7;
        text-align: left;
        line-height: 42px;
        padding:0 15px;
        border-radius:2px 2px 0px 0px;
      }
      .home {
        width: 100%;
        height: 160px;
        background-color: #F8F8F8;
      }
      .home .home_data {
        margin-left: -25px;
      }
      .home .home_data ul li a:link {
        text-decoration: none;
      }
  </style>

    <div class="home">
      <div class="home_title" >数据统计</div>
      <div class="home_data" >
        <ul>
          <li>
            <a href="#">
              <p>
                <cite>用户数</cite>
              </p>
            </a>
          </li>
          <li><a href="#">任务数</a></li>
          <li><a href="#">BUG数</a></li>
          <li><a href="#">代码行数</a></li>
          <li><a href="#">接口数</a></li>
        </ul>
      </div>
    </div>
    <div class="dashboard row">
      {% for c in columns %}
      <div class="{{ c.0 }} column">
        {% for widget in c.1 %}
          {{ widget.widget|safe }}
        {% endfor %}
      </div>
      {% endfor %}
    </div>
    <input type='hidden' id='_portal_key' value='{{ portal_key }}' />
    {% endblock %}
  </body>
</html>

原文地址：https://www.cnblogs.com/lxmtx/p/15250278.html