个人博客: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();

    }

最后看前台编译:


因为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 文件上传。一个是文章正文,一个是文章封面。如图:


个人博客:PHP+JS(无数据库)_第1张图片

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

代码:

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

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

你可能感兴趣的:(个人博客:PHP+JS(无数据库))