link[rel=“icon“]

宝拉不想努力了

已于 2022-04-12 15:23:25 修改

阅读量1.1k

点赞数

分类专栏：笔记 Problem 文章标签： javascript

于 2022-04-12 14:39:42 首次发布

本文链接：https://blog.csdn.net/weixin_41056807/article/details/124123614

版权

笔记同时被 2 个专栏收录

37 篇文章

订阅专栏

Problem

31 篇文章

订阅专栏

该博客主要讨论了如何在前端设置站点信息，包括通过API获取站点Logo和名称，并将其应用于页面的favicon和标题。同时，还涉及到根据localStorage的主题设置来调整页面主题。内容涵盖HTML、CSS、JavaScript以及前端开发中的动态数据加载和用户体验优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据层

设置站点信息
setSiteInfo() {
  const url = window.location.host;
  siteApi(url).then((res) => {
    const resData = res || {};
    this.siteInfo.siteLogo = resData.frontEndLogo;
    this.siteInfo.siteName = resData.frontEndName;
    this.siteInfo.siteDefaultName = import.meta.env.VITE_GLOB_APP_TITLE;
    if (resData.frontEndLogo) {
      const linkDom: any = document.querySelector('link[rel="icon"]');
      if (linkDom) linkDom.href = this.siteInfo.siteLogo;
    }
  });
}

视图层

<!DOCTYPE html>
<html lang="zh-cn" id="htmlRoot">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />

    <title><%= title %></title>
    <link rel="icon" href="/favicon.ico" />
    <script>
      this.globalThis || (this.globalThis = this);
    </script>
  </head>
  <body>
    <script>
      (() => {
        var htmlRoot = document.getElementById('htmlRoot');
        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
        if (htmlRoot && theme) {
          htmlRoot.setAttribute('data-theme', theme);
          theme = htmlRoot = null;
        }
      })();
    </script>
    <div id="app">
      
      <div class="app-loading">
        <div class="app-loading-wrap">
        </div>
        <div class="app-loading-title"><%= title %></div>
      </div>
    </div>
    <script src="/resource/omg/omg.min.js"></script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>