django项目开发实战——博客(二)

自从做了之前的django项目开发实战——博客之后，一直没有继续做下去。现在终于有时间把后面的笔记补起来了！(虽然还是一个很简陋滴= =)

git地址：https://github.com/ChuXiaoYi/BlogWebSite/tree/test

先放图：
django项目开发实战——博客(二)

django项目开发实战——博客(二)

列表页

页面是扒的这个地址，然后做了一些修改

列表页主要说明一下分页和flash插件

分页

判断是否有上一页下一页需要用paginator处理过的post_list

view.py

limit = 3
paginator = Paginator(post, limit)
page = request.GET.get('page', 1)
result = paginator.page(page)
context = {
    "post_list": result,
    "page": page,
}

list.html

<div class="pagination clearfix">
    <ul class="pager">
        {% if post_list.has_previous %}
            <li class="previous"><a href="?page={{ post_list.previous_page_number }}"><span
                    aria-hidden="true">&larr;</span> Newer</a></li>
        {% else %}
            <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span>
                Newer</a></li>
        {% endif %}
        {% if post_list.has_next %}
            <li class="next"><a href="?page={{ post_list.next_page_number }}">Older <span
                    aria-hidden="true">&rarr;</span></a></li>
        {% else %}
            <li class="next disabled"><a href="#">Older <span aria-hidden="true">&rarr;</span></a>
            </li>
        {% endif %}
    </ul>
</div>

flash插件

这是一个国际友人写的一个js脚本。放到页面中可以直接用。这里我把它处理成html代码直接放到页面中了。原地址戳这里

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
        width="100%" height="auto" id="honehoneclock" align="middle">
    <param name="allowScriptAccess" value="always">
    <param name="movie"
           value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <param name="wmode" value="transparent">
    <param name="play" value="true">
    <embed wmode="transparent"
           src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf"
           quality="high" bgcolor="#ffffff" width="100%" height="auto" name="honehoneclock"
           align="middle" allowscriptaccess="always" type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

django项目开发实战——博客(二)

如果想把背景改为透明的，修改http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf为http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf就可以啦～

详情页

这里主要有说明两个：markdown生成目录和markdown高亮

首先，安装第三方包

pip3 install mardkown

在view.py中导入第三方包，并修改代码为：

md = markdown.Markdown(extensions=[
            'markdown.extensions.extra',
            'markdown.extensions.codehilite',
            'markdown.extensions.toc',
        ])
post.body = md.convert(post.body)

comment_list = Comment.objects.filter(post__id=pk)

context = {
    'post': post,
    'toc': md.toc,
    'comment_list': comment_list
}

注意:这里使用的是Markdown实例化一个对象！

'markdown.extensions.toc',

'toc': md.toc,

如果想要自动生成目录，一定要写这两个！

但是，如果只是这样的话，并不能实现代码的高亮。接下来我们还需要做一些事情。

安装Pygments

pip3 install Pygments

运行pygmentize -S default -f html -a .codehilite > code.css命令,将code.css放到你的静态文件目录下，并在html的头部添加<link rel="stylesheet" href="{% static 'Post/css/code.css' %}">(你的路径可能和我的不一样，不要错啦！)

最后，千万不要忘记添加

'markdown.extensions.codehilite',

如果步骤正确，你会看到这样滴：
django项目开发实战——博客(二)

我很喜欢****可以隐藏过长的文章。我也实现了一个
django项目开发实战——博客(二)

<div class="hide-article-box text-center" id="hide-article-box">
   <a class="btn" id="btn-readmore" onclick="btnReadMore()">阅读更多</a>
</div>

window.onload = function () {
        var readMore = document.getElementById('btn-readmore');
        var hideArticleBox = document.getElementById('hide-article-box');
        var content = document.getElementById('entry-content');
        readMore.onclick = function () {
            content.style.height = 'auto';
            hideArticleBox.style.display = 'none';
        }
    }

django项目开发实战——博客(二)

列表页

分页

flash插件

详情页

相关推荐