Django+HTML之編碼問題報錯解決方案（UnicodeDecodeError: 'utf-8' codec can't decode byte 0xce in position 1587: invalid continuation byte）
阿新 • • 發佈：2021-09-10
一、問題描述
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>