博客网站源码分享下载，博客网站smallcolor

宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

大家好，如果您还对博客网站源码分享下载不太了解，没有关系，今天就由本站为大家分享博客网站源码分享下载的知识，包括博客网站smallcolor的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

导航

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

引言

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

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

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

技术博客的价值

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

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

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

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

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

颜值即正义

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

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

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

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

选择markdown主题样式

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

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

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

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

官方文章给出了说明

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

完整示例如下:

<metaname=&34;content=&34;>\n<linkrel=&34;href=&34;>\n<style>\n\t.markdown-body{\n\t\tbox-sizing:border-box;\n\t\tmin-width:200px;\n\t\tmax-width:980px;\n\t\tmargin:0auto;\n\t\tpadding:45px;\n\t}\n\n\t@media(max-width:767px){\n\t\t.markdown-body{\n\t\t\tpadding:15px;\n\t\t}\n\t}\n</style>\n<articleclass=&34;>\n\t<h1>Unicorns</h1>\n\t<p>Allthethings</p>\n</article>\n

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

可以选的仓库

Github地址Gitee地址

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

打开我们的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完整代码如下:

<!DOCTYPEhtml>\n<htmllang=&34;xmlns:layout=&34;xmlns:th=&34;layout:decorator=&34;>\n<head>\n<metacharset=&34;>\n<title>文章详情页面</title>\n<linkhref=&34;rel=&34;/>\n<style>\n\t.markdown-body{\n\t\tbox-sizing:border-box;\n\t\tmin-width:200px;\n\t\tmax-width:980px;\n\t\tmargin:0auto;\n\t\tpadding:45px;\n\t}\n\n\t@media(max-width:767px){\n\t\t.markdown-body{\n\t\t\tpadding:15px;\n\t\t}\n\t}\n</style>\n</head>\n<body>\n\n<divlayout:fragment=&34;>\n<divclass=&34;>\n<divclass=&34;>\n<articleclass=&34;>\n<divth:utext=&34;></div>\n</article>\n</div>\n</div>\n</div>\n</body>\n</html>\n

值得注意的是,<article>class=&34;></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>codeishere</code></pre>包裹起来,然后代码着色的样式去渲染它。

<preclass=&34;><codeclass=&34;>\n\n</code>\n</pre>\n\n

class=&34;就会将代码渲染成html的样式。

这里推荐使用highlightjs。

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

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

按照官方文档说明

第一步,引入相关js,css

<linkrel=&34;href=&34;>\n<scriptsrc=&34;></script>\n

第二步,调用highlightAll()方法

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

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

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

给代码块添加复制功能

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

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

clipboard.js就是这样的利器。

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

第一步,引入clipboard.js

<scriptsrc=&34;></script>\n\n

第二步,实例化clipboard对象

varclipboard=newClipboardJS(&39;);\n\nclipboard.on(&39;,function(e){\nconsole.info(&39;,e.action);\nconsole.info(&39;,e.text);\nconsole.info(&39;,e.trigger);\n\ne.clearSelection();\n});\n\nclipboard.on(&39;,function(e){\nconsole.error(&39;,e.action);\nconsole.error(&39;,e.trigger);\n});\n\n

官方的示例:

<!–Target–>\n<textareaid=&34;>Mussumipsumcacilds…</textarea>\n\n<!–Trigger–>\n<buttonclass=&34;data-clipboard-action=&34;data-clipboard-target=&bar&39;.markdown-bodypre&39;.markdown-bodypre&39;<divclass=&34;><spanclass=&34;data-clipboard-target=&copy&39;&34;点击复制本段代码&34;fafa-files-o&39;);\n$(&39;).eq(i).attr(&39;,&39;+i);\n}\nvarclipboard=newClipboardJS(&39;);\nclipboard.on(&39;,function(e){\ne.clearSelection();\n$(e.trigger).html(&34;color:34;><iclass=&34;aria-hidden=&34;></i>复制成功</span>&39;<iclass=&34;></i>复制代码</span>&39;error&39;Action:&39;Trigger:&34;复制失败”);\n});\n\n});\n\n

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

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

效果怎么样呢?

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

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

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

结语

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

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

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

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

参考