Vue动态标题带外链教程

<!-- singleportfolio.html 修改后片段 -->
<div class="text-box-block">
    <!-- ... 其他内容 ... -->
    <h2>
        <a href="https://ipaddresstrackerrzt.mdbgo.io/">
           {{ getSinglePortfolioItem.title.en }}
        </a>
    </h2>
    <p>{{ getSinglePortfolioItem.desc.en }}</p>
    <!-- ... 其他内容 ... -->
</div>

代码解析：

注意事项与最佳实践

1. 新窗口打开链接

为了提升用户体验，通常建议外部链接在新标签页中打开，以避免用户离开您的应用程序。这可以通过添加target="_blank" rel="noopener noreferrer"属性实现：

<h2>
    <a href="https://ipaddresstrackerrzt.mdbgo.io/" target="_blank" rel="noopener noreferrer">
       {{ getSinglePortfolioItem.title.en }}
    </a>
</h2>

• target="_blank"：指示浏览器在新标签页或新窗口中打开链接。
• rel="noopener noreferrer"：这是一个重要的安全和性能实践。
  • noopener：阻止新打开的页面访问原始页面的window.opener属性，防止潜在的钓鱼攻击。
  • noreferrer：阻止浏览器在新打开的页面上发送Referer头，增强用户隐私。

2. 动态外部链接处理

如果每个作品项需要指向不同的外部链接（例如，每个项目都有自己的演示URL），那么您不应该将URL硬编码在模板中。相反，应该将外部链接作为数据的一部分存储起来。

a. 更新数据结构 (main.js 或您的数据源)

在您的作品集数据中（例如 main.js 中 allPortfolioItems 数组的每个对象），为每个项目添加一个 externalLink 属性：

// main.js 片段
{
    id: 18,
    url: 'single-portfolio.html?id=18',
    imgUrl: '../assets/images/port19.png',
    title: {
        en: 'Address Tracker App',
        ar: 'هنا عنوان المشروع 18'
    },
    // 新增 externalLink 属性
    externalLink: 'https://ipaddresstrackerrzt.mdbgo.io/',
    date: {
        en: 'Marzo 2022',
        ar: 'أبريل 2021'
    },
    desc: {
        en: 'Questa applicazione permette di rilevare la geolocalizzazione degli indirizzi IP. Inserendo nel campo search un indirizzo IP ci permette di rilevare su una mappa mondiale la posizione del sudetto indirizzo. Lasciando vuoto il campo `search` e premendo solamente il pulsante nero con la freccia, rileva il nostro IP danoci anche la nostra posizione. E` stata sviluppata con Vue 3, Tailwind CSS & Leaflet.js',
        // ...
    }
},
// ... 其他作品项

b. 在模板中使用动态链接

然后，在您的Vue模板中，使用Vue的v-bind指令（缩写为:）来动态绑定href属性：

<h2>
    <a :href="getSinglePortfolioItem.externalLink" target="_blank" rel="noopener noreferrer">
       {{ getSinglePortfolioItem.title.en }}
    </a>
</h2>

这里，:href="getSinglePortfolioItem.externalLink" 会根据当前作品项的数据动态设置链接的URL。

3. 样式与可访问性

• 样式： 确保链接在视觉上与普通文本有所区别（例如，通过颜色、下划线），以便用户清晰地识别它是可点击的。您可以使用CSS为h2 a选择器定义样式。
• 可访问性： 链接文本应具有描述性，即使脱离上下文也能让用户理解链接的目标。对于本例，作品标题本身通常就足够清晰。

总结