乌米Umi3框架中,如何实现每个页面都有自己个性HTML文件?

乌米Umi3框架中,如何实现每个页面都有自己个性HTML文件?,第1张

在Umi3官方文档中,有一个配置项exportStatic需在配置文件(umirc.ts或config/config.ts)中设置,语法如下: Umi框架配置 html 的输出形式,默认只输出 index.html。如果需要预渲染,请开启 ssr 配置,常用来解决没有服务端情况下,页面的 SEO 和首屏渲染提速。如果开启 exportStatic,则会针对每个路由输出 html 文件。 举个例子,路由配置如下: 在不开启 exportStatic 时,输出: 设置 exportStatic: {} 后,输出: 设置 exportStatic: { htmlSuffix: true } 后,输出: 若有 SEO的话需求,可开启 ssr 配置,在 umi build 后,会路由(除静态路由外)渲染成有具体内容的静态 html 页面,例如在配置文件(umirc.ts | config/config.ts)中有如下路由配置: 设置 { ssr: {}, exportStatic: { } 后,且在编译后,生成如下产物: 考虑到预渲染后,大部分不会再用到 umi.server.js 服务端文件,构建完成后会删掉 umi.server.js 文件如果有调试、不删除 server 文件需求,可通过环境变量 RM_SERVER_FILE=none 来保留。 转载:码书网「链接」

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

body, html,#allmap {width: 100%height: 100%overflow: hiddenmargin:0font-family:"微软雅黑"}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

<title>个性化地图</title>

</head>

<body>

<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

var map = new BMap.Map('allmap')

map.centerAndZoom(new BMap.Point(116.404269,39.916042), 12)

var  mapStyle ={ 

        features: ["road", "building","water","land"],//隐藏地图上的poi

        style : "dark"  //设置地图风格为高端黑,目前支持normal(默认样式),dark(深色样式),light(浅色样式)

    }

map.setMapStyle(mapStyle)

 

function checkhHtml5()   

        {   

            if (typeof(Worker) === "undefined")     

            {   

                if(navigator.userAgent.indexOf("MSIE 9.0")<=0)  

                   {  

                      alert("定制个性地图示例:IE9以下不兼容,推荐使用百度浏览器、chrome、firefox、safari、IE10")   

                   }  

                

            }  

        }

 checkhHtml5()     

</script>)

首先打开电脑上自带的记事本程序,然后输入html网页基本结构语句。<html><body></body></html>

由于css样式必须在标签<head></head>之间,因此我们点击<html>后面,输入<head></head>标签。

在head标签之间输入样式标签<style></style>,然后定义一些属性,例如

<style type="text/css">

body {background-color: yellow} 定义网页背景色为黄色;

h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00;

h2 {background-color: transparent} 定义h2标签背景色为透明;

p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值;

p.no2 {background-color: graypadding: 20px} 这个定义class属性为no2的p标签背景色为灰色,并且边距为20px;

</style>

然后点击body标签后面输入正文标签内容,例如

<h1>这是KING</h1>

<h2>这是KING</h2>

<p>这是KING</p>

<p class="no2">这个KING设置20内边距。</p>

点击记事本菜单中的文件,选择另存为,把内容保存为html网页格式。双击打开预览效果。

我们可以发现代码中两个同样的<p>标签显示的css样式却不同,区别就在于样式中定义的p.no2,这就是正文代码中class="no2"的优势所在,可以定义个性风格。

还可以选择用html设置,如下:

颜色自己调,可以用取色器查看颜色,例如background-color:#789999如果需要加边框可以用border属性


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6214818.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存