link标签 rel=“ alternate“ 应用解析

一、link标签rel="alternate"属性的作用及用法:

1.链接外部样式表:
<link rel="alternate" type="text/css" href="out.css">

rel属性定义当前.html文档与被链接的.css文档之间的关系。
rel=“stylesheet” 表示当前文档的外部样式表。
rel=“alternate” 表示当前文档的可替换样式表。

2.联合使用:
<link rel="stylesheet" type="text/css" href="out.css">			<!--作为默认样式表-->
<link rel="alternate" type="text/css" href="out.css">			<!--作为可替换样式表-->

用户可选择替换样式,实现自由切换界面样式。但需要浏览器支持。例如一些网站会给网页定义多个配色,或者多个主题,明色和暗色。

rel=alternate的页面是默认不会渲染的,可以作为后备样式,对link使用disabled即可进行切换,无延迟。但是,提前下载,会浪费单宽,可以在必要的场景下使用。

还有一个与rel对应的属性rev,rel表示从源文档到目标文档的关系,rev表示从目标文档到源文档的关系。rev在HTML5 中已不支持。

3.可用于将PC版页面指向移动版页面,将移动版页面指向PC版页面,这样有利于搜索引擎,对不同设备的用户提供不同类型的页面

PC版本页面head应添加

<link rel="alternate" media="only screen and (max-width:640px)" href="http://m.mobile.com" >

移动版页面应添加

<link rel="canonical" href="http://wwww.pc.com" >

二、Html主题样式切换方法

1.切换样式表引用:

编写两套样式 them1.css 、them2.css 通过js 动态切换 link 标签的属性,或追加目标主题样式表、清除现有样式表;Fixfox 浏览器可以通过浏览器切换 link 样式表,但是IE 浏览器不支持,需要手动实现。

优点:简单、快捷、方便。

缺点:由于是切换引用css 文件,会由于网络原因造成加载css 文件延迟、或由于javascript 错误阻塞造成切换失败,不利于客户体验。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS主题切换</title>
<link rel="stylesheet" type="text/css" href="a.css" title="a">
<link rel="alternate stylesheet" type="text/css" href="b.css" title="b">
<script>
 // 对切换主题的按钮绑定事件,用来做触发
document.getElementById("sheet-a").addEventListener("click",function(){
    setStyleSheet("a");
});
document.getElementById("sheet-b").addEventListener("click",function(){
    setStyleSheet("b");
});
/**
 * 查找所有的link标签,找到符合条件的css进行切换
 * @title:需要切换的css文件名称,也可以是某值,主要是能够找到所要切换的link标签
 **/
function setStyleSheet(title){ 
    // 首先找到DOM中所有的link标签
    var link_list = document.getElementsByTagName("link");
    if ( link_list ){
        for ( var i=0;i<link_list.length;i++ ){
            // 要找到所有link中rel属性值包括style的,也就是包括stylesheet和alternate stylesheet;
            if ( link_list[i].getAttribute("rel").indexOf("style") != -1 ){
                // 将符合条件的link的disabled的属性设为true,都改为禁用;
                link_list[i].disabled = true;
                // 然后判断link标签中的title属性,找到我们需要替换的css文件
                // 找到后将该link的disabled改为启用;
                if ( link_list[i].getAttribute("title") === title){
                    link_list[i].disabled = false;
                }
            }
        }
    }
};
</script>
 
</head>
<body>
    <div class="main">
        <div class="con">
            <input type="button" id="sheet-a" value="主题a" />
            <input type="button" id="sheet-b" value="主题b" />
        </div>
    </div>
</body
</html>
2.通多 javaScript 操作Dom Class 属性

该方式需要统一Class 的命名规则前缀or后缀,如按钮 btn-them1、btn-them2,通过javascript 控制 class 。

优点:响应快速、没有延迟;适用于单页面应用和局部样式切换。

缺点:全局样式切换 需要全局样式添加标记、多页面的话开发量相对较大,繁琐,很难做到全站的CSS切换,只能局限在当前页上。

3.通过服务器端脚本

Asp、 Php 、Jsp 都可实现

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
您好!非常抱歉,我无法直接帮助您重新部署一个 Hexo 个人博客测试。作为一个文本生成模型,我无法执行实际的代码操作。但是,我可以为您提供一些指导来重新部署 Hexo 博客。 首先,您可以按照以下步骤重新部署 Hexo 个人博客: 1. 确保您已经安装了 Node.js 环境和 Git 工具。 2. 打开终端或命令提示符,并使用以下命令安装 Hexo: ```shell npm install -g hexo-cli ``` 3. 创建一个新的 Hexo 博客项目: ```shell hexo init myblog cd myblog npm install ``` 4. 配置 Hexo 博客: 在项目根目录下找到 `_config.yml` 文件,并根据您的需要进行配置。您可以设置博客标题、作者信息、主题等。 5. 创建新的文章: 使用以下命令创建新的文章: ```shell hexo new "My First Post" ``` 这将在 `source/_posts` 目录下创建一个名为 `my-first-post.md` 的 Markdown 文件。 6. 编辑文章: 使用 Markdown 编辑器或文本编辑器编辑新创建的文章文件,添加您的内容。 7. 预览博客: 使用以下命令启动本地服务器并预览博客: ```shell hexo server ``` 在浏览器中访问 `http://localhost:4000` 即可查看您的博客。 8. 部署博客: 当您准备好将博客部署到服务器或静态托管平台时,可以使用以下命令生成静态文件并部署: ```shell hexo generate hexo deploy ``` 请注意,部署步骤可能因您选择的部署方式而有所不同。您可以将博客部署到 GitHub Pages、Netlify 或其他托管平台,具体步骤请参考 Hexo 文档或所选托管平台的文档。 希望这些步骤对您有所帮助!如有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Whitemeen太白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值