演示站   更多作品   主题更新日志（24/11/21）

很久之前就想弄这个仿微博的模板了，但是时间一直不允许，这不抽空弄出来了，主题简单明了，后台设置简单，无需复杂操作，比起以往的CMS主题要简单的多，太适合做个人博客的网站了，当然这不太适合技术和科技播主们，毕竟这款娱乐元素居多，可以设置独立的背景图，列表卡片（要知道，这些功能只有微博会员才能设置）把你微博上你喜欢的卡片和背景抠出来，复制地址到相关接口就性了。一起来看看吧！

按照我的习惯设置步骤走，首页我可能会先设置侧栏信息，左侧的导航调用的模块是，导航栏（模块管理，导航栏），设置完导航在设置右侧的侧栏信息，标注下各模板对应的侧栏模块：

首 页 模 板（对应）模块管理---右侧，默认侧栏；

分类列表页（对应）模块管理---右侧，侧栏2；

文章页模板（对应）模块管理---右侧，侧栏3；

具体展示哪些模块自己在系统模块和主题自带模块，拖拽到对应侧栏即可。

本主题自带两个模块，分别是：“热评文章”“tab组合（自定义推荐和热门文章）”如图：

前台效果：

侧栏设置完成。

设置网站图片：

网站logo，背景图和卡片图等信息，如图：

logo和ico图片，直接上传或者填写图片地址，保存即可，没什么难度。

卡片背景图（对应）分类列表右侧图片，看图：

这个图片，你可以直接复制新浪微博的地址，然后粘贴在背景图接口，保存就行了。

背景图设置方法：

找到你自己喜欢的背景图（可以直接扒新浪的套装背景，复制图片地址）把图片上传或者粘贴在图片地址接口，但有时候背景的颜色不一样，有的黑色有的是蓝色，所以背景色，可以自己设置下，简单说下，打开背景图（刚才填写的图片地址）你会发现图片最下面一般都是一种颜色，看图：

图中红色区域就是我们要的背景色，这样设置完成之后，网站的整体色系就是一致得啦，怎么获取颜色代码？打开图片，按下F12，

图中“#000000”就是黑色背景的代码，我们点击代码前面的“黑色方块”（不是屏幕的黑色区域）会出现一个调色板，把鼠标移动到浅蓝色区域，点击即可获得颜色代码，如图：

图片的黑色区域已经变成了浅蓝色，这样看着舒服多了吧，其中“#a5cee2”就是我们所需的背景色代码，将其复制，然后粘贴在背景色接口就可以了。

最后在说下“距顶部距离”有些背景图可能会有一些图案，比如国庆、春节之类的，如果我们直接设置背景之后可能会遮住上面的图片，这时候我们就需要设置下距离顶部的距离（距离单位是像素，也就是px）让图案显示出来，例如，刚刚设置的山水画，图片有一座山，一间洋房别墅，我们就需要把这个图案显示出来才好看，具体的像素需要自己尝试了，最简单的方法就是你可以先设置成“200”，然后打开网站前台，看看效果，如果图案没显示完全，那么就写大一些，比如“300”，反之亦然。接下来就去自己折腾吧，good luck！

接下来看看怎么设置顶部导航标签：主题设置---首页设置---自定义顶部导航

前台显示效果：

代码如下：

<li><a href="/" target="_blank"><i class="fa fa-home"></i>首页</a></li>

按照此形式填写，可以设置多个导航链接，建议不要超过三个，否则可能出现错位。

公告设置方法：

滚动公告设置方法，主题设置---首页设置---首页滚动公告，代码格式如下：

<li><a href="/" target="_blank"><i class="fa fa-bullhorn"></i>首页自定义公告，前往后台设置</a></li>

格式是固定的，修改文字和链接就行。

设置文章数据调用：

相关文章调用设置，如图，侧栏热门标签数量，设置几前台就显示几个，侧栏热门文章天数，30天为一个月，自行设置，侧栏文章推荐，这个填写文章的ID（文件管理-查看文章ID），

哦对了，这里说下，侧栏部分数据采用静态缓存机制，例如，你设置了侧栏文章推荐，但是打开前台侧栏推荐的文章可能还是之前的数据，这是因为采用了静态的缓存文件，想要更新数据的话，你需要随意编辑一篇文章，然后直接右侧提交，以此来生成新的缓存数据。

设置博主卡片背景：

后台---主题设置---侧栏作者ID：填写用户ID，背景图片依然沿用新浪博客的图片。

前台显示：

蓝天白云，是挺好看的，这个最好都采用新浪微博的套装图片，直接复制粘贴就OK啦，其他设置都是基础了，没有什么难度。另外，分类列表有一个点赞功能，适配应用中心“新·文章点赞开发版”插件，搜索关键词，点击插件，获取插件，然后启用插件就行了，无需额外设置，如图：

其他设置：

1. 幻灯片轮播功能，点击“轮播图片”设置标题、上传图片，设置目标链接，保存就行了，记住一点就是，每张图片高和宽要一致。

2. 广告设置，需要的话在对应广告位开启，添加广告位就行了，另外说下，顶部两个接口，一个是head放置百度联盟等广告公共JS的接口，脚本代码接口，可以放一些自己js代码，比如音乐播放器什么的。
   

3. 功能设置就更简单了，写的很清楚，需要就开启，不需要就关闭。

整体设置基本完成，放几张演示图（可以直接点击演示站，查看整体效果）

首页效果图（默认背景）：

首页效果图（开启自定义背景）：

教程基本结束，如果有时间的话，我会给你们做一个扒新浪微博背景图片以及获取背景的视频，应该会在不久的将来，，，嗯嗯，不会太久！