DjangoCMS-TW logo

贊助方

部落格

從無到有建立CMS-Blog

從無到有建立CMS-Blog

新建 CMS 專案（以 MAC 為例）

1. Install Django CMS

首先使用 terminal 先建立一個虛擬環境：

conda create -n DjangoCMS python=3.7

(其中 「DjangoCMS」可以自己改名，Python 環境是使用 python 3.7)

進入該虛擬環境：

conda activate DjangoCMS
2. 下載 djangocms-installer，並創建新的資料夾，並進入
pip install djangocms-installer
mkdir tutorial-project
cd tutorial-project
3. 創建一個名稱為 mysite 的新專案
djangocms mysite
4. runserver
python manage.py runserver

接著在你的瀏覽器輸入 http://localhost:8000/，此時應為登入畫面，輸入帳號：admin、密碼：admin 之後，進入頁面就代表安裝成功啦！

 

 

 

 

 

 

 

Template 樣式設定

 

網路上有些地方提供已經做好的 template (模板)，可以到 w3layout 下載喜歡的。下載完，將載下來的資料夾打開，其中 index.html 為主要 html 存放的地方，而其他檔案如：css、fonts、images，存的是網頁排版、字體、影像檔。

首先，先將 html 檔(這裡是 index.html )放入創建好的 CMS 專案中，放入的位置是: /你的專案名稱/templates (這裡是：/mysite/templates) 並把 index.html 重新命名為 base.html。接著，將其他檔案(css、fonts、images)放入創建好的 CMS 專案中，放入的位置是: /你的專案名稱/static (這裡是/mysite/ static)

接下來我們需要編輯

首先在檔案的一開頭我們需要 load 相關的 tags 進來

{% load cms_tags menu_tags seikizai_tags staticfiles %}

接著分別在 head 的結尾與 body 的一開始與 body 結尾的上端分別加入以下程式碼

<html>
<head>
{% render_block “css” %}
</head>
<body>
{% cms_toolbar %}
{% render_block “js” %}
</body>
</html>

但是現在回到頁面重整後卻還是和之前相同，因為我們需要更改檔案抓取的路徑，將原本的 href = '...'、src = '...';，改成如下{% static "css/bootstrap.css" %}，是 Django 提供的 tag ，目的就是要匯入剛剛我們複製去的 files。「css/bootstrap.css」則是路徑，圖檔也是使用相同的方式。(ex: src="{% static 'image/ab.png' %}")

這個時候我們回到 browser 重新整理後，就可以看到漂漂亮亮的頁面！

Blog 的應用

1. Basic installation
 pip install aldryn-newsblog
2. Django settings
(1).把以下加入 settings.py 的 INSTALLED_APPS，有可能某些已經有，則不需要重複加入
# you will probably need to add:
 'aldryn_apphooks_config',
 'aldryn_boilerplates',
 'aldryn_categories',
 'aldryn_common',
 'aldryn_newsblog',
 'aldryn_people',
 'aldryn_reversion',
 'djangocms_text_ckeditor',
 'parler',
 'sortedm2m',
 'taggit',

# and you will probably find the following already listed:
  'easy_thumbnails',
  'filer',
  'reversion',
  (2).THUMBNAIL_PROCESSORS
 THUMBNAIL_PROCESSORS = (

     'easy_thumbnails.processors.colorspace',
     'easy_thumbnails.processors.autocrop',
     # 'easy_thumbnails.processors.scale_and_crop',  # disable this one
     'filer.thumbnail_processors.scale_and_crop_with_subject_location',
     'easy_thumbnails.processors.filters',

)
  (3).ALDRYN_BOILERPLATE_NAME
  ALDRYN_BOILERPLATE_NAME='bootstrap3'
  (4).STATICFIKLES_FINDERS

STATICFILES_FINDERS 並未在 settings.py 裡，複製貼上即可

 STATICFILES_FINDERS = [
     'django.contrib.staticfiles.finders.FileSystemFinder',
     'aldryn_boilerplates.staticfile_finders.AppDirectoriesFinder',
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
 ]
3. Migrate the database
  python manage.py migrate
4. Apphook
 

    (1).找個適當的樣板，將想要顯示文章的區域加入 {% block content %}{% endblock content %}，這個 block 會在 Apphook 後顯示出文章清單     (2).使用改好的樣板，開啟 server 創建一個使用此樣板的頁面，然後進入頁面高級設定，模板選擇剛剛使用樣板的 html ，再將「應用」選擇「News&Blog」。     (3).如果資料庫有文章的話，就會有文章清單出現在我們剛剛挖好{% block content %}的地方 另外，此 Blog Plugin 支援讓一個網站擁有不只一個 Blog ，創建一個新的頁面再 Apphook 一次，因此可以去「應用程序設定」選擇或新增新的設定值來當作不同的 Blog，可以在不同的 Blog 下新增不同的文章。

更改 Blog 樣式

 

  Apphook 整個 Blog 功能進來後，會發現預設的樣式太單調，因此我們需要來更改一下套件的樣板來美化一下，以下介紹如何快速更改樣式。

   1. 因為可以有不只一個 Blog，因此也支援不同 Blog 頁也可以有不同的樣式。先去「應用程序設定」新增了一個想要的名字(假設命名為 blog)，然後在「PREFIX FOR TEMPLATE DIRS」的值(預設是空白)，改成前面的命名(例如 blog)

   2. 因為樣板指向變了的關係，Django 找不到樣板來 render，因此網站會壞掉，所以要在指定路徑上先創好 Plugin 樣板組。在 templates 資料夾下創一個 aldryn_newsblog 資料夾，然後再創一個剛剛在「PREFIX FOR TEMPLATE DIRS」設定值一樣名子的資料夾(例如 blog)，並將套件內預設的所有樣板複製過去。 (套件預設的樣板可在[虛擬環境位置]/lib/python3.7/site-packages/aldryn_newsblog/templates/aldryn_newsblog/預設的 html)

   3. 這樣只要編輯這個資料夾內的 html 檔，網頁上樣式就會改變(備註: Blog 設定的”PREFIX FOR TEMPLATE DIRS” 是 “blog” 的才會變)。接下來就先改 Blog 清單頁的樣式，編輯 article_list.html 更改成自己想要的即可。

如此一來，就能打照自己喜歡的樣式囉！

 

點擊立即下載此篇文章 PDF

稍後下載閱讀，或與好友分享


討論區

尚未有留言，搶頭香吧!

討論區