vue 配置 title、keywords、description、icon

修改title、keywords、description

因为title、keywords、description会随着页面变化而变化的。可以写一个公共的方法,在需要的时候直接调用就额可以了

/**
   * 配置 seo
   * @param title 网页标题
   * @param key 关键词
   * @param des 描述
   */
  setMeta:function (title,key,des){
    let  title_default = "网站名称";
    if(title){
      title_default += title;
    }
    document.title = title_default;
    document.querySelector("meta[name='keywords']").setAttribute('content', key);
    document.querySelector("meta[name='description']").setAttribute('content', des);
  }

配置icon

1、首先在iconfont新建项目,在我的项目中找到创建的这个项目。有一个font class。点击它会生成icon的class链接。点击复制复制链接。
2、如果只是本地配置,则在head中添加<link rel="stylesheet" href="font class链接">,如果是通过后台接口来配置。则在head中添加<link rel="stylesheet" name="iconfont" href="">。name是标识符必须存在。通过下列代码注入

document.querySelector("link[name='iconfont']").setAttribute('href', 'font class 链接');
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 字体文件动态配置 这里需要用到原生javascript中的document,querySelector,setAt...
    白衣诗人阅读 2,521评论 0 0
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,332评论 2 66
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    从小就好看阅读 241评论 0 0
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    前端陈陈陈阅读 282评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,588评论 1 45