导航菜单
首页 >  » 正文

mipcms给文章结尾添加【随机显示一条经典语录】的功能,适合所有php网站

实现的方法其实很简单,只要在文章模板里面,文末里面添加一个广告位即可。广告内容用mip-iframe调用页面/yulu/即可。yulu这个文件夹里面包含两个文件,一个是index.php一个是yulu.txt。下面我就讲讲详细的操作方法:


第一步,制作调用主文件index.php添加适合mip技术的网页代码。代码内容如下:

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
<link rel="canonical" href="https://www.kcs2.top/yulu/index.php">
<title>网站服务商语录_网站服务商经典语录_网站经典_网站服务商_wzfws.com</title>
</head>
<body>
       
 <?php
// 获取句子文件的绝对路径
// 如果你介意别人可能会拖走这个文本,可以把文件名自定义一下,或者通过nginx禁止拉取也行。
$path = dirname(__FILE__);
$file = file($path."/yulu.txt");
 
# 随机读取一行
$arr  = mt_rand( 0, count( $file ) - 1 );
$content  = trim($file[$arr]);
 
# 编码判断,用于输出相应的响应头部编码
if (isset($_GET['charset']) && !empty($_GET['charset'])) {
    $charset = $_GET['charset'];
    if (strcasecmp($charset,"gbk") == 0 ) {
        $content = mb_convert_encoding($content,'gbk', 'utf-8');
    }
} else {
    $charset = 'utf-8';
}
header("Content-Type: text/html; charset=$charset");
    echo $content;
?>      

<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
</body>
</html>


第二步、制作yulu.txt内容

规则,一条内容占用一行即可。


第三步、上传主文件和语录到空间。

在网站的根目录新建yulu文件夹,把上面index.php和yulu.txt一起放进这个yulu文件夹即可。

上传以后,你就能通过网址问这个文件夹了,如本站的:https://www.kcs2.top/yulu/

这个地址,每刷新一次,就会随机变换一个。网址里面有了,接下来我们就开始调用这个页面内容了。


四、添加页面调用内容到文章结尾。

4.1、新建一个叫做经典语录的广告。

后台--插件--广告管理--新建广告:

名称:经典语录

别名:jdyl

代码:

<div  id="yulu" ><mip-iframe src="https://www.kcs2.top/yulu/index.php" width="320" height="150"></mip-iframe></div>

4.2、添加代码到文章详情页模板。打开文章详情页模板articleDetail.html(路径为template\default\article\articleDetail.html)搜索“猜你喜欢”在他的上一行添加广告代码{:hook('adHook','jdyl')}即可,如果有百度分享的代码,那就在百度分享的再上一行。

4.3、添加一个样式

就这样文章结尾就会显示你随机的一条信息了,为了更加好看,我们就在样式表里面添加一个样式吧!你可以参考本站的一个样式,在样式表mipcms.css的文件,路径/public/assets/default/css/mipcms.css最后一行添加下面的代码即可:

#yulu{
    border-left: 5px solid #2f889a;
    border-right: 5px solid #2f889a;
    background-color: #ebebeb;
    padding: 10px;text-align: center;
    color: #095AD4;
    margin: 5px 0 5px 0;
}

五、其他说明:

5.1、在4.1中的语录调用代码里面,<mip-iframe src="https://www.kcs2.top/yulu/index.php" width="320" height="150"></mip-iframe>

因为本站使用的mip技术,必须符合mip规范,如果你的网站不是mipcms的网站的话,就不要设置mip-iframe的宽度和高度了,那样看起来就更加美观。我设置320是因为在手机上面显示320像素就差不多了,在宽一点就把屏蔽拉升了,需要左右滑动才能查看的话,用户体验不好。

5.2、没有添加样式表的调用的代码是:

<br><hr /><div><b>经典语录</b></div>
<div ><mip-iframe src="https://www.kcs2.top/yulu/index.php" width="320" height="150"></mip-iframe></div>
0.191728s