导航

  • 引言
  • 技术博客的价值
  • 颜值即正义
  • 选择markdown主题样式
  • 让代码高亮起来
  • 给代码块添加复制功能
  • 结语
  • 参考

引言

大约在2009年的冬天,隔壁宿舍师兄向我推荐[博客园](https://www.cnblogs.com/)。

当时,师兄正在参加博客大赛,于是我注册了一个账户,帮他投票。

大学毕业之后,正式开启了我的互联网职业生涯。在这十多年中,从技术小白到项目经理的一路打怪升级,坚持阅读和书写博客成了我的习惯。

技术博客的价值

当我们遇到技术问题或者要查询某个知识点的时候,我们第一时间想到的就是去网上搜索相关的资料。

对于技术同学来说,从互联网上获取知识远比从传统技术书籍上来的更直接。

IT技术比较专业的首推Github,国内相对比较活跃的有CSDN,博客园,开源中国等。

博客成了技术知识分享的阵地,解决了读的燃眉之急,同时作者获得了成就感。

在上各章节我们已经介绍了文章列表的实现,本章介绍文章内容页面的实现。

颜值即正义

我们写博客,本身就是在做内容创造,而内容的呈现,直接影响了受众的阅读体验。

随着人们审美的提高,越来越多的个性化博客出现,排版整洁,简约大气大气,多端适配的博客备受青睐。

比如,像bootstrap风格的文章排版,像github上代码着色风格,都让人耳目一新。

高颜值的外观吸引读者,高质量的内容留住读者。

选择markdown主题样式

Github的内容展示样式是大众比较认可的,我们可以选择这种风格。

有一款开源的github-markdown-css,正好符合我们要求。

官方给出了Demo,可以去看看效果。

在自己的网站中如何使用它呢?

官方文章给出了说明

  • 在页面上引入(导入)github-markdown.css文件
  • 增加markdown-bodyclass

完整示例如下:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css">
<style>
 .markdown-body {
  box-sizing: border-box;
  min-width200px;
  max-width980px;
  margin0 auto;
  padding45px;
 }

 @media (max-width767px) {
  .markdown-body {
   padding15px;
  }
 }
</style>
<article class="markdown-body">
 <h1>Unicorns</h1>
 <p>All the things</p>
</article>

我们先下载github-markdown-css项目到本地

可以选的仓库

这里,任意选择一个地址进行下载



打开我们的superblog项目,将github-markdown-css项目中的github-markdown.css文件拷贝出来,添加到src\main\resources\static\assets\css文件夹中。

superblog项目中,新建一个ArticleControler.java文件。

在ArticleControler中,增加detail方法,用于处理文章数据并返回到视图。

按照惯例,我们在resources/templates/下新建一个名为article的文件夹,在里面创建一个detail.html页面。

notes: 视图文件的路径和controller中detail方法返回的路由保持一致。

detai.html完整代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/layout">
<head>
<meta charset="UTF-8">
    <title>文章详情页面</title>
    <link href="/assets/css/github-markdown.css" rel="stylesheet" />
    <style>
 .markdown-body {
  box-sizing: border-box;
  min-width200px;
  max-width980px;
  margin0 auto;
  padding45px;
 }

 @media (max-width767px) {
  .markdown-body {
   padding15px;
  }
 }
</style>
</head>
<body>

<div layout:fragment="content" >
    <div class="page-content">
        <div class="page-content-area">
            <article class="markdown-body">
              <div th:utext="${article.content}"></div>
            </article>
        </div>
    </div>
</div>
</body>
</html>

值得注意的是,<article> class="markdown-body"></article>
之间的内容是html格式的。

我们的文章可以是富文本,也可以是markdown(这里推荐使用markdown),最终都要转换成html文档存储。

然后,markdown-body会对HTML格式的文章内容进行渲染。

github-markdown.css推荐使用github自带的markdown转HTML的api进行转换,具体参考:https://docs.github.com/cn/rest/markdown。

当然,转换的方式很多,可以根据实际情况而定。

后端实现,逻辑也很简单,可以直接查看源码,不再赘述。

然后,我们启动superblog项目,看看效果吧!



看起来,像那么回事了。

让代码高亮起来

我们做的博客,是支持html格式内容渲染的。需要考虑,技术博客难免会有插入一些编程代码的情况,比如插入html代码,Java代码等。

这些代码在IDE中是不同的高亮颜色区分的,如果我们在博客中也支持插入代码的高亮展示,这样会大大增加博客的友好性。

我们将插入的代码用<pre><code>code is here </code></pre>包裹起来,然后代码着色的样式去渲染它。

<pre class="language-html"><code class=" language-html">

</code>
</pre>

class="language-html"就会将代码渲染成html的样式。

这里推荐使用highlightjs

这个JavaScript插件支持的着色的语言非常多,这里可以查看在线Demo——点我查看Demo

在自己的网站使用highlight.js也非常简单(如何使用highlight.js)。

按照官方文档说明

第一步,引入相关js,css

<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>

第二步,调用highlightAll()方法

<script>hljs.highlightAll();</script>

让我们启动项目,一起看看效果吧!



从代码颜色来看,已经生效。

Notes:
在使用时,一定要将你要展示的代码包在<pre><code></code></pre>标签。

给代码块添加复制功能

博客文章中代码的展示已经比较友好了,但是我们经常看到主流博客网站上都有代码复制功能,这个我们可以加上吗?

当然,追求极致的用户体验的脚步不能停。

clipboard.js就是这样的利器。

官方文档的使用说明也很简单

第一步,引入clipboard.js

<script src="dist/clipboard.min.js"></script>

第二步,实例化clipboard对象

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);

  e.clearSelection();
});

