背景

上一次把markdown整合之後，發現還是有很多問題。這次需要做一些優化。
1、markdown與普通文字的區別顯示。
2、增加點選量的統計
3、新增名片卡的滑動

版本相關
作業系統：Mac OS X EI Caption
Python版本：3.4
Django版本：1.9
IDE：PyCharm

markdown的優化

我試著轉載其他部落格的內容過來，發現非markdown格式的文字轉過來顯示的很醜很醜，幾乎沒辦法看，所以針對這個需要做一些優化。剛好之前資料庫的欄位定義的太少了，趁這個機會擴充一下。在models.py中加幾個欄位上去。

models.py

blog_ismarkdown = models.CharField(max_length=1
 
, null=True)
blog_like = models.IntegerField(null=True)
blog_clicknum = models.IntegerField(null=True)

三個欄位，一個用來控制文章格式的分類，是否屬於markdown。like欄位留存，後續做點讚的擴充。clicknum欄位用來處理統計點選量的資料。
擴充的時候需要新增null=True來處理這幾個欄位允許為空，否則無法變更成功。變更成功後再取消這些null。

python manage.py makemigrations grzx
python manage.py sqlmigrate grzx 0004
 

python manage.py migrate

第二句的0004要根據自己資料庫遷移的版本來定。

思路

新增ismarkdown欄位的意義在於，新增文章的時候，讓別人選擇文章型別是否屬於markdown，如果是，則傳遞一個1到後臺，後臺處理到資料庫中，如果不是，則傳遞一個0到後臺，後臺處理到資料庫。別人點選檢視文章內容時，後臺傳遞文章主體內容到模版，一起傳遞一個markdown標記。模版做一個簡單的判斷，以markdown格式還是普通文字格式來顯示。

檢視函式的處理

根據上面的思路，需要修改的地方有兩個，一個是新增文章的時候儲存這個ismarkdown這個標記。另一個是檢視文章內容的時候返回這個標記，讓模版使用相應的方式來處理。

views.py  sub_article

def sub_article(request):
    cursor = connection.cursor()
    if request.method == 'POST':
        mytype = request.POST['article_type']
        title = request.POST['article_title']
        # body = markdown(request.POST['article_editor'])
        body = request.POST['article_editor']
        markdown = request.POST['article_markdown']
        updb = BlogBody(blog_title=title, blog_ismarkdown=markdown, blog_body=body, blog_type=mytype, blog_timestamp=time.strftime("%Y-%m-%d %X", time.localtime()), blog_author='點點寒彬', blog_clicknum=1, blog_like=0)
        updb.save()
        cursor.execute('select max(id) from grzx_blogbody where blog_type = %s ', [mytype])
        new_id = cursor.fetchone()
        return redirect('/grzx/article/' + str(new_id[0]) + '/')

由於返回給模版的時候，是整條記錄返回回去的，那麼就不用專門來處理，只要在模版層處理就行了。

模版處理

根據上面的思路，模版處理需要處理兩個地方。首先，我們在新增文章的時候需要增加一個文字型別是否為markdown的選擇欄位。程式碼如下：

add_article.html

<form method="post" action="/grzx/sub_article/">
    {% csrf_token %}
    <p>文章標題</p>
    <div>
        <select name="article_type" style="height: 20px; width: 120px;">
            <option value="Python" selected="selected">Python</option>
            <option value="abouttest">測試相關</option>
            <option value="mytalk">個人雜談</option>
            <option value="diary">偶爾能想起來的日記</option>
        </select>
        <input name="article_title" type="text" style="height: 20px;width: 400px;" placeholder="請輸入文章標題">
{#        <input name="article_markdown" type="checkbox" value="1">MarkDown#}
        <select name="article_markdown" style="height: 20px; width: 90px;">
            <option value="1" selected="selected">MarkDown</option>
            <option value="0">普通文字</option>
        </select>
    </div>
    <p>文章內容</p>
    <textarea name="article_editor" rows="55" style="width: 630px;"></textarea>
    <input type="submit" value="提交" style="margin-left: 300px;width: 60px;height: 20px;">
</form>

增加了這個選擇欄位後，每次填寫的時候就會傳遞標記給檢視函式去處理了。再一個需要處理的是view.html。需要做一個簡單的判斷。程式碼如下：

view.html

        <p style="word-wrap: break-word;word-break:break-all;">
            {% if blog_content.blog_ismarkdown == '1' %}
                {{ blog_content.blog_body | custom_markdown }}
            {% elif blog_content.blog_ismarkdown == '0' %}
                {{ blog_content.blog_body }}
            {% endif %}
        </p>

這樣就完成了。跑起來試試看吧。

點選量的統計

思路

這部分就比較簡單了，上文已經把資料庫加好了，現在只要做一個簡單的處理，就是點選的時候在資料庫吧這個欄位的數字加一就好了。當然，我們做了這個處理，模版就要把點選量顯示出來。

檢視函式

這部分很簡單，就直接上程式碼了：

views.py

def article(request, blog_body_id=''):
    """
    處理點選事件,並且點選數加一
    """
    blog_content = BlogBody.objects.get(id=blog_body_id)
    num = blog_content.blog_clicknum
    num += 1
    blog_content.blog_clicknum = num
    blog_content.save()
    return render(request, 'view.html', {'blog_content': blog_content})

模版函式

同樣很簡單，就是展示一個顯示資料，程式碼如下：

view.html

<p class="box">釋出時間：{{ blog_content.blog_timestamp }}<span>作者：{{ blog_content.blog_author }}</span><span>閱讀:{{ blog_content.blog_clicknum }}</span><a href="/">編輯</a> <a href="{% url 'del_article' blog_content.id %}">刪除</a></p>

新增名片的滑動跟隨

這部分使用的是一個CSS的屬性，就是把這個盒子層次擺放到第一位。程式碼如下：

       <div class="card" style="width: 280px;position: fixed;z-index: 1;">
            <h1>About Me</h1>
            <p>網名：Sven Weng | 點點寒彬</p>
            <p>職業：測試工程師</p>
            <p>公司：華林證券</p>
            <p>Email：[email protected]</p>
          <ul class="linkmore">
            <li><a href="/grzx/add_article" class="talk" title="給我留言"></a></li>
            <li><a href="/" class="address" title="聯絡地址"></a></li>
            <li><a href="/" class="email" title="給我寫信"></a></li>
            <li><a href="/" class="photos" title="生活照片"></a></li>
    {#        <li><a href="/" class="heart" title="關注我"></a></li>#}
          </ul>
        </div>

就是在style中增加一個z-index:1;這個css屬性。

後記

再怎麼說，一個部落格也已經搭建完畢了，剩下的功能都需要一點一點的去細化和慢慢的經營。最後的一步，把它部署上去。