django1.10开发博客（13）——代码高亮与回到页首
这几天补充了博客的一些功能，简单总结一下方法。
由于做的时候也是一边查资料一边摸索着写，所以也没留下具体的步骤记录。懒得再重新写一遍了，主要是虽然学着做的时候麻烦，但是回过头来看的话发现步骤其实很简单，所以下面都是对照着我查的资料和现在版本的代码写的。其实也对博客做了一些美化，主要是对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
