杨泽业：给你的mipmcs网站默认模板添加网站logo详细教程

网站服务商杨泽业：给你的mipmcs网站默认模板添加网站logo详细教程今天我在我的另一个新的网站上面，感觉还是必须添加logo才更加有意义，但是默认的模板是显示文字的，于是我

网站服务商杨泽业：给你的mipmcs网站默认模板添加网站logo详细教程

今天我在我的另一个新的网站上面，感觉还是必须添加logo才更加有意义，但是默认的模板是显示文字的，于是我今天就开始研究怎么把默认的mipcms网站添加logo，而且在电脑和手机上面都能完美的展示。经过我在测试的网站什么操作，已经完美的解决了问题，于是就把研究的成果分享给大家，希望对想添加logo的人有用。

一、关于logo的高度，宽度，格式。

1.1、logo的高度。在默认的网站导航栏里面，默认的高度是60px的，所以我们做的logo的最大高度不应该超过60px，超过的话，就会拉高了默认模板的高度，感觉很难看。logo的高度建议在50-60px之间，网站服务商网设计的宽度是60px。

1.2、logo的宽度。宽度我觉得是不限制的。根据自己的实际需求来做。如果logo上面的字或者图像多的话，就会宽一点，字少就会窄一点，所以说，logo的宽度，每个网站都不应该是一样的，各自设计自己的logo的宽度就行了。网站服务商网设计的宽度是120px。

1.3、logo的格式。我的建议是设计透明背景的png格式的logo，那样可以与网站底色一致，不会感觉看起来怪怪的。

1.4、ftp上传logo。我们把做好的logo.png图片，上传到网站的指定位置，我是建议和网站服务商一样上传到网站的根目录里面即可。

二、修改网站代码。

2.1、替换原理。理论上只要把显示文字地方{$mipInfo['siteName']}改成显示图片<mip-img src=""></mip-img>就行了，实际上呢？这样做是不行的，电脑看起来还好，到了手机上面那就把logo全屏显示了。logo缩放得超大，太难看了，所以我们还要添加一个样式表才行。

2.2、图片代码替换文字代码。我们打开头部模板文件，路径/template/default/main/header.html里面的把logo图片加一个样式就行了代码是{$mipInfo['siteName']}改成<div class="logo"><mip-img src="{$domain}/logo.png"></mip-img></div>。

2.3、从第4行起，代码是：

<div class="logo-text">

<a data-type="mip" href="{$domain}" data-title="{$mipInfo['siteName']}">

<div class="logo"><mip-img src="{$domain}/logo.png"></mip-img></div></a>

</div>

2.4、修改好的代码上传到网站里面,替换原来的内容。我们这里的代码是没有指定logo的宽度和高度的，也不需要指定大小，因为每个人是不一样的。

三。修改网站的  css样式表文件。

我们在样式表mipcms.css的文件,路径/public/assets/default/css/mipcms.css最后一行添加下面的代码即可：

.logo img {

  vertical-align: middle;

  width: auto;

  min-width: auto;

  height: auto;

}

上面的 css样式代码也是没有指定宽度和高度的，自动大小就行，设计多大就是多大，最大也是不会超过原来的大小的，这样的话，就不会全屏缩放了，在电脑和手机都能完美展示了。大家可以看看本站网站服务商的效果哦！

猜你喜欢