hexo solar主题 + github搭建个人博客(三)----博客管理、代码高亮、相册设置

个人博客：小景哥哥

1. 博客管理插件

hexo-admin 是一个图形化博客管理插件，搭建和使用都特别简单。

• 安装hexo-admin:

npm install --save hexo-admin

• 使用hexo-admin:

hexo server -d

hexo启动之后，在浏览器输入http://localhost:4000/admin/即可，之前使用命令行创建page，现在可以直观的点击创建即可，也可以预览和编辑。

对于要发布的文章，可以使用在posts上面创建，然后做响应的编辑操作，傻瓜式操作。

2. 代码高亮

• 安装hexo-filter-highlight

npm install hexo-filter-highlight --save

• 修改配置blog中的config.yml文件，增加如下内容：
  
  
• 把highlight的js和css文件放入页面中

<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.6.0/styles/github.min.css">
<script src="//cdn.bootcss.com/highlight.js/9.6.0/highlight.min.js"></script>

• 然后在加载文档后添加突出显示脚本，例如在$(document).ready下:
  简单模式：

$(document).ready(function(){
    hljs.initHighlightingOnLoad();
});

通常，在加载文档后插入以下脚本：

var trim_indent = true;
  var line_number = true;
  // enable highlight
  $('pre code').each(function(i, block) {
    var texts = $(this).text().split('\n');
     // trim indent
     if (trim_indent){
      var tab = texts[0].match(/^\s{0,}/);
      if (tab) {
        var arr = [];
        texts.forEach(function(temp) {
          arr.push(temp.replace(tab, ''));
        });
        $(this).text(arr.join('\n'));
      }
    }
    // add line number
    if (line_number) {
      console.log("show line number in front-end");
      var lines = texts.length - 1;
      var $numbering = $('<ul/>').addClass('pre-numbering');
      $(this).addClass('has-numbering').parent().append($numbering);
      for (i = 1; i <= lines; i++) {
        $numbering.append($('<li/>').text(i));
      }
    }
    // hightlight
    hljs.highlightBlock(block);

3. 相册设置

• 首先把要用的照片放入主题下的images文件夹下：
  
• 在source->_posts下找到创建的网页文件：
  
  修改album.md文件：
  
  重启发布即可观察到相册效果：