Vue Bootstrap作品集页作品标题添加外部超链接实现方法

两种实现方式均不破坏现有多语言配置、原有数据渲染逻辑，可按需选择。

方案1：通用可扩展方案（推荐） #

适合后续其他作品也可能需要添加外链的场景，复用性更强：

• 第一步：扩展作品数据结构，给id=18的作品项新增可选外链字段，不影响其他无外链的存量作品

// main.js 中id为18的作品项修改后如下
{
  id: 18,
  url: 'single-portfolio.html?id=18',
  imgUrl: '../assets/images/port19.png',
  // 新增外部链接字段
  externalLink: 'https://ipaddresstrackerrzt.mdbgo.io/',
  title: {
    en: 'Address Tracker App',
    ar: 'هنا عنوان المشروع 18'
  },
  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'
  }
}

• 第二步：修改详情页标题渲染逻辑，判断当前作品存在外链时渲染a标签，否则保持原有纯文本渲染，完全兼容存量内容

<!-- singleportfolio.html 中原有h2标签替换为以下代码 -->
<h2>
  <a 
    v-if="getSinglePortfolioItem.externalLink" 
    :href="getSinglePortfolioItem.externalLink"
    target="_blank"
    rel="noopener noreferrer"
  >
    {{ getSinglePortfolioItem.title.en }}
  </a>
  <template v-else>
    {{ getSinglePortfolioItem.title.en }}
  </template>
</h2>

外部链接添加target="_blank"和rel="noopener noreferrer"是为了避免新页面获取原页面权限，属于前端安全标配写法。后续切换多语言时，只需将插值中的.en替换为对应语言标识即可，不影响现有多语言逻辑。

方案2：单作品快速实现（无需修改数据层） #

如果仅需要给id=18的作品加外链，没有后续扩展需求，可直接在模板层做判断，无需修改main.js数据：

<!-- singleportfolio.html 中原有h2标签替换为以下代码 -->
<h2>
  <a 
    v-if="getSinglePortfolioItem.id === 18" 
    href="https://ipaddresstrackerrzt.mdbgo.io/"
    target="_blank"
    rel="noopener noreferrer"
  >
    {{ getSinglePortfolioItem.title.en }}
  </a>
  <template v-else>
    {{ getSinglePortfolioItem.title.en }}
  </template>
</h2>

样式适配（可选） #

如果需要外链样式和原有标题视觉保持一致，可添加以下CSS代码：

.text-box-block h2 a {
  color: inherit;
  text-decoration: none;
}
.text-box-block h2 a:hover {
  text-decoration: underline;
}

内容的提问来源于stack exchange，提问作者Tommaso RZT