clipboard.on('error', function (e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});

官方的示例:

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
  Cut to clipboard
</button>

所以,关键就是trigger和target的绑定关系。

回到我们的博客文章,我们知道一篇博客文章可能会插入很多段代码,就会有很多的代码块,那就需要动态地给每段代码块实现绑定。

整理清楚思路之后,这个实现其实也不难,这里贴出代码给大家参考:

jQuery(document).ready(function(){
    for (var i = 0; i < $('.markdown-body pre').length; i++) {
        $('.markdown-body pre').eq(i).prepend('<div class="btn-copy"><span class="single-copy copy" data-clipboard-target="#copy'+ i +'" title="点击复制本段代码"><i class="fa fa-files-o"></i> 复制代码</span></div>');
        $('.markdown-body pre > code').eq(i).attr('id','copy'+ i);
    }
    var clipboard = new ClipboardJS('.copy');
    clipboard.on('success'function(e) {
        e.clearSelection();
        $(e.trigger).html('<span style="color:#32cd32"><i class="fa fa-check-square-o" aria-hidden="true"></i> 复制成功</span>');
        setTimeout(function(){$(e.trigger).html('<i class="fa fa-files-o"></i> 复制代码</span>');},3000);
    });
    clipboard.on('error'function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        alert("复制失败");
    });

});

这里,实际上动态添加了复制代码的按钮。

完整代码,可以查看superblog源代码

效果怎么样呢?

启动项目,让我们拭目以待!



可以看到,当鼠标移动到代码块的右上角,出现了复制代码按钮和图标。

鼠标单击这个按钮,我们就将代码块中的代码复制出来了。

结语

本章节,对博客文章详情的底层逻辑实现做了详细的阐述。

然后,以springboot实战案例完成了代码的实现。

这个案例比较简单,希望能够起到抛砖引玉的效果。

由于篇幅限制,视图层和控制器层的源码没有全部展示出来,完整源码请参考《Springboot实战纪实源码》

参考

版权声明: 本文为智客工坊「顶级码农」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

results matching ""

    No results matching ""