一、準備：新增資料、新建template

從後臺新增資料，從上圖中可以看到需要新增的資料有課程、教師

新增教師

新增教師完成

新增課程
但是課程頁面少了機構，不知道課程是屬於哪個機構的，所以在model中新增機構欄位，在這裡機構是外來鍵

新增外來鍵，修改model，執行makemigrations courses和migrate courses

新增課程完成

點選顯示課程機構列

新增完成

新建template

總共4個頁面，機構首頁、機構課程、機構介紹、機構講師

四個頁面變化的部分是圖中的right部分，頭部和左側的基本不變

根據之前模板的繼承，重寫html頁面

可以按住F12在前端頁面分析，下圖中的section是頭部，以此類推確定每個標籤對應著哪個部分

頁面部分

html對應部分，新建org_base.html，在org-detail-homepage.html基礎上修改

org-detail-homepage.html

二、配置org-detail-homepage.html頁面的url

這裡是通過點選頁面中不同的授課機構進入機構詳情頁面的，不同的授課機構連結不同，用機構的id表示

涉及到正則知識

三、編寫view

返回的資料是課程、教師

四、配置模板

這三個div是頁面靜態的課程顯示，我們需要將views中傳過來的動態資料顯示在模板中
取資料可以通過外來鍵關聯來取，也可以到對應的資料庫中取

將具體的動態資料對應到模板中

配置org_list.html中進入機構詳情頁面入口的url

五、測試

點選機構列表頁任意一個機構進入機構詳情頁面
測試成功

但是圖中的1、2、3處圖片未顯示

1處是課程機構的logo，從courses model中的image取得，所以必須把courses model中的image欄位傳給模板，在views中傳給了org-detail-homepage.html，在org_base.html中依然可以使用（模板的向上傳遞作用）

配置org_base.html模板中圖片的顯示

最終測試結果