个人博客：PHP+JS(无数据库)

之前接触到jekyll静态博客，它用的是ruby编译，可我ruby一点基础也没有，我也不太清楚，他是怎么实现的。请假在家的几天在想，本质上不就是读取md格式的文章，然后 mark.js 转换格式，代码框用 highlight.js 实现高亮 不就好了？

首先花了大概百分之90的时间写了前端页面，并且实现了响应式

页面展示：大家可以直接访问我的博客 Home

下面开始说md转网页的过程：

我这里用的是tp3.2，先来读取md文件获取文章的标题、简介、创建时间：

class IndexController extends Controller {
    private $dir = '_Post/';//文章目录名
    private $title=array();//文章标题
    private $info=array();//文章简介
    //文件创建时间
   //文件最后一次修改时间

    public  function _initialize(){
        header("content-type:text/html;charset=utf-8");
//        获取文件夹中的所有文件名，遍历存入数组
        //打开目录
        $this->dir=iconv("gb2312","utf-8",$this->dir);
        //因为windows默认是gb2312编码，这里改成utf，不改的话读出的文件名就都会变成乱码
        $handler = opendir($this->dir);
        /*其中$filename = readdir($handler)
        每次循环时将读取的文件名赋值给$filename，$filename !== false。
        一定要用!==，因为如果某个文件名如果叫'0′，或某些被系统认为是代表false，用!=就会停止循环
        */
        $i=0;
        while( ($filename = readdir($handler)) !== false )
        {
            //略过linux目录的名字为'.'和‘..'的文件
            if($filename != "." && $filename != "..")
            {

                    //输出文件名
                    $this->info[$i]['title']= substr($filename,'0',strlen($filename)-3);
//                    $this->info[$i]['ctime']=date("Y-m-d H:i:s",filectime($this->dir.$filename));
                    $this->info[$i]['mtime']=date("Y-m-d H:i:s",filemtime($this->dir.$filename));
                    $this->info[$i]['cover']='Public/_Post/'.substr($filename,'0',strlen($filename)-3).'.jpg';

                    $content=file_get_contents($this->dir.$filename);
                    if(preg_match_all('/<简介>([^<]*)<\/简介>/i', $content, $matches)) {
                        $this->info[$i]['intro']=$matches[1][0];
                    }//获取文章简介

                    $i++;//数组索引

            }
        }
        closedir($handler);//关闭资源

    }
    public function index(){
        header("content-type:text/html;charset=utf-8");
//        print_r($this->info);
        $this->assign('info',$this->info);
        $this->display();
    }

}

然后是读出md文件，将格式转化为json格式，传到前台：

public function article(){

            $this->filename=S('title');
            $markdown = file_get_contents($this->dir.$this->filename.'.md');
            $markdown = json_encode($markdown,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
           //第二个参数是为了防止中文在转成json格式时变成乱码
            $this->assign("title",$this->filename);
            $this->assign("html",$markdown);
            $this->display();

    }

最后看前台编译:

<script>
    hljs.initHighlightingOnLoad();//代码高亮初始化
    $(document).ready(function(){
        $("#content").html(marked({$html}));//转成的html直接插入到div中
    })
</script>

因为mark.js的作用只不过是把md格式转换为html代码，所以一些样式可以根据自己的喜好来改：
比如md中的引用> 会被解析成 blockquote标签：我这里直接模仿了简书的样式：

 blockquote{
        padding: 20px;
        margin-bottom: 25px;
        background-color: #f7f7f7;
        border-left: 6px solid #b4b4b4;
        word-break: break-word!important;
        word-break: break-all;
        line-height: 30px;
    }

如图：

超链接一样可以自定义，比如我这里：

a{
 text-decoration: none;
 color: #5bc0de;
 }

清除了下划线，更改了颜色

其他的这里就不说了，按个人喜好更改。
现在做的还比较简陋，暂时发布文章只能是，写一个 标题.md 和一个 标题.jpg 文件上传。一个是文章正文，一个是文章封面。如图：

这里我的简介是怎么得到的呢？我这里投机取巧 直接用正则读文章中在<简介>
</简介>标签中的文字为简介

代码：

if(preg_match_all('/<简介>([^<]*)<\/简介>/i', $content, $matches)) {
                        $this->info[$i]['intro']=$matches[1][0];
                    }//获取文章简介

这样，差不多基本的功能都实现了。md排版美滋滋