引入图片、字体文件

更新时间：2020-05-26 16:26:00 作者：米拓建站

用于调用指定路径下的自定义的图片、字体的方法。
【说明】
- 标签模板可参考“[$lang 标签模板自定义参数](https://doc.metinfo.cn/mb/mbtag/81.html "$lang 标签模板自定义参数")”调用自定义参数对应的图片文件；标签模板文件夹下除`static/metinfo.css`之外的其他css文件无法调用模板自定义变量）；
- 商业模板可参考“[$ui 商业模板UI参数](https://doc.metinfo.cn/mb/mbtag/112.html "$ui 商业模板UI参数")”调用自定义参数对应的图片文件；
- 字体与图片的调用方法一致。

## 标签模板默认css文件（static/metinfo.css）如何引入图片、字体文件：

### 原理：
标签模板会把`static/metinfo.css`文件打包生成到模板文件夹下的`cache/metinfo.css`中，前台页面会自动加载`cache/metinfo.css`。
所以可在`static/metinfo.css`文件中调用相对于模板文件夹下`cache/metinfo.css`文件路径的图片或字体文件。

### static/metinfo.css文件中调用语法：

.aaa{bacgroud:url('相对于模板文件夹下cache/metinfo.css文件的图片文件路径');}
    @font-face {
    	font-family: 字体名称;
    	src: url('相对于模板文件夹下cache/metinfo.css文件的字体文件路径');
    }

### 示例：
#### 标签模板文件夹下static/metinfo.css如何引用图片文件
**场景案例：**在static/metinfo.css引用一张自定义的背景图片，图片文件images/bg.jpg相对于cache/metinfo.css文件路径为../images/bg.jpg

**static/metinfo.css中引入图片文件：**

.aaa{bacgroud:url('../images/bg.jpg');}

【注意】字体与图片的调用方法一致。

**标签模板文件夹下cache/metinfo.css文件输出代码：**

与static/metinfo.css编写的代码一致。

## 标签模板自定义css文件如何引入图片、字体文件：
### 原理：
①首先需要通过模板文件夹下`config.json引入自定义的css文件`（具体参考文档【[引入css、js文件](https://doc.metinfo.cn/mb/mbtag/99.html  "引入css、js文件")】）。
②标签模板会把模板文件夹下config.json引入的css文件打包生成到模板文件夹下的cache/metinfo.css中，前台页面会自动加载cache/metinfo.css。
③然后在引入的css文件中调用图片、字体文件，调用的路径为图片或字体文件相对于该css文件的路径。

### 调用语法：

.aaa{bacgroud:url('相对于该css文件的图片文件路径');}
    @font-face {
    	font-family: 字体名称;
    	src: url('相对于该css文件的字体文件路径');
    }

### 示例：
#### 标签模板自定义的css文件中如何引入图片文件

**场景案例：**标签模板自定义的css文件（static/new.css）中需调用一张自定义的背景图片（static/images/bg.jpg）
**①模板文件夹下config.json引入自定义css文件（static/new.css）：**

{
        "css": [
            "{$metui_temp}static/new.css"//{$metui_temp}为当前模板文件夹路径的变量，具体请参考文档【引入css、js文件】
        ],
        "js": [
        ]
    }

**②自定义css文件（static/new.css）中引入图片代码：**
static/images/bg.jpg相对于static/new.css文件路径为./images/bg.jpg。

.aaa{bacgroud:url('./images/bg.jpg');}

【注意】字体与图片的调用方法一致。

**模板文件夹下cache/metinfo.css文件输出代码：**
假设当前模板名为metv7，则代码如下：

.aaa{bacgroud:url('../../../templates/metv7/static/./images/bg.jpg');}//终的加载路径

## 商业模板如何引入图片、字体文件：
### 原理：

①首先需要通过UI所在文件夹下config.json引入index.css或自定义的css文件（具体参考文档【[引入css、js文件](https://doc.metinfo.cn/mb/mbtag/99.html "引入css、js文件")】 ）。
②商业模板会把UI所在文件夹下config.json引入的css文件打包生成到模板文件夹下的cache/当前页面模板文件名称_当前站点语言名称.css中，前台页面会自动加载打包生成后的css文件。
③然后在引入的css文件中调用图片、字体文件路径，调用的图片、字体文件需要放置于对应的UI所在文件夹下的img文件夹中。

### index.css及其他css文件中调用语法：

.aaa{bacgroud:url('$ui_url/相对于UI所在文件夹下img文件夹中的图片文件路径');}//$ui_url为UI所在文件夹下的img文件夹的路径
    @font-face {
    	font-family: 字体名称;
    	src: url('$ui_url/相对于UI所在文件夹下img文件夹中的字体文件路径');//$ui_url为UI所在文件夹下的img文件夹的路径
    }

### 示例：
#### 商业模板ui默认css文件中如何调用自定义的图片
**场景案例：**商业模板（mui001）头部区块（对应UI为`ui/head_nav/met_16_1`）默认的css文件（UI所在文件夹下index.css）中如何调用自定义的背景图片（UI所在文件夹下img/bg.jpg）。

**①UI所在文件夹下config.json引入index.css：**

{
    "css": [
        ...//引入其他css文件
            "ui/css/index.css"//‘ui/css/’为UI所在文件夹路径的变量，具体请参考文档【引入css、js文件】
        ],
        "js": [
        ]
    }

**②index.css文件中调用图片文件：**

img/bg.jpg相对于UI所在文件夹下的img文件夹的路径为bg.jpg。
    .aaa{bacgroud:url('$ui_url/bg.jpg');}

**模板文件夹下cache/index_cn.css文件输出代码：**

假设当前页面为简体中文语言站点的首页，则前台页面会自动调用模板文件夹下的cache/index_cn.css。

.aaa{bacgroud:url('../../../templates/mui001/ui/head_nav/met_16_1/img/bg.jpg');}//终的加载路径

### 商业模板ui自定义css文件中如何调用自定义的图片
**场景案例：**商业模板（mui001）头部区块（对应UI为`ui/head_nav/met_16_1`），在UI自定义的css文件（UI所在文件夹下img/new.css）中如何调用自定义的背景图片（UI所在文件夹下img/bg.jpg）。

**①UI所在文件夹下config.json引入自定义的css文件img/new.css：**

{
    "css": [
        ...//引入其他css文件
        "ui/css/img/new.css",//引入UI所在文件夹下的img/new.css
            "ui/css/index.css"//‘ui/css/’为UI所在文件夹路径的变量，具体请参考文档【引入css、js文件】
        ],
        "js": [
        ]
    }

**②自定义img/new.css文件中调用图片代码：**

img/bg.jpg相对于UI所在文件夹下的img文件夹的路径为bg.jpg。

.aaa{bacgroud:url('$ui_url/bg.jpg');}

【注意】字体与图片的调用方法一致。

** 模板文件夹下cache/index_cn.css文件输出代码：**

假设当前页面为简体中文语言站点的首页，则前台页面会自动调用模板文件夹下的cache/index_cn.css。
    
    .aaa{bacgroud:url('../../../templates/mui001/ui/head_nav/met_16_1/img/bg.jpg');} //终的加载路径

文档中心

米拓学堂

帮助中心

在线交流

{"status":1,"html":"<style type=\"text\/css\">\r\n.onlinebox_three{border:2px solid;}\r\n.onlinebox_three .onlinebox_three_list{width: 160px;padding: 10px 0px;}\r\n.onlinebox_three .online-item{margin-bottom: 5px; padding: 0px 17px; position: relative;display: block;color: #666;}\r\n.onlinebox_three .online-item:last-child{margin-bottom: 0px;}\r\n.onlinebox_three .online-item:hover{background: #f8f8f8;}\r\n.onlinebox_three .online-item i{font-size: 16px;}\r\n.onlinebox_three .onlinebox-open{font-size: 22px;display:none;cursor: pointer;padding: 0 10px; font-size: 18px; line-height: 40px;}\r\n.onlinebox.min .onlinebox-open{display:block;padding:0 10px;background:#444;font-size:18px;line-height:40px;color:#fff}\r\n.onlinebox .onlinebox-min{position: relative;top:-4px;}\r\n@media (max-width: 767px){\r\n.onlinebox_three .online-item{font-size: 12px;padding-top: 6px;}\r\n.onlinebox_three .online-item i{font-size: 14px;}\r\n}\r\n<\/style>\r\n<div id='onlinebox'  class=\"onlinebox onlinebox_three hide\" m-type='online' m-id='online' style=\"border-color:#1baadb;\">\r\n    <div class=\"onlinebox-open\" style=\"background:#1baadb;\"><i class=\"fa fa-comments-o\"><\/i><\/div>\r\n    <div class=\"onlinebox-box\">\r\n        <div class=\"onlinebox-top\" style=\"background:#1baadb;\">\r\n            <div class=\"onlinebox-top-btn font-size-26\">\r\n                <a href=\"javascript:;\" class=\"onlinebox-close\" title=\"\">×<\/a>\r\n                <a href=\"javascript:;\" class=\"onlinebox-min\">-<\/a>\r\n            <\/div>\r\n            <h4>在线交流<\/h4>\r\n        <\/div>\r\n                                    <div class=\"met-editor onlinebox-bottom p-x-10 p-y-5\"><p style=\"text-align: center;\">\r\n    <img src=\"..\/upload\/202001\/1579417409303256.png\" data-width=\"120\" width=\"120\" data-height=\"120\" height=\"120\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    微信公众号\r\n<\/p>\r\n<p style=\"text-align:center;\">\r\n    <img src=\"..\/upload\/202001\/1579417452544806.png\" data-width=\"150\" width=\"150\" data-height=\"150\" height=\"150\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    QQ交流群\r\n<\/p><\/div>\r\n    <\/div>\r\n<\/div>","t":"4","x":"10","y":"130"}