大家好，如果您还对博客网站源码分享下载不太了解，没有关系，今天就由本站为大家分享博客网站源码分享下载的知识，包括博客网站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()方法
<script>hljs.highlightAll();</script>\n\n
让我们启动项目,一起看看效果吧!
从代码颜色来看,已经生效。
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=©&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实战纪实源码》。
参考
如何使用highlight.jsgithub-markdown-csshighlightjsclipboard.js如何使用clipboardjs实现高亮代码一键复制功能
关于博客网站源码分享下载，博客网站smallcolor的介绍到此结束，希望对大家有所帮助。