django搭建個人部落格03，編寫首頁

阿新 • • 發佈：2019-02-14

插入一些資料以便編寫html-templates

from www.models import *
from django.utils import timezone
tag=tb_tags(name="隨筆01abc#[email protected]_adsf",articlecount=3,id=1)
tag.save()
art=tb_articles(title="部落格01abc#[email protected]_adf",content_md="部落格01abc#[email protected]_adf",
content_html="部落格01abc# 
[email protected]_adf",abstract="部落格01abc#[email protected]_adf",
tags=tag,created=timezone.now(),updated=timezone.now())
art.save()
tag.tb_articles_set.all()
comment=tb_comments(articleID=art,content="部落格01abc#[email protected]_adf評論1",
IP="123.53.65.101",lefted=timezone.now())

接著可以使用後臺管理介面來新增，裡面顯示的是object之類的標題，是因為沒有像官網(

django start your first app)一樣重寫對應類的 __str__ (self) function

html模板設計

www_base.html
index_base.html
articleList_base.html
projList_base.html
articleDetail_base.html
comment_plugin.html
footer_plugin.html
nav_plugin.html
filter_plugin.html
gallery_plugin.html

編寫模板檔案

<!--www_base.html--> 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    {% load static %}{% block selfstyle %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}{% block footer %}{% endblock %}
</body>
{% block DOMScripts %}{% endblock %}
</html>
<!--end www_base.html-->

<!--footer_plugin.html-->
{% load static %}
<footer>
    {% include "www/nav_plugin.html" %}
    <div id="copyright">
    <p>©2015 GeekCUG Design Contact information: 
    <a href="[email protected]"><i>[email protected]</i></a></p>
    </div>
    <div id="uyi"><img src="{% static 'www/css/yui.png' %}" onclick="showLaunch()"></div>
</footer>
<!--end footer_plugin.html-->

<!--nav_plugin.html-->
    <div id="fullbg" onclick="closeLaunch()"></div>
        <div id="launch">
        <p><a>首頁</a></p>
        <p><a>部落格列表</a></p>
        <p><a>作品一覽</a></p>
        <p><a>GitHub</a></p>
    </div>
<!--end nav_plugin.html-->

<!--index_base.html-->

{% extends "www/www_base.html" %}{% load static %}{% block selfstyle %}
<title>GeekCUG</title>
<link rel="stylesheet" href="{% static 'www/css/index_base.css' %}">
<link rel="stylesheet" href="{% static 'www/css/footer_plugin.css' %}">
<link rel="stylesheet" href="{% static 'www/css/nav_plugin.css' %}">
{% endblock %}{% block content %}
<main>
    <div id="center"><h1 id="welcome">Welcome</h1>
    </div>      
</main>
{% endblock %}{% block footer %}{% include "www/footer_plugin.html" %}{% endblock %}{% block DOMScripts %}
<script src="{% static 'www/js/footer_plugin.js' %}"></script>
<script src="{% static 'www/js/nav_plugin.js' %}"></script>
{% endblock %}
<!--end index_base.html-->

編寫index_base.html所需要的css/js檔案

index_base.css

