Nuxt.js头部魔法：轻松自定义页面元信息，提升用户体验
摘要：“Nuxt.js头部魔法：轻松自定义页面元信息，提升用户体验”介绍如何使用useHead函数在Nuxt应用中编程式设置页面头部信息，包括、<meta>、<link>等标签，以增强SEO和用户体验。通过实例展示了如何配置静态和动态标题、元数据、样式、脚本等，使页面更符合SEO标准和个性化需求。
</div>
<a href="https://blog.cmdragon.cn/posts/d5370e880eaec9085a153caba4961676/" class="inline-flex items-center bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-4 py-2 rounded-lg hover:shadow-md transition-all duration-300 transform hover:translate-y-[-2px]">
阅读更多
<iconify-icon icon="mdi:arrow-right" class="ml-1" width="16" height="16"></iconify-icon>
</a>
</div>
</article>
<article class="bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
<div class="p-6">
<h2 class="text-2xl font-bold mb-3">
<a href="https://blog.cmdragon.cn/posts/9df3c2f23696d525e532c8f2e1f84cb6/" class="text-gray-900 dark:text-white hover:text-primary dark:hover:text-primary transition-colors duration-200 hover:underline decoration-blue-500 decoration-2 underline-offset-2">
Django与前端框架协作开发实战：高效构建现代Web应用
</a>
</h2>
<div class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400 mb-4 gap-3">
<span class="flex items-center bg-gray-100 dark:bg-gray-700 px-3 py-1.5 rounded-full">
<iconify-icon icon="mdi:calendar" class="mr-1" width="16" height="16"></iconify-icon>
2024-05-22
</span>
<span class="flex items-center bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300 px-3 py-1.5 rounded-full">
<iconify-icon icon="mdi:folder" class="mr-1" width="16" height="16"></iconify-icon>
<a href="/categories/%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91" class="hover:text-primary transition-colors">
后端开发
</a>
</span>
<span class="flex items-center bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-300 px-3 py-1.5 rounded-full">
<iconify-icon icon="mdi:tag" class="mr-1" width="16" height="16"></iconify-icon>
<a href="/tags/DjangoREST" class="hover:text-primary">
DjangoREST
</a>
,
<a href="/tags/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6" class="hover:text-primary">
前端框架
</a>
,
<a href="/tags/SSR%E6%B8%B2%E6%9F%93" class="hover:text-primary">
SSR渲染
</a>
,
<a href="/tags/SPA%E8%B7%AF%E7%94%B1" class="hover:text-primary">
SPA路由
</a>
,
<a href="/tags/SEO%E4%BC%98%E5%8C%96" class="hover:text-primary">
SEO优化
</a>
,
<a href="/tags/%E7%BB%84%E4%BB%B6%E5%BA%93%E9%9B%86%E6%88%90" class="hover:text-primary">
组件库集成
</a>
,
<a href="/tags/%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86" class="hover:text-primary">
状态管理
</a>
</span>
</div>
<div class="text-gray-700 dark:text-gray-300 mb-4 bg-gray-50 dark:bg-gray-700/50 p-4 rounded-lg border-l-4 border-blue-500 dark:border-blue-600">
<img src="https://static.cmdragon.cn/blog/images/2024_05_22 20_14_41.png@blog" title="2024_05_22 20_14_41.png" alt="2024_05_22 20_14_41.png"/>
<h2 id="第1章简介"><strong>第1章：简介</strong></h2>
<h3 id="11-django简介"><strong>1.1 Django简介</strong></h3>
<p>Django是一个高级的Python
Web框架，它鼓励快速开发和干净、实用的设计。由经验丰富的开发者构建，它解决了Web开发中的许多麻烦，因此你可以专注于编写应用而无需重新发明轮子。Django遵循MTV（模型-模板-视图）设计模式，它类似于MVC（模型-视图-控制器），但略有不同。</p>
</div>
<a href="https://blog.cmdragon.cn/posts/9df3c2f23696d525e532c8f2e1f84cb6/" class="inline-flex items-center bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-4 py-2 rounded-lg hover:shadow-md transition-all duration-300 transform hover:translate-y-[-2px]">
阅读更多
<iconify-icon icon="mdi:arrow-right" class="ml-1" width="16" height="16"></iconify-icon>
</a>
</div>
</article>
</div>
<div class="mt-8">
</div>
</div>
</main>
<footer class="bg-gradient-to-b from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 shadow-inner py-10 mt-12 border-t border-gray-200 dark:border-gray-700">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<div>
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white flex items-center">
<div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-1.5 rounded text-white mr-2">
<iconify-icon icon="mdi:information" width="16" height="16"></iconify-icon>
</div>
关于本站
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
cmdragon's Blog 是一个专注于编程和技术分享的个性化网站，旨在为编程爱好者、学习者和从业者提供全面的前端开发、后端开发以及全栈开发学习资源。
</p>
<div class="flex space-x-3">
<a href="https://github.com/amd794" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300 bg-gray-100 dark:bg-gray-700 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600" aria-label="GitHub" tabindex="0" target="_blank" rel="noopener noreferrer">
<iconify-icon icon="mdi:github" width="18" height="18"></iconify-icon>
</a>
<button id="wechat-btn" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300 bg-gray-100 dark:bg-gray-700 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600" aria-label="微信" tabindex="0">
<iconify-icon icon="mdi:wechat" width="18" height="18"></iconify-icon>
</button>
<a href="mailto:support@cmdragon.cn" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300 bg-gray-100 dark:bg-gray-700 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600" aria-label="Email" tabindex="0">
<iconify-icon icon="mdi:email" width="18" height="18"></iconify-icon>
</a>
<a href="/index.xml" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300 bg-gray-100 dark:bg-gray-700 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600" aria-label="RSS" tabindex="0">
<iconify-icon icon="mdi:rss" width="18" height="18"></iconify-icon>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white flex items-center">
<div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-1.5 rounded text-white mr-2">
<iconify-icon icon="mdi:link-variant" width="16" height="16"></iconify-icon>
</div>
快速链接
</h3>
<ul class="space-y-2">
<li>
<a href="https://movie.cmdragon.cn/" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300 flex items-center" target="_blank" rel="noopener noreferrer">
<iconify-icon icon="mdi:chevron-right" class="mr-2 text-primary" width="16" height="16"></iconify-icon>
高清影视库
</a>
</li>
<li>
<a href="https://comic.cmdragon.cn/" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300 flex items-center" target="_blank" rel="noopener noreferrer">
<iconify-icon icon="mdi:chevron-right" class="mr-2 text-primary" width="16" height="16"></iconify-icon>
精选漫画阅读
</a>
</li>
<li>
<a href="https://tools.cmdragon.cn/zh" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300 flex items-center" target="_blank" rel="noopener noreferrer">
<iconify-icon icon="mdi:chevron-right" class="mr-2 text-primary" width="16" height="16"></iconify-icon>
实用在线工具
</a>
</li>
<li>
<a href="https://hot-movie.cmdragon.cn/" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors duration-300 flex items-center" target="_blank" rel="noopener noreferrer">
<iconify-icon icon="mdi:chevron-right" class="mr-2 text-primary" width="16" height="16"></iconify-icon>
热映影视推荐
</a>
</li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white flex items-center">
<div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-1.5 rounded text-white mr-2">
<iconify-icon icon="mdi:tag-multiple" width="16" height="16"></iconify-icon>
</div>
热门标签
</h3>
<div class="flex flex-wrap gap-2">
<a href="https://blog.cmdragon.cn/tags/FastAPI/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#FastAPI <span class="text-xs opacity-70">(85)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/Nuxt/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#Nuxt <span class="text-xs opacity-70">(68)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/%E9%92%A9%E5%AD%90/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#钩子 <span class="text-xs opacity-70">(62)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#性能优化 <span class="text-xs opacity-70">(47)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/Nuxt.js/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#Nuxt.js <span class="text-xs opacity-70">(43)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#生命周期 <span class="text-xs opacity-70">(38)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/Nuxt3/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#Nuxt3 <span class="text-xs opacity-70">(37)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#错误处理 <span class="text-xs opacity-70">(32)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/%E7%BB%84%E4%BB%B6/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#组件 <span class="text-xs opacity-70">(29)</span>
</a>
<a href="https://blog.cmdragon.cn/tags/%E6%95%B0%E6%8D%AE%E5%BA%93%E7%AE%A1%E7%90%86/" class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-primary hover:text-white transition-colors duration-300">
#数据库管理 <span class="text-xs opacity-70">(27)</span>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-700 pt-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-center md:text-left mb-4 md:mb-0">
<p class="text-sm text-gray-600 dark:text-gray-400">
© 2023 cmdragon's Blog. 保留所有权利.
</p>
<p class="text-xs text-gray-500 dark:text-gray-500 mt-1">
由 <a href="https://gohugo.io/" class="hover:text-primary transition-colors duration-300" target="_blank" rel="noopener noreferrer">Hugo</a> 强力驱动
</p>
</div>
<button id="back-to-top" class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white p-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105 flex items-center text-sm font-medium">
<iconify-icon icon="mdi:arrow-up" class="mr-1" width="16" height="16"></iconify-icon>
返回顶部
</button>
</div>
</div>
</div>
<div id="wechat-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden" onclick="this.classList.add('hidden')">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-xl max-w-sm w-full relative" onclick="event.stopPropagation()">
<button class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" onclick="document.getElementById('wechat-modal').classList.add('hidden')">
<iconify-icon icon="mdi:close" width="20" height="20"></iconify-icon>
</button>
<h4 class="text-center font-medium text-gray-800 dark:text-gray-200 mb-4">扫码关注公众号</h4>
<div class="flex justify-center">
<img src="/images/wechat_qrcode.webp" alt="微信二维码" class="w-64 h-64 object-contain">
</div>
</div>
</div>
</footer>
<script>
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.scrollY > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100', 'visible');
} else {
backToTopButton.classList.add('opacity-0', 'invisible');
backToTopButton.classList.remove('opacity-100', 'visible');
}
});
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
document.getElementById('wechat-btn').addEventListener('click', function() {
document.getElementById('wechat-modal').classList.remove('hidden');
});
document.getElementById('wechat-btn').addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
document.getElementById('wechat-modal').classList.remove('hidden');
}
});
</script>
</div>
<script>
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
<script src="/js/code-highlight.js"></script>
<script src="/js/advanced-render.js"></script>
<div id="site-search-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
<div id="site-search-backdrop" class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>
<div class="relative bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-xl max-w-lg w-full mx-4 z-10 transform transition-all duration-300 scale-95 opacity-0 border border-gray-100 dark:border-gray-700">
<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium flex items-center">
<div class="bg-gradient-to-br from-blue-500 to-indigo-600 p-1.5 rounded text-white mr-2 shadow-sm">
<iconify-icon icon="mdi:magnify" width="16" height="16"></iconify-icon>
</div>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600">站内搜索</span>
</h3>
<button id="site-search-close" class="text-gray-400 hover:text-gray-500 focus:outline-none transition-colors duration-200 p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full">
<iconify-icon icon="mdi:close" width="20" height="20"></iconify-icon>
</button>
</div>
<div class="p-6">
<form id="site-search-form" action="/search/" method="get">
<div class="relative">
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-blue-500 transition-all duration-300 shadow-sm hover:shadow-md">
<span class="pl-4 text-gray-400">
<iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
</span>
<input
type="text"
id="site-search-input"
name="q"
placeholder="输入关键词搜索..."
class="w-full px-3 py-3 border-none focus:outline-none bg-transparent text-gray-800 dark:text-gray-200"
aria-label="搜索内容"
tabindex="0"
>
<button
type="submit"
class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-4 py-3 hover:shadow-md transition-all duration-300 flex items-center"
aria-label="搜索"
tabindex="0">
<span class="mr-1 hidden sm:inline">搜索</span>
<iconify-icon icon="mdi:arrow-right" width="18" height="18"></iconify-icon>
</button>
</div>
</div>
</form>
<div class="mt-6 text-sm text-gray-500 dark:text-gray-400 bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-100 dark:border-blue-800/30 flex items-start">
<div class="bg-blue-100 dark:bg-blue-800/50 p-1.5 rounded-full mr-3 mt-0.5">
<iconify-icon icon="mdi:information" width="16" height="16" class="text-blue-500 dark:text-blue-300"></iconify-icon>
</div>
<div>
<p class="mb-1">快捷键提示:</p>
<ul class="space-y-1">
<li class="flex items-center">
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-xs font-mono mr-2">/</span>
<span>打开搜索</span>
</li>
<li class="flex items-center">
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-xs font-mono mr-2">Esc</span>
<span>关闭搜索</span>
</li>
<li class="flex items-center">
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-xs font-mono mr-2">Enter</span>
<span>提交搜索</span>
</li>
</ul>
</div>
</div>
<div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
<div class="flex flex-wrap gap-2">
<a href="/tags/" class="bg-gradient-to-r hover:bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 text-gray-700 dark:text-gray-300 px-3 py-1.5 rounded-lg text-sm border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-md flex items-center">
<iconify-icon icon="mdi:tag-multiple" class="mr-1" width="16" height="16"></iconify-icon>
标签
</a>
<a href="/categories/" class="bg-gradient-to-r hover:bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 text-gray-700 dark:text-gray-300 px-3 py-1.5 rounded-lg text-sm border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-md flex items-center">
<iconify-icon icon="mdi:folder-multiple" class="mr-1" width="16" height="16"></iconify-icon>
分类
</a>
<a href="/archives/" class="bg-gradient-to-r hover:bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 text-gray-700 dark:text-gray-300 px-3 py-1.5 rounded-lg text-sm border border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-300 transform hover:-translate-y-1 hover:shadow-md flex items-center">
<iconify-icon icon="mdi:archive" class="mr-1" width="16" height="16"></iconify-icon>
归档
</a>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('site-search-modal');
const modalContent = modal.querySelector('div[class*="rounded-xl"]');
const backdrop = document.getElementById('site-search-backdrop');
const closeButton = document.getElementById('site-search-close');
const searchForm = document.getElementById('site-search-form');
const searchInput = document.getElementById('site-search-input');
window.openSiteSearch = function() {
modal.classList.remove('hidden');
document.body.classList.add('overflow-hidden');
setTimeout(() => {
modal.classList.add('opacity-100');
modalContent.classList.remove('scale-95', 'opacity-0');
modalContent.classList.add('scale-100', 'opacity-100');
searchInput.focus();
}, 10);
};
function closeSiteSearch() {
modal.classList.remove('opacity-100');
modalContent.classList.remove('scale-100', 'opacity-100');
modalContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
modal.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
}, 300);
}
if (backdrop) {
backdrop.addEventListener('click', closeSiteSearch);
}
if (closeButton) {
closeButton.addEventListener('click', closeSiteSearch);
}
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
closeSiteSearch();
}
if (e.key === '/' && modal.classList.contains('hidden') && document.activeElement.tagName !== 'INPUT') {
e.preventDefault();
openSiteSearch();
}
});
modalContent.addEventListener('click', (e) => {
e.stopPropagation();
});
});
</script>
</body>
</html>