操作指南
CSS3+HTML5、扁平化、响应式设计、自定义颜色风格,不依赖任何前端框架。
正文具有二级、三级标题突出显示,四级标题作为文章目录索引,文章摘要、可选择4种文章形式,图片lightbox查看,视频lightbox播放,文章中插入图片幻灯,文字折叠开关,代码高亮、下载按钮、回复可见内容等功能。
文章形式
- 主题支持标准、日志、图像、引用(软件)四种形式。编辑文章时:
- 有缩略图的文章可以选择标准形式
- 无缩略图的选择日志形式
- 文字少图片多的日志可选择图像形式
- 不同的文章形式,在文章列表页面,会显示不同的外观布局
文章编辑
主题集成了常用自定义栏目添加面板,自定义缩略图、文章描述、幻灯中的图片、设置为侧边推荐文章等都可以在此添加。
文章索引目录
自动将文章中的四级标题<h4>(选中章节文字,点击编辑器“段落”,选择“四级标题即可”)转化为文章索引目录,需要到主题选项中开启该功能。效果如本文。
当页面滚动到第3个四级标题时才会在屏幕左侧边缘显示目录索引,滚动到第2个四级标题时自动隐藏。
文章摘要
编辑文章时可以在编辑器下面的“摘要”面板中输入一段摘要内容,用于显示在正文顶部,并同时显示在文章列表中,有利于SEO,摘要控制在180字符以内,多出的部分会被截断。
默认回行段首自动空两格
按住上档键(shift)的同时,按回车键(Enter),则无空格。
图片lightbox查看
编辑文章插入图片时:
- 从URL插入(外链)必须选择链接到:图像URL;
- 本地上传,必须选择链接到:媒体文件
- 图片名称不能为中文汉字,否则不会启用图片lightbox查看。
图片超链接lightbox查看图片
另外,利用这个图片lightbox查看功能,可以只添加图片的链接而不用将图片添加到文章中,就可实现lightbox查看,可提高页面加载速度,又不影响图片浏览。
比如:图片1、图片2、图片3 这三张图片只添加了超链接,并没有添加到文章中,也不影响正常lightbox查看。
文章中插入图片幻灯
回复可见
只有在本文留言后才能看见隐藏的内容
[reply]
看到这句,说明你已为本博客添加了一条留言[/reply]
只有留言评论者才能看见隐藏的内容
密码保护
通过添加短代码为文章部分文字加密,只有输入正确密码才能查看,测试密码:zmingcx
[password key=zmingcx]
如果您看到这句,说明您输入了正常的查看密码[/password]
通过添加短代码为文章部分文字加密,只有输入正确密码才能查看,测试密码:zmingcx
视频lightbox播放
[videos href=http://player.youku.com/embed/XMjM2OTE3ODg4]http://zmingcx.com/wp-content/uploads/2015/03/ladyd.jpg[/videos]
正常插入视频地址:
文字折叠隐藏及代码高亮
通过添加短代码隐藏部分文字内容
查看隐藏的内容[s]
[p]
- #tag_cloud-2 {
- position:relative;
- height:340px;
- margin: 10px auto 0;
- }
- #tag_cloud-2 a {
- position:absolute;
- color: #fff;
- text-align: center;
- text-overflow: ellipsis;
- whitewhite-space: nowrap;
- top:0px;
- left:0px;
- padding: 3px 5px;
- border: none;
- }
- #tag_cloud-2 a:hover {
- background: #d02f53;
- display: block;
- }
- #tag_cloud-2 a:nth-child(n) {
- background: #666;
- border-radius: 3px;
- display: inline-block;
- line-height: 18px;
- margin: 0 10px 15px 0;
- }
- #tag_cloud-2 a:nth-child(2n) {
- background: #d1a601;
- }
- #tag_cloud-2 a:nth-child(3n) {
- background: #286c4a;
- }
- #tag_cloud-2 a:nth-child(5n) {
- background: #518ab2;
- }
- #tag_cloud-2 a:nth-child(4n) {
- background: #c91d13;
- }
[/p]
下载按钮
主题集成短代码实现的下载按钮功能,编辑文章时,切换到文本编辑模式,点击编辑工具栏 的下载按钮或者下载链接(可自定义按钮名称),并在文章设置面板中输入下载弹窗中下载按钮名称及下载地址,添加一个下载按钮。
[file]
还可以在自定义栏目面板中输 入button2、button3、button4,并分别在值中输入按钮名称,同时再添加url2、url3、url4,在值中输入下载链接,添加总共 4个弹窗中的下载按钮。
无弹窗的链接按钮
[url href=http://pan.baidu.com/s/1jGiqJps]链接按钮[/url]
[/login]
南無觀世音菩薩!
南无第三世多杰羌佛!