Comfort - 一款MarkDown风格的博客园主题

1、介绍

comfort - 是一款适用于博客园的主题样式!

comfort - 集百家之长,引入layUi,bootstrap等第三方样式。

comfort - 的设计理念就是让阅读舒适。抵制纯白背景,泛白字体。

comfort - 推荐使用markdown编辑器!

这本页面你可以体会到它的特别之处。

2、示例

1.标题示例

h1标题

h2标题

h3标题

h4标题

h5标题

2.这是一个表格,comfort会自动检测页面的表格以及表格列数进行平均分配。

栏目1

栏目2

abc

默认值

abc

默认值

3.点赞,收藏,关注,赞赏

comfort - 完全重写了该区域的这四个按钮与事件,你只需要使用它即可。

4.目录

目录和返回顶部一直位于右下角,鼠标移入显示,移出隐藏。注意,在手机端是不显示目录按钮和返回顶部按钮。

感谢原作者:https://www.cnblogs.com/miangao/p/6846916.html

5.图片

图片auto大小匹配,但最大为100%的宽度,这是为了防止图片显示不完整。

6.引用

这是一段引用~~

7.动画

动画充斥着comfort,这里不再说明。

8.评论

仿微信评论,来源于博客园某位大佬,不过找了半天没找到大佬链接,大佬看见可以私信我。

9.整体分格

感谢:https://www.cnblogs.com/esofar 整体风格来源于这位大佬。

10.代码块

comfort - 完全极客风格的代码块!

3、安装

1.选择皮肤darkgreentrip,不要禁用模板css。

2.打开该链接,把CSS拷贝到后台CSS编辑框。

https://files.cnblogs.com/files/yueshutong/yst.css

3.在页脚声明JS依赖。

注意,你需要在后台页首复制这段代码

<script>
// 自定义底部文字
var footer = "Copyright ©2018 像风一样 yster@foxmail.com";
// 自定义文章出处版权声明:只需要改动姓名
var signatrue = "像风一样";
// 支付宝二维码地址
var zfb = "//files.cnblogs.com/files/smiletianya/1532688969.png.bmp";
// 微信二维码地址
var wxm = "//files.cnblogs.com/files/smiletianya/1532689462.png.bmp";
//网站ICO图标
var ico = "//files.cnblogs.com/files/yueshutong/favicon.ico";
</script>

然后自定义上述常量,并把下面的js依赖添加到你的页脚。

<!--Layer-->
<script src="//cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<link href="//cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">
<!--my -->
<script src="//files.cnblogs.com/files/yueshutong/yst.js"></script>
<!-- bootstrap -->
<script src="//files.cnblogs.com/files/yueshutong/bootstrap.min.js"></script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android机动车

Android 8.0 之自适应图标

Android 8.0 (API 26)引入了自适应图标,可以在不同的设备上显示不同形状的图标。例如,一个app 如果采用了自适应图标,那么它就可以在一家的 O...

1804
来自专栏前端小作坊

CSS vs JS动画:谁更快?

Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

2532
来自专栏HTML5学堂

【系列】移动端项目经验 表单兼容(上篇)

移动端 表单兼容(上篇) HTML5学堂:从这篇文章开始,我们将为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,本文主要包括input文...

2888
来自专栏Java技术分享圈

杨老师课堂之网页制作HTML的学习入门-含有案例

l HTML的标记通常是由开始标签和结束标签组成:<b>内容</b> <br/>

1382
来自专栏ytkah

Bootstrap速学教程之简要介绍

  Bootstrap是Twitter推出的一个用于前端开发的开源工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一...

2638
来自专栏玩转全栈

小程序怎么将视觉搞实现成ui

这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种...

33217
来自专栏腾讯大讲堂的专栏

打造H5动感影集的爱恨情仇【动画性能篇】

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的...

26212
来自专栏web前端

04 响应式

          2.1 媒体有覆盖性(当width: 1200px 时,符合下面两个条件,但是靠媒体样式的覆盖性,所以会采用第二个样式)

1030
来自专栏web前端

04 响应式

一、是什么      不同的浏览器尺寸,不同的排版(舒服美观为主) 二、媒体查询      1、媒体类型           all             所...

1996
来自专栏Vamei实验室

博客园小技巧

在博客园写博的半年中,我有时会纠结于一些诸如写作格式和显示效果之类的小问题。我想任何一个热衷于在这里写博客的人都可能会遇到类似的问题,所以就把自己遇到的一些状况...

26810

扫码关注云+社区