不凡博客(Bufanz.com)

业务范围

网站搭建、优化、故障排查。
电脑故障排查、删除弹窗广告、重装系统、优化系统
32624142(请注明来意)
首页 > ZBlog > 正文

《三栏新拟态自适应SEO博客主题》主题配置使用教程

ZBlog | 2020年12月29日16:01:05

云闪付,新人注册领券5元话费券10元生活、购物券

《三栏新拟态自适应SEO博客主题》主题配置使用教程

《三栏新拟态自适应SEO博客主题》的主题和功能介绍:bufanz.com/post/109.html

《三栏新拟态自适应SEO博客主题》的自定义CSS用法 美化页面样式:bufanz.com/post/112.html

为方便新用户或者新手快速配置主题功能,写了一篇此主题的使用教程。

基本/SEO

《三栏新拟态自适应SEO博客主题》主题配置使用教程

网站Logo、站标,左侧栏作者信息的显示开关

《三栏新拟态自适应SEO博客主题》主题配置使用教程

文章信息的显示开关

《三栏新拟态自适应SEO博客主题》主题配置使用教程

左侧栏作者信息和文章信息的显示总开关

《三栏新拟态自适应SEO博客主题》主题配置使用教程

移动端和电脑端的搜索框显示开关

《三栏新拟态自适应SEO博客主题》主题配置使用教程

幻灯片设置

《三栏新拟态自适应SEO博客主题》主题配置使用教程

幻灯片图片的最佳尺寸:宽度720px,高度140px(高度值不能过多,否则过不了百度移动落地页检测)

幻灯片的数量是没有限制,但是建议最多设置5个,控制好图片文件大小,否则会影响网页加载速度。

幻灯片代码如下

<li><a href="第一图片的链接" target="_blank"><img src="第一图片的地址"></a></li>
<li><a href="第二图片的链接" target="_blank"><img src="第二图片的地址"></a></li>
<li><a href="第三图片的链接" target="_blank"><img src="第三图片的地址"></a></li>
<li><a href="第四图片的链接" target="_blank"><img src="第四图片的地址"></a></li>

如果图片的链接是站外链接,建议在target="_blank"的后面添加rel="nofollow",防止域名权重流失,代码如下:

<li><a href="第一图片的链接" target="_blank" rel="nofollow"><img src="第一图片的地址"></a></li>

在自定义CSS添加以下代码:

@media only screen and (max-width: 999px) {
.hdp li img {height: 100px;}
}

三种页面的广告位代码和显示开关

《三栏新拟态自适应SEO博客主题》主题配置使用教程

广告位尺寸最佳比例为10:1,如果是自己设计广告图片,图片尺寸宽和高分别是700px和70px。

如果是用已设计好的广告图片,宽度最好是700px以上。

图片广告代码如下:

<a href="链接" rel="nofollow" target="_blank"><img src="图片地址" width="100%" alt="名称"></a>

如果链接是自己网站的链接或者允许搜索引擎蜘蛛爬取广告的链接,把代码中的rel="nofollow"删掉。

自定义区

《三栏新拟态自适应SEO博客主题》主题配置使用教程

左侧栏导航栏的二级分类代码

如果一级分类有二级分类,一级分类的链接必须是#。

此样式未完善,不建议添加二级分类导航。

<li><a href="#">一级分类(带二级分类)</a>
<ul>
<li><a href="此二级分类的链接">第一个二级分类</li>
<li><a href="此二级分类的链接">第二个二级分类</li>
<li><a href="此二级分类的链接">第三个二级分类</li>
</ul>
</li>
<li><a href="此一级分类的链接">一级分类(不带二级分类)</a><li>
<li><a href="此一级分类的链接">一级分类(不带二级分类)</a><li>

文章列表的缩略图

文章列表调用缩略图顺序是:自定义缩略图 > 文章第一张图 > 无图不显示缩略图

《三栏新拟态自适应SEO博客主题》主题配置使用教程

如果无图文章需要在列表中显示缩略图,或者文章内容仅一个视频,建议上传自定义缩略图。

《三栏新拟态自适应SEO博客主题》主题配置使用教程

需要手动调整的插件

启用插件后,如果功能正常,需要手动调整什么就可以完美适配。

UEditor编辑器

带有链接的长文本(比如网址),移动端页面右边会多出宽度,在自定义CSS添加以下代码:

.news p {width: 100%; height: auto; word-wrap:break-word;word-break:break-all; overflow: hidden;}

菜鸟随机文章

文章标题字数多的话,就是多行显示完整文章标题,如果想和“最热文章”一样的列表,在自定义CSS添加以下代码:

.sidebar dl li {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

首字母标签云

标签页面移位,在主题自定义CSS添加以下代码:

.alltopics-content {width: auto}
.alltopics-content .item .item-content {padding:0}

与主题有冲突的插件

我不能对ZBlog所有插件测试是否与主题完美兼容,只对我网站目前所安装的插件测试是否兼容,如果有不兼容的插件,会列出名单供于参考,也是不建议安装的插件。

外链杀手

解决办法:在站外链接添加nofollow(bufanz.com/post/114.html

正文目录索引

解决办法:无

阅读更多[查看全文]插件

解决办法:无

淘宝购物先领券,更省钱

本文标题:《三栏新拟态自适应SEO博客主题》主题配置使用教程

本文链接:https://bufanz.com/post/111.html

版权声明:本文章是 不凡博客(Bufanz.com) 的原创文章,未经允许请勿转载本文章!