Wagtail富文本前端显示异常求助：列表不显示、样式不符

• 引入Wagtail官方富文本样式
  Wagtail后台编辑器的样式有对应的前端CSS文件，直接引入就能让列表等基础样式和后台一致。在页面模板顶部先加载static标签，再引入样式：

  {% load static %}
  <link rel="stylesheet" href="{% static 'wagtailadmin/css/richtext.css' %}">
  

• 自定义样式统一字体颜色
  若引入官方样式后字体颜色仍和全局内容不符，给富文本内容加容器类并编写自定义CSS：
  模板代码：

  <div class="richtext-content">
      {{ block.value|richtext }}
  </div>
  

  CSS代码：

  .richtext-content {
      color: #333; /* 替换为你网站的默认字体颜色 */
  }
  .richtext-content ul, .richtext-content ol {
      margin-left: 1.5rem;
      padding-left: 0;
      list-style-position: outside;
  }
  

• 检查RichTextField功能配置
  确保字段配置中包含列表功能，避免后台无法插入列表：

  paragraph = RichTextField(features=['h1', 'h2', 'bold', 'italic', 'ul', 'ol', 'link'])
  

内容的提问来源于stack exchange，提问作者Mose M