这几天补充了博客的一些功能,简单总结一下方法。
由于做的时候也是一边查资料一边摸索着写,所以也没留下具体的步骤记录。懒得再重新写一遍了,主要是虽然学着做的时候麻烦,但是回过头来看的话发现步骤其实很简单,所以下面都是对照着我查的资料和现在版本的代码写的。其实也对博客做了一些美化,主要是对css和html的编辑,这个就不记录了,没什么意义。
代码高亮
前面已经实现了markdown,因此可以在博客里面嵌入代码段,但代码段只有一种颜色,实在是不美观,我们当然希望能像代码编辑器一样看到不同颜色的代码,也就是代码高亮功能。这一节我们选择用pygments实现代码高亮,主要参考了Django 学习小组 代码语法高亮 。另外古城车票使用了 SyntaxHighlighter代码高亮 ,我试了下效果也不错。
首先是安装pygments包。命令行或者PyCharm安装都可以。
(myvenv) $ pip install pygments
安装完以后要把它加入到setting.py中:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'markdown2',
'pygments',
'blog',
]
pygments的工作原理是把代码切分成一个个单词,然后为这些单词添加 css 样式,不同的词应用不同的样式,这样就实现了代码颜色的区分,即高亮了语法,因此我们要引入一些css样式文件。搜到一个css文件的下载地址:https://github.com/richleland/pygments-css
把css样式文件以静态文件方式引入模板base.html,比如我引入的是emacs风格:
<head>
...
<link rel="stylesheet" href="{% static 'css/emacs.css' %}">
...
</head>
然后再写代码段试试。注意第一个【```】后面要写上代码语言(C++、Python、html等),不然识别不了。
回到页首
回到页首功能需要借助JavaScript,新建一个JavaScript文件,在html内类似于引入css一样引入js,或者直接在html头部写JavaScript代码都可以。参考教程:JavaScript回到顶部的效果实现
js代码原理就是获取当前位置(滚动条位置)到页首的距离,然后先上移一段距离,再获取距离,再移一段 ... 每次移动距离越来越小,最后逼近页首。代码就是上面链接里面的代码,不重复了,注释也很容易理解。
教程里面使用的例子是一个“TOP”链接,我想把这个链接改成一个固定悬浮在页面角落的“按钮”,按钮上是一个向上的箭头。不管现在我在页面的哪个位置,我都可以点击角落的悬浮按钮回到页首。
在base.html头部定义css格式fixed_div:
<head>
...
<style type="text/css">
.fixed_div{
position:fixed;
right:100px;
bottom:100px;
}
</style>
...
</head>
简单解释一下:position:fixed;
就是按钮位置固定,不随页面滚动而改变。具体位置就是距右侧100px,距底部100px的地方。
然后在想放置按钮的地方写:
<div class="fixed_div">
<a id="gotop" href="#" onclick="goTop();return false;">
<button type="button" class="btn btn-default btn-lg" style="font-size: 20px">
<span class="glyphicon glyphicon-arrow-up"></span>
</button>
</a>
</div>
效果,看本博客现在的样子就知道了。
2016.11.7