您现在的位置是：首页 > 技术学习 > 个人建站 网站首页 技术学习 个人建站

如何自己写后台搭建支持mkdown的个人博客

建站  
简介 有时候大家可能会有写博客的需求，一般我们会选择一些国内知名的博客网站，来作为自己写博客的地方。但是如果我们想拥有一个属于自己的博客网站，那就需要我们自己手动去搭建了。

有时候大家可能会有写博客的需求，一般我们会选择一些国内知名的博客网站，来作为自己写博客的地方。因为自己是一个程序员，所以平常会写一些技术类型的博客来记录自己的学习以及平常遇见的一些问题和解决办法，我选择的是CSDN。但是如果我们想拥有一个属于自己的博客网站，那就需要我们自己手动去搭建了。

那如何去搭建一个自己的博客网站呢？可以选择CMS建站工具来实现，也可以通过自己写后台来实现。本博客是通过第二种方式来搭建的(适合有代码基础的人)，接下来介绍下如何自己写后台来搭建自己的博客网站:

 

1. 要有一个网站模板

如果自己懂设计，可以为自己设计一个网站模板。如果不懂设计的话可以去网上找一找免费的模板，我的这个博客就是在网上找的一个模板。这里要感谢一位大神杨青青，在征求青姐同意后，我选择了她的一个网站模板《More》来搭建自己的博客

 

2. 让自己的文章页面支持mkdown

需要借助第三方插件JS：showdown.js

github地址: https://github.com/showdownjs/showdown

官网地址：http://showdownjs.com

 

使用方法:
  1. 在页面head标签内引入showdown.js
<script type="text/javascript" src="./js/showdown.min.js"></script>
  1. 写好输入区域和展示区域
<textarea id="write" onkeyup="parser();" style="width:300px;height:300px;"></textarea>
<div id="show" style="width:300px;height:300px;"></div>
  1. 展示函数
<script type="text/javascript">
    function parser() {
        var converter = new showdown.Converter();
        var code = $('#write').val();
        var html = converter.makeHtml(code);
        $('#show').html(html);
    }
</script>

在输入框输入mkdown格式的内容即可展示出来
 

  1. 功能补充
    4-1. 为了使用方便，可以修改showdown.js的一些默认配置
<script type="text/javascript">
var converter = new showdown.Converter({
    'simpleLineBreaks': true, // 使用enter换行，不用再输入<br/>进行换行了
    'openLinksInNewWindow': true, // 给a标题添加 target="_blank"
    'parseImgDimensions': true    // 图片支持指定尺寸：=宽x高 支持px、%、em、*(自适应)
    // ![图片alt](url =100%x* "图片title")
});
</script>

4-2. 实现按tab键进行缩进

当按下 tab 键的时候，在当前光标前面插入四个空格，然后再把当前光标往后移四个位置

<script type="text/javascript">
var textArea = document.getElementsByTagName('textarea')[0];
textArea.addEventListener('keydown', function(e) {
    if(e.keyCode === 9){    // 监听tab键的按下事件
    var position = this.selectionStart + 4; // 插入四个空格后的光标位置                                
    this.value = this.value.substr(0, this.selectionStart) + '    ' + this.value.substr(this.selectionStart); 
    // 在当前光标位置插入四个空格
    this.selectionStart = position; // 将光标移到指定的位置(即插入四个空格后的位置)
    this.selectionEnd = position;
    this.focus();
    e.preventDefault();    // 阻止默认的 tab 按下事件
    }
}, false);
</script>

 

3. 实现代码高亮

插件：highlight

github地址：https://github.com/highlightjs/highlight.js

官网地址：https://highlightjs.org

 

使用方法
  1. 引入highlight.pack.js和自己选择的样式css，并初始化。
<link rel="stylesheet" href="./css/agate.css">
<script src="./js/highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
  1. 将mkdown内容展示区域的 pre code 标签进行高亮展示
<script type="text/javascript">
    $('#show pre code').each(function(i, block) {
        hljs.highlightBlock(block);
        // 高亮只需要高亮 pre 下的 code 标签即可，这样只有代码块会加背景，其他正常展示。
    });
</script>

 

全部代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/showdown.js"></script>
    <link rel="stylesheet" href="css/agate.css">
    <script src="js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
    <textarea id="write" onkeyup="parser();" style="height: 300px;width: 300px;"></textarea>
    <div id="show" style="width:300px;height:300px;border: 1px solid #ccc;"></div>
    <script type="text/javascript">
        var textArea = document.getElementsByTagName('textarea')[0];
        textArea.addEventListener('keydown', function(e) {
            if(e.keyCode === 9){
                var position = this.selectionStart + 4;                  
                this.value = this.value.substr(0, this.selectionStart) + '    ' + this.value.substr(this.selectionStart); 
                this.selectionStart = position;
                this.selectionEnd = position;
                this.focus();
                e.preventDefault();
            }
        }, false);
        function parser() {
            // mkdown展示
            var converter = new showdown.Converter({
                'simpleLineBreaks': true,
                'openLinksInNewWindow': true,
                'parseImgDimensions': true
            });
            var code = $('#write').val();
            var html = converter.makeHtml(code);
            $('#show').html(html);
            // 代码高亮
            $('#show pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        }
    </script>
</body>
</html>

 

4. 后台

后台这块没法细说，每个人的构思也不一样，可能用的语言也不一样。我只能大致说下我的个人想法(因为我不是大神😂，里面肯定有很多不合理的地方，有什么好的建议或意见可以给我提一下😊)。

  1. 选择一门后台语言，我用的是php。
  2. 根据自己选的网站模板去定制相应的数据库表，具体字段根据实际情况而定。
    除了用户、文章、评论等基本表之外，其他表我是根据模板里面 “内容是可变的区域” 进行的建表。例如：导航、博客分类、标签、轮播图、推荐板块、图片管理等。每个表管理着相应的区域，这些区域的内容可以被管理员通过后台修改
  3. 建好表之后，在后台里面实现对这些表进行增删改查。
  4. 文章管理。
          我是参考的SCDN得新建博客界面，就是左边是编辑框，右边是展示框。但是像那些快捷的工具栏，我就没写了，感觉实现起来太麻烦了，网上也有别人写好的库，有兴趣的可以了解下。如果熟练使用mkdown的话，不需要那些工具栏也能写内容。(主要是我水平太低又懒，哈哈)
          至于文章的存储的话，我用的是文本型存储，就是把提交的文章内容写成一个文件存储在后台，展示内容的时候从文本里读取相应的内容并展示。
    我的文章编辑页面：
    文章编辑
  5. 评论留言功能
    1. 可以使用第三方插件，比如畅言: 畅言官网，文档中心
    2. 可以自己实现，但是目前没想到好的实现办法，后续再添加吧。
  6. 根据自己的网站模板将后台数据展示出来。

 

5. 部署
  1. 购买云服务器、域名
  2. 实名认证、备案
  3. 搭建环境
  4. 部署代码
  5. 解析域名
  6. 调试

上一篇：没有更多文章

下一篇：如何使用Homestead搭建laravel本地开发环境

相关文章

    暂无相关文章

特别推荐

  • 如何自己写后台搭建支持mkdown的个人博客阅读

  • 如何使用Homestead搭建laravel本地开发环境阅读

  • centos7.4安装laravel开发环境阅读

点击排行

标签云

Top