Html页面设计的思考

总体布局必须是一致的！这个一致的意思是框架要是一样的。

brand

Blog的List页面

1. navbar（基本上隐身了）

2. sidebar（起了导航的作用）

3. main content（主体内容）

Html文件结构

1. index.html

2. base.html

   通过index插入Base之中，Base是基本框架结构！

在sidebar页面做了微小的更新！

把tutorials的model等等都忘了，所以基本上算是不分逻辑的在做Maintain 工作！

rewrite tutorials business logic

tutorials app的目的是提供一个自己可以控制的教程工具。

在页面的设计上左侧目录，中间内容，右侧（待加前端工具）大纲

以上实现起来都是比较简单的。

有技术含量的两个点：

1. 版本控制

2. AJAX

版本控制之间是想要看sphnix的version control 的实现逻辑。时间的关系，还是自己做了一个比较简单的实践方式

model(table)

1. 标题

在创建 Tutorial 时，自动创建一个与之关联的 TutorialVersion（版本1），你可以重写 Tutorial 模型的 save 方法，在保存 Tutorial 对象时，自动创建一个 TutorialVersion。

时间怎么又是UTC，需要改到china

TutorialVersion在model里面添加method，新增version时，复制上一个版本的所有内容，可能存在bug，只进行过简单的逻辑测试。

version版本增加时的逻辑可能可以增加一点，但是因为操作次数少，暂时不做严格控制。

chapter的order也给它保留编辑能力算了！

http://127.0.0.1:8000/tutorials/chapter/3/ 这个是有内容的，应该是AJAX的设计

业务逻辑

1. 页面结构

   页面分为三部分：

   • Sidebar (左侧导航栏): 展示教程的目录、版本信息，以及订阅功能。

   • Main Content (主内容区域): 用于动态加载并展示教程的章节内容。

   • 动态加载章节内容: 点击某个章节标题时，通过 Ajax 请求加载该章节的内容，并在主内容区域中更新显示。

2. 主要业务逻辑分解

   1. 教程数据结构

   • 数据来自后端，使用了 Django 模板语法 {{ ... }} 渲染。

   • 示例变量和功能：

     • {{ tutorial.title }}: 教程标题。

     • {{ tutorial.description }}: 教程描述。

     • {{ tutorial.versions.all }}: 获取所有版本信息。

     • {{ tutorial.chapters.all }}: 获取所有章节信息。

2. Sidebar (教程目录)

• 章节列表通过循环渲染：

  html复制代码{% for chapter in tutorial.chapters.all %}
  <li class="nav-item">
      <a class="nav-link" href="#" data-chapter-id="{{ chapter.id }}" id="chapter-{{ chapter.id }}">
          {{ chapter.title }}
      </a>
  </li>
  {% endfor %}

  每个章节都有一个 data-chapter-id 属性，用于标识章节的唯一 ID。

• 点击章节标题时：

  • 使用 JavaScript 的事件监听器拦截默认行为。

  • 通过 fetch 发起 Ajax 请求，向后端获取章节内容。

3. 动态加载章节内容

前端通过 Ajax 加载章节内容，并更新到主内容区域：

javascript复制代码document.querySelectorAll('.nav-link').forEach(function (link) {
    link.addEventListener('click', function (e) {
        e.preventDefault(); // 防止默认跳转行为
​
        const chapterId = e.target.dataset.chapterId;
​
        // 向后端发送请求
        fetch(`/chapter/${chapterId}/`)
            .then(response => response.json())
            .then(data => {
                const chapterContent = document.getElementById('chapter-content');
                chapterContent.innerHTML = `<h2>${data.title}</h2><div class="summernote-content">${data.content}</div>`;
            })
            .catch(error => console.error('Error loading chapter content:', error));
    });
});

• 逻辑细节

  :

  • 使用章节的 ID (data-chapter-id) 构造后端 API 请求的 URL，例如 /chapter/1/。

  • 后端 API 返回 JSON 格式的数据，例如：

    json复制代码{
        "title": "第一章：简介",
        "content": "<p>这是第一章的内容。</p>"
    }

  • 将数据动态插入到 #chapter-content 元素中。

4. 章节内容的编辑器支持

章节内容区域支持使用 Summernote 编辑器 进行富文本编辑：

javascript复制代码$('#id_content').summernote({
    height: 300,
    tabsize: 2
});

虽然编辑器初始化代码存在，但在当前模板中并没有直接展示编辑器，而是主要用于加载章节内容。

5. 后端接口设计

从代码推测，后端可能有如下逻辑：

• 一个章节列表页面或教程详情页面（用于初始渲染）。

• 一个章节内容 API（用于动态加载章节内容），如 /chapter/<id>/。

添加内容 title

tutorial

description

content

order

tutorial version