【Vue】vue项目网页标题栏ico小图标修改调整

步骤1:

将logo图片文件复制到public文件夹中
在这里插入图片描述

步骤2:

找到index.html文件,将link标签中的图标路径名favicon.ico改成logo.jpg(png格式同理)

步骤3:

刷新网页,图标更新成功
在这里插入图片描述
在这里插入图片描述

补充

1、logo里面的文字过小不清晰时,建议简化logo,例如:
在这里插入图片描述
在这里插入图片描述

2、图标大小;

  • 一般一个图标文件会同时包含3种大小:
    • 查看方式为平铺的时候是48 x 48。
    • 查看方式为图标的时候是32 x 32。
    • 查看方式为列表的时候是16 x 16。
  • vue项目标题的logo图标大小为32*32px;
    在这里插入图片描述
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2 中生成 Markdown 目录并实现点击跳转可以使用 `markdown-navbar` 插件。 步骤如下: 1. 安装插件 ``` npm install markdown-navbar --save-dev ``` 2. 在 Vue 组件中引入插件 ```javascript import MarkdownIt from 'markdown-it' import MarkdownNavbar from 'markdown-navbar' import 'markdown-navbar/dist/navbar.css' export default { data () { return { md: new MarkdownIt(), navbarHtml: '' } }, mounted () { this.md.renderer.rules.heading_open = (tokens, idx, options, env, self) => { const token = tokens[idx] const level = Number(token.tag.substr(1)) if (level >= 2 && level <= 4) { const title = self.renderInlineAsText(token.children) const slug = title.trim().toLowerCase().replace(/\s+/g, '-') return `<h${level} id="${slug}"><a name="${slug}" class="anchor" href="#${slug}"></a>${title}</h${level}>` } else { return self.renderToken(tokens, idx, options) } } this.navbarHtml = MarkdownNavbar({ source: this.markdownContent, // 目录生成的最小标题级别 level: 2, // 是否在目录中显示标题的序号 showLevel: false, // 是否在目录中显示标题的序号 isChild: false, // 是否在标题中显示锚点链接 // 默认为 true,设置为 false 可以避免与其它锚点冲突 // 如果设置为 false,需要在标题中添加 <a name="your-anchor"></a> 锚点 // 或者在渲染规则中处理 hasAnchor: true, // 是否使用锚点链接 // 如果设置为 false,则点击标题不会跳转 // 默认为 true hasLink: true, // 是否在目录中显示标题的图标 // 默认为 false,设置为 true 可以增加用户体验 showIcon: false, // 是否在目录中显示标题的缩进 // 默认为 true,设置为 false 可以减少目录占用的空间 indent: true, // 是否在目录中显示标题的序号 // 默认为 false,设置为 true 可以提供更好的阅读体验 ordered: false }) } } ``` 3. 在模板中渲染 Markdown 和目录 ```html <template> <div> <div v-html="md.render(markdownContent)" @click="handleClick"></div> <div v-html="navbarHtml"></div> </div> </template> ``` 4. 实现点击跳转 ```javascript methods: { handleClick (event) { if (event.target.nodeName === 'A') { event.preventDefault() const hash = event.target.hash const target = document.querySelector(hash) if (target) { target.scrollIntoView({ behavior: 'smooth' }) } } } } ``` 这样,当用户点击目录中的标题时,就会滚动到对应位置。需要注意的是,由于滚动事件会触发多次,为了避免多次触发滚动,需要在点击事件中添加 `event.preventDefault()` 阻止默认行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值