body
{
    background:rgb(183,214,230) url(index_base_bg.jpg) no-repeat;
    background-attachment:fixed;
    background-size:100%;
}
#center
{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
#center>h1
{
    font-size:100px;
    text-shadow:
        1px 1px blanchedalmond,
        2px 2px blanchedalmond;
    color:azure;
    opacity:0.8;
}

footer_plugin.css

footer
{
    position:fixed;
    width:100%;
    bottom:2%;
}

#copyright>p
{
    float:left;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    color:darkseagreen;
    margin: 0px;
    padding:0px;
}
#copyright>p>a
{
    color:cornflowerblue;
}
#uyi
{
    float:right;
    position:absolute;
    right:2%;
    bottom:2%;
}
#uyi>img
{
  cursor:pointer;
  width:200px;
  height:auto;
  max-width:100%;
  max-height:100%;
  transition:width 2s;
}
#uyi>img:hover
{
    width:210px;
}

nav_plugin.css

#fullbg
{
    display: none;
    background-color:darkgray;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    opacity:0.5;
    position:fixed;
    z-index:3;
}

#launch
{
    display:none;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    position:fixed;
    z-index:5;
}
#launch>p
{
    margin-bottom: 4px;
    width:220px;
}
#launch>p>a
{
    color:#333;
    cursor:pointer;
    font-size:20px;
    display:block;
    width:190px;
    padding:12px;
    background-color:ghostwhite;
    opacity:0.9;
    text-align: center;
    text-decoration: none;
}
#launch>p>a:hover
{
    color:white;
    padding:11px;
    border: white 1px solid;
    background-color:darkorange;
    opacity:1;
}

footer_plugin.js

function showLaunch()
{
    var bh=window.innerHeight;
    var bw=window.innerWidth;
    $("#fullbg").css({height:bh,width:bw,display:"block"});
    $("#launch").slideDown(800);
}

nav_plugin.js

function closeLaunch()
{
    $("#launch").slideUp(800);
    $("#fullbg").hide();
}

新增url解析

vim mysite/urls.py

url(r'^blogs/',include('www.urls')),

vim www/urls.py

from django.conf.urls import url
from . import views
app_name='www'
urlpatterns=[
url(r'^$',view.indexView,name='indexView'),
]

vim www/views.py

from django.shortcuts import render
from .models import *
def indexView(request):
    return render(request,'www/index_base.html',{})

python3 manage.py migrate
python3 manage.py runserver 0:8000

先看看效果

點選UYI之前

點選UYI之後

django搭建個人部落格03，編寫首頁

插入一些資料以便編寫html-templates from www.models import * from django.utils import timezone tag=tb_tags(name="隨筆01abc#[email protec

django搭建個人部落格11，專案釋出展示

編寫專案展示頁 1.這是專案的資料模型 class tb_projs(models.Model): projID=models.AutoField(primary_key=True,verbose_name="作品ID") title

django搭建個人部落格10，文章詳細3-評論

完善article_detail_base.html 增加評論展示以及上下篇導航欄 1.修改ArticleDetailView原生SQL執行語句，增加’上一篇’和’下一篇’導航項 def

django搭建個人部落格07，編輯文章

實現編輯文章使用ModelForm繫結tb_articles 1.vim www/forms.py from django.utils.translation import uget

Django搭建個人部落格：使用者的刪除

這一章將實現刪除使用者資料的功能。許可權與檢視刪除使用者資料本身的邏輯並不複雜，但是會涉及到新的問題。使用者資料是很多網站最重要的財產，確保使用者資料的安全是非常重要的。前面學習的使用者登入、退出、建立都是相對安全的操作；而刪除資料就很危險，弄不好會造成不可逆的損失。因此我們希望對操作者做一些

Django搭建個人部落格：使用者的註冊

既然有登入登出，那麼使用者的註冊肯定也是少不了的。登錄檔單類使用者註冊時會用到表單來提交賬號、密碼等資料，所以需要寫註冊用的表單/userprofile/forms.py： /userprofile/forms.py ... # 註冊使用者表單 class UserRegisterForm(fo

Django搭建個人部落格：重置使用者密碼

隨著技術的發展，驗證使用者身份的手段越來越多，指紋、面容、聲紋應有盡有，但密碼依然是最重要的手段。網際網路處處都有密碼的身影，甚至變成了現代人的一種負擔。像筆者這樣的，動輒幾十個賬號密碼，忘記其中幾個簡直太正常了。本章講如何幫助健忘症患者，重置使用者密碼。安裝第三方庫前面我們已經知道如何修改文

Django搭建個人部落格

最近學著用Django搭建了個個人部落格，目前域名正在備案中，現在把我這最近半個月的摸爬滾打經歷記錄下。 Django入門第一階段：我首先看了Python核心程式設計中的Django章節，剛開始看的有些雲裡霧裡。於是我去菜鳥教程那裡按著Django

Django搭建個人部落格：完成修改文章功能

目前為止我們已經完成了文章的新建、刪除以及檢視，還剩最後一項，即對已經完成的文章進行修改。實際上修改文章與新建文章有點類似，不同的地方有兩點：修改是在原有文章的基礎上，因此需要傳遞 id 指明具體需要修改的文章載入頁面時需要將舊的內容作為預設值填寫到表單

Django開發個人部落格網站——10、分頁功能的實現

現在我們的部落格可能只有幾篇文章，因此可以全部在首頁展示出來，隨著部落格數量的增加，當達到幾十上百篇時，全部展現在首頁是不顯示也是不友好的，這個時候我們就需要對部落格進行分頁了。django有它自帶的分頁功能：Paginator 1、安裝在虛擬環境

使用Hexo搭建個人部落格，極速高效簡潔,新手小白可操作

目錄只需要兩步第一步程式碼部分：第二部分放置程式碼 https://www.cnblogs.com/blogjun/articles/8289977.html 詳細操作可參考上文這裡說一下大概的原理吧（純屬個人觀點，如有疑問請評論回去，接懟）只需要兩步

使用 django-blog-zinnia 搭建個人部落格

目前網上搭建個人部落格的方案很多，雖然使用諸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齊全的高效能個人部落格，但是本文將嘗試一種更為小眾化的方案 —— 一款基於 django-blog-zinni

如何使用hugo搭建個人部落格（二）：修改主題：顏色，字型，佈局

上一篇博文中談到了如何在本地使用hugo預覽特定主題crisp，本文介紹主題的顏色，字型，佈局的修改。修改主題側邊欄顏色 crisp主題的側邊欄預設是白色，如果想改個顏色咋辦？到github倉庫 https://github.com/penn201

使用 jekyll + github pages 搭建個人部落格

1. 新建 github.io 專案其實 github pages 有兩個用途，大家可以在官方網頁看到。其中一個是作為個人/組織的主頁（每個賬號只能有一個），另一個是作為 github 專案的專案主頁（每個專案可以有一個）。而 github pages 本身就支援 jekyll

記錄自己用python搭建個人部落格系統的完整過程（一）

零、前言本博文記錄搭建個人部落格系統的完整過程，網上有許多相關的教程，但是沒找到一個（適合自己能力的）快速搭建的完整教程。藉此篇博文梳理一下前不久學習到的有關整個過程前前後後的各種知識點。一、搭建環境採用架構：python3.6 + django1.10 + ngi

使用Hexo+Github搭建個人部落格

個人部落格：技術部落格：http://messi1002.top/ 閱讀部落格：http://www.read1002.t

centos6.8使用WordPress搭建個人部落格

一、搭建LNMP 1.安裝Nginx 安裝Nginx [[email protected] ~]# yum -y install nginx Loaded plugins: fastestmirror Setting up Install Process Determ

Hexo + github pages + 阿里雲繫結域名搭建個人部落格

申請域名萬網購買的域名，地址：https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制檯進行解析控制檯->域名與網站(萬網)->域名->域名列表->解析設定主機記錄www

docker實戰之使用mysql映象與wordpress映象搭建個人部落格

這次我打算寫一個實戰教程，以前寫的教程大多數是根據自己掌握的知識去寫的，並非實戰，這次試一下吧首先docker這個東西我強烈推薦學習，因為真的很好用下面先開始吧，廢話不多說，基礎的連線伺服器這些我就不囉嗦了，自個去百度吧，貌似我部落格也有首先，使用yum安裝docker，命令如下

github + hexo 搭建個人部落格教程

Github Pages介紹本來用於介紹託管在Github上上的專案，由於它的空間免費穩定，因此適合用來搭建部落格。每個帳號只能有一個倉庫來存放個人主頁，且倉庫的名字必須是使用者名稱/ username.github.io。你可以通過http://username.github.io

django搭建個人部落格03，編寫首頁

插入一些資料以便編寫html-templates

html模板設計

編寫模板檔案

編寫index_base.html所需要的css/js檔案

新增url解析

先看看效果

相關推薦