ExASIC
分享让工作更轻松

用php+markdown搭建个人博客

选用markdown的原因

markdown是时下流行的轻量级的文本标记语言。即,用几种非常简单的符号来标记格式,比如,#表示大标题,##表示小标题,>表示引用,[]()表示插入链接,![]()表示插入图片等。让作者可以忽略排版,而专注于文章内容的创作。

另外,markdown很容易插入源代码、flow chart、公式等技术人员常用的功能。并且可以轻松转换成html、pdf、doc、ppt等格式。

因此,markdown也成为技术人员写文档的首选工具。

为什么要搭建文章分享博客

就个人来讲,可以

就公司来讲,可以

常用的建站后台语言和框架

这些语言和框架都支持markdown,都可以作为个人博客来使用。主要看自己偏好哪种语言,或者哪个界面更酷。

本博客采用的方案

本博客没有采用上面这些复杂的框架,而是采用原生php和开源的markdown parser自己搭建。更轻量,更灵活。

目录结构

目录结构

index.php是本博客系统的主程序,md是存放markdown源文件的目录,image目录用来存放markdown中的配图。

php代码工作流程

flow chart

首先,php输出必要的html文件头。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

然后,读取markdown文件,并提取文章标题,作为html的title输出。

index.php接收外部传递的参数,最简单的方法就是传入markdown的文件名。而由于后缀名相同,都是.md,所以省略后缀名,在php代码里再拼接回来。

# url: index.php?md=web-01

$filename = "md/index.md";
if(isset($_GET['md']) && $_GET['md'] != ""){
    $filename = "md/" . $_GET['md'] . ".md";
}

如果没有提供参数,就认为是index.md,即文章的目录。

然后,根据markdown文件名,读取markdown文件到php内部字符串。后续的所有操作都是针对这个字符串。

$fh = fopen($filename, "r");
$contents = fread($fh, filesize($filename));
fclose($file);

接下来,从markdown字符串中提取文章的大标题。在markdown语法中,大标题是以单个#开头的行,所以我们用正则来提取。

#extract title from markdown
if(preg_match('/\x{23}\x{20}(.*)/u', $contents, $matches)){
    $title = ": " . $matches[1];
}else{
    $title = "";
}

echo "    <meta name=\"keywords\" content=\"文章, ExASIC\" />\n";
echo "    <meta name=\"description\" content=\"分享文章: $title\" />\n";
echo "    <title>ExASIC" . $title . "</title>\n";

调用markdown的parser, parsedown,把markdown转成html,方法如下:

include "../parsedown/Parsedown.php";

$Parsedown = new Parsedown();
echo $Parsedown->text($contents);

给markdown转换的html增加格式,比如h1设置大号字体、居中,h2设置加框的小标题。这一部分属于css的范畴,不详细描述,下面给出一段简单的示例:

.md {
    font-family: "Microsoft Yahei";
    word-break: break-all;
    word-wrap: break-word;
}
.md h1 {
    text-align: center;
    font-size: 2em;
    padding: 0.5em 0em 1em 0em;
}
.md h2 {
    text-align: center;
    font-size: 1.6em;
    border: 1px dashed black;
    padding: 0.5em;
    margin-top: 3em;
    margin-bottom: 1em;
}
.md blockquote {
    border-left: 0.2em solid #008000;
    margin-left: 0.5em;
    padding: 0.5em;
}
.md img {
    max-width:100%;
    height: auto;
}

还有一个重要的部分是为markdown内部的源码加上高亮显示。我采用的是开源的highlight.js,是javascript脚本,可直接用于网页前端。如下:

<link rel="stylesheet" href="../highlight/styles/tomorrow-night.css">
<script src="../highlight/highlight.pack.js"></script>
<script> 
  hljs.initHighlightingOnLoad();
</script>

highlight.js支持160多种编程语言,当然对ICer的常用编程语言也支持,如verilog、sv、VHDL、Perl、Python、Tcl、Tk等。只需要在官网下载时,勾上自己喜欢的语言就好了。

手机的自适应方案

本博客里采用的bootstrap4,bootstrap是一个css和javascript库,定义了常用的排版格式。这些格式可以根据屏幕尺寸和分辨率的大小自动调节。基本使用方法如下:

首先,包含bootstrap库文件。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>

再在需要的地方加上bootstrap的css class,比如块文本两侧留白、居中显示。

<div class="container"></div>

图片大小自适应:

<img class="img_fluid">

总结

本文介绍了一种php+markdown的博客搭建方法,不管对于个人建站,还是对于公司研发部门或项目团队建立知识分享平台,都很有意义。

本博客源代码已开源,感兴趣的可以到https://github.com/chenfengrugao/personal_team_blogs下载。

阅读数:
更多文章:文章目录
解惑专区
(支持markdown插入源代码)
欢迎使用ExASIC订阅服务
仅用于ExASIC最新文章通知,方便及时阅读。
友情链接: 白山头NingHeChuanShuang'Blog
成都奥卡思微电科技有限公司,主要产品有AVE自动化验证工具软件和MegaEC等价验证工具软件。硅知识,上海市集成电路高技能人才培养基地NanDigits中国,主要产品GOF。2020年元旦,我们,十多位IC行业的公众号号主,共同建立了一个 “ IC技术圈 ” 。我们将在这里或分享经验,或传授技巧,或聊求职就业,或谈人生规划。陕西纳宇测量设备有限公司AD