Spaces:

duqing026
/

seo-schema-studio

Sleeping

App Files Files Community

duqing2026 commited on about 1 month ago

Commit

eb9bbc6

0 Parent(s):

Initial commit

Browse files

Files changed (4) hide show

Dockerfile +11 -0
README.md +39 -0
app.py +15 -0
templates/index.html +531 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,11 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY . /app
+RUN pip install flask
+EXPOSE 7860
+CMD ["python", "app.py"]

README.md ADDED Viewed

	@@ -0,0 +1,39 @@

+---
+title: SEO 结构化数据工坊
+emoji: 🔍
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+short_description: 专业的 JSON-LD 结构化数据生成工具，助力网站 SEO 排名。
+---
+# SEO 结构化数据工坊 (SEO Schema Studio)
+这是一个简单而强大的工具，帮助站长、SEO 专员和开发者快速生成符合 Google 标准的 JSON-LD 结构化数据（Schema Markup）。
+## 功能特点
+- **多类型支持**：支持文章（Article）、产品（Product）、常见问题（FAQPage）、面包屑（BreadcrumbList）、活动（Event）等核心 Schema 类型。
+- **可视化编辑**：无需编写代码，通过直观的表单输入信息。
+- **实时预览**：输入时实时生成 JSON-LD 代码。
+- **一键复制**：快速复制生成的代码到剪贴板。
+- **验证链接**：提供 Google Rich Results Test 验证入口。
+- **完全本地化**：中文界面，贴合国内用户习惯。
+## 如何使用
+1. 选择左侧的 Schema 类型。
+2. 在表单中填写相应的信息（如标题、日期、价格等）。
+3. 右侧会自动生成 JSON-LD 代码。
+4. 点击“复制”按钮，将代码粘贴到您网站的 HTML `<head>` 或 `<body>` 部分。
+## 技术栈
+- **Backend**: Flask (Python)
+- **Frontend**: Vue 3, Tailwind CSS
+- **Deployment**: Docker, Hugging Face Spaces
+## 许可证
+MIT License

app.py ADDED Viewed

	@@ -0,0 +1,15 @@

+from flask import Flask, render_template, send_from_directory
+import os
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

templates/index.html ADDED Viewed

	@@ -0,0 +1,531 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SEO 结构化数据工坊 (Schema Studio)</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        .code-preview { font-family: 'Menlo', 'Monaco', 'Courier New', monospace; }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    </style>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        brand: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col">
+{% raw %}
+<div id="app" class="flex-grow flex flex-col">
+    <!-- Navbar -->
+    <nav class="bg-white border-b border-slate-200 sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center gap-3">
+                    <div class="bg-brand-500 text-white w-8 h-8 rounded-lg flex items-center justify-center font-bold text-lg">
+                        <i class="fa-solid fa-code"></i>
+                    </div>
+                    <span class="font-bold text-xl tracking-tight">SEO 结构化数据工坊</span>
+                </div>
+                <div class="flex items-center gap-4">
+                    <a href="https://github.com/duqing2026" target="_blank" class="text-slate-500 hover:text-brand-600 transition">
+                        <i class="fa-brands fa-github text-xl"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
+            <!-- Sidebar / Selector -->
+            <div class="lg:col-span-3 space-y-6">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+                    <div class="p-4 bg-slate-50 border-b border-slate-200 font-semibold text-slate-700">
+                        选择 Schema 类型
+                    </div>
+                    <div class="p-2 space-y-1">
+                        <button v-for="type in schemaTypes" :key="type.id"
+                            @click="currentType = type.id"
+                            :class="['w-full text-left px-4 py-3 rounded-lg flex items-center gap-3 transition-colors',
+                                currentType === type.id ? 'bg-brand-50 text-brand-700 font-medium' : 'hover:bg-slate-50 text-slate-600']">
+                            <i :class="['fa-fw', type.icon]"></i>
+                            {{ type.name }}
+                        </button>
+                    </div>
+                </div>
+                <div class="bg-gradient-to-br from-brand-500 to-indigo-600 rounded-xl p-6 text-white shadow-lg">
+                    <h3 class="font-bold text-lg mb-2">为什么需要 Schema?</h3>
+                    <p class="text-brand-100 text-sm leading-relaxed">
+                        Schema 标记（JSON-LD）帮助搜索引擎更好地理解您的内容，从而在搜索结果中展示富媒体摘要（如星级评分、价格、FAQ），显著提高点击率（CTR）。
+                    </p>
+                </div>
+            </div>
+            <!-- Form Area -->
+            <div class="lg:col-span-5 space-y-6">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200">
+                    <div class="p-6 border-b border-slate-200 flex justify-between items-center">
+                        <h2 class="text-xl font-bold text-slate-800">
+                            {{ getSchemaName(currentType) }} 配置
+                        </h2>
+                        <button @click="resetForm" class="text-sm text-slate-500 hover:text-red-500 transition">
+                            <i class="fa-solid fa-rotate-right mr-1"></i> 重置
+                        </button>
+                    </div>
+                    <div class="p-6 space-y-6">
+                        <!-- Dynamic Forms -->
+                        <!-- Article Form -->
+                        <div v-if="currentType === 'Article'" class="space-y-4">
+                            <form-input label="文章标题 (Headline)" v-model="forms.article.headline" placeholder="例如：2024年最值得购买的智能手机"></form-input>
+                            <form-input label="封面图片 URL" v-model="forms.article.image" placeholder="https://example.com/image.jpg"></form-input>
+                            <div class="grid grid-cols-2 gap-4">
+                                <form-input label="作者姓名" v-model="forms.article.authorName" placeholder="张三"></form-input>
+                                <form-input label="发布组织" v-model="forms.article.publisherName" placeholder="科技日报"></form-input>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4">
+                                <form-input type="date" label="发布日期" v-model="forms.article.datePublished"></form-input>
+                                <form-input type="date" label="修改日期" v-model="forms.article.dateModified"></form-input>
+                            </div>
+                            <form-textarea label="文章摘要" v-model="forms.article.description" placeholder="文章的简短描述..."></form-textarea>
+                        </div>
+                        <!-- Product Form -->
+                        <div v-if="currentType === 'Product'" class="space-y-4">
+                            <form-input label="产品名称" v-model="forms.product.name" placeholder="iPhone 15 Pro"></form-input>
+                            <form-input label="产品图片 URL" v-model="forms.product.image" placeholder="https://..."></form-input>
+                            <form-textarea label="产品描述" v-model="forms.product.description"></form-textarea>
+                            <div class="grid grid-cols-2 gap-4">
+                                <form-input label="品牌" v-model="forms.product.brand" placeholder="Apple"></form-input>
+                                <form-input label="SKU" v-model="forms.product.sku" placeholder="IP15P-256"></form-input>
+                            </div>
+                            <div class="p-4 bg-slate-50 rounded-lg border border-slate-200 space-y-4">
+                                <h4 class="font-medium text-sm text-slate-500 uppercase tracking-wider">价格信息</h4>
+                                <div class="grid grid-cols-3 gap-4">
+                                    <form-input label="价格" type="number" v-model="forms.product.price" placeholder="9999"></form-input>
+                                    <form-input label="货币代码" v-model="forms.product.priceCurrency" placeholder="CNY"></form-input>
+                                    <div class="flex flex-col gap-1">
+                                        <label class="block text-sm font-medium text-slate-700">库存状态</label>
+                                        <select v-model="forms.product.availability" class="w-full rounded-lg border-slate-300 shadow-sm focus:border-brand-500 focus:ring-brand-500 py-2.5 px-3 border bg-white">
+                                            <option value="InStock">有货</option>
+                                            <option value="OutOfStock">缺货</option>
+                                            <option value="PreOrder">预售</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="p-4 bg-slate-50 rounded-lg border border-slate-200 space-y-4">
+                                <h4 class="font-medium text-sm text-slate-500 uppercase tracking-wider">评分 (可选)</h4>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <form-input label="平均评分 (0-5)" type="number" step="0.1" v-model="forms.product.ratingValue" placeholder="4.8"></form-input>
+                                    <form-input label="评论数量" type="number" v-model="forms.product.reviewCount" placeholder="1024"></form-input>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- FAQ Form -->
+                        <div v-if="currentType === 'FAQPage'" class="space-y-4">
+                            <div v-for="(item, index) in forms.faq.questions" :key="index" class="p-4 bg-slate-50 rounded-lg border border-slate-200 relative group">
+                                <button @click="removeFaqItem(index)" class="absolute top-2 right-2 text-slate-400 hover:text-red-500 p-1 opacity-0 group-hover:opacity-100 transition">
+                                    <i class="fa-solid fa-trash"></i>
+                                </button>
+                                <div class="space-y-3">
+                                    <form-input :label="'问题 #' + (index + 1)" v-model="item.question" placeholder="如何退款？"></form-input>
+                                    <form-textarea label="回答" v-model="item.answer" placeholder="您可以在订单页面点击申请退款..."></form-textarea>
+                                </div>
+                            </div>
+                            <button @click="addFaqItem" class="w-full py-3 border-2 border-dashed border-brand-200 text-brand-600 rounded-lg hover:bg-brand-50 hover:border-brand-300 transition font-medium">
+                                <i class="fa-solid fa-plus mr-2"></i> 添加问答
+                            </button>
+                        </div>
+                        <!-- Breadcrumb Form -->
+                        <div v-if="currentType === 'BreadcrumbList'" class="space-y-4">
+                            <div v-for="(item, index) in forms.breadcrumb.items" :key="index" class="flex items-end gap-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
+                                <div class="flex-grow space-y-3">
+                                    <div class="grid grid-cols-2 gap-3">
+                                        <form-input label="名称" v-model="item.name" placeholder="首页"></form-input>
+                                        <form-input label="URL" v-model="item.item" placeholder="https://example.com"></form-input>
+                                    </div>
+                                </div>
+                                <button @click="removeBreadcrumbItem(index)" class="mb-3 text-slate-400 hover:text-red-500 p-2" title="删除">
+                                    <i class="fa-solid fa-trash"></i>
+                                </button>
+                            </div>
+                            <button @click="addBreadcrumbItem" class="w-full py-3 border-2 border-dashed border-brand-200 text-brand-600 rounded-lg hover:bg-brand-50 hover:border-brand-300 transition font-medium">
+                                <i class="fa-solid fa-plus mr-2"></i> 添加层级
+                            </button>
+                        </div>
+                        <!-- Event Form -->
+                        <div v-if="currentType === 'Event'" class="space-y-4">
+                            <form-input label="活动名称" v-model="forms.event.name" placeholder="2024 开发者大会"></form-input>
+                            <div class="grid grid-cols-2 gap-4">
+                                <form-input type="datetime-local" label="开始时间" v-model="forms.event.startDate"></form-input>
+                                <form-input type="datetime-local" label="结束时间" v-model="forms.event.endDate"></form-input>
+                            </div>
+                            <div class="p-4 bg-slate-50 rounded-lg border border-slate-200 space-y-4">
+                                <h4 class="font-medium text-sm text-slate-500 uppercase tracking-wider">地点信息</h4>
+                                <form-input label="地点名称" v-model="forms.event.locationName" placeholder="国际会展中心"></form-input>
+                                <form-input label="详细地址" v-model="forms.event.address" placeholder="北京市朝阳区..."></form-input>
+                            </div>
+                            <form-input label="活动图片 URL" v-model="forms.event.image" placeholder="https://..."></form-input>
+                            <form-textarea label="活动描述" v-model="forms.event.description"></form-textarea>
+                            <div class="p-4 bg-slate-50 rounded-lg border border-slate-200 space-y-4">
+                                <h4 class="font-medium text-sm text-slate-500 uppercase tracking-wider">票务信息 (可选)</h4>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <form-input label="价格" type="number" v-model="forms.event.price" placeholder="299"></form-input>
+                                    <form-input label="货币" v-model="forms.event.priceCurrency" placeholder="CNY"></form-input>
+                                </div>
+                                <form-input label="购票链接" v-model="forms.event.url" placeholder="https://..."></form-input>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Preview Area -->
+            <div class="lg:col-span-4 space-y-6">
+                <div class="bg-slate-900 rounded-xl shadow-lg overflow-hidden flex flex-col h-[600px] sticky top-24">
+                    <div class="bg-slate-800 px-4 py-3 flex justify-between items-center border-b border-slate-700">
+                        <span class="text-slate-300 text-sm font-mono"><i class="fa-solid fa-code mr-2"></i>JSON-LD 预览</span>
+                        <div class="flex gap-2">
+                            <button @click="copyCode" class="text-xs bg-slate-700 hover:bg-slate-600 text-white px-3 py-1.5 rounded transition">
+                                <i class="fa-regular fa-copy mr-1"></i> {{ copyBtnText }}
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex-grow p-4 overflow-auto bg-slate-900 custom-scrollbar">
+                        <pre class="code-preview text-sm text-green-400 whitespace-pre-wrap break-all">{{ generatedJson }}</pre>
+                    </div>
+                    <div class="bg-slate-800 p-4 border-t border-slate-700">
+                        <a :href="googleTestUrl" target="_blank" class="block w-full text-center bg-brand-600 hover:bg-brand-500 text-white font-medium py-3 rounded-lg transition shadow-lg shadow-brand-500/20">
+                            <i class="fa-brands fa-google mr-2"></i> 在 Google 中验证
+                        </a>
+                        <p class="text-slate-500 text-xs text-center mt-2">
+                            将代码粘贴到 &lt;head&gt; 或 &lt;body&gt; 标签中
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+<!-- Reusable Input Component Template -->
+<template id="form-input-template">
+    <div class="flex flex-col gap-1">
+        <label v-if="label" class="block text-sm font-medium text-slate-700">{{ label }}</label>
+        <input
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            v-bind="$attrs"
+            class="w-full rounded-lg border-slate-300 shadow-sm focus:border-brand-500 focus:ring-brand-500 py-2.5 px-3 border transition-colors"
+        >
+    </div>
+</template>
+<template id="form-textarea-template">
+    <div class="flex flex-col gap-1">
+        <label v-if="label" class="block text-sm font-medium text-slate-700">{{ label }}</label>
+        <textarea
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            v-bind="$attrs"
+            rows="3"
+            class="w-full rounded-lg border-slate-300 shadow-sm focus:border-brand-500 focus:ring-brand-500 py-2.5 px-3 border transition-colors"
+        ></textarea>
+    </div>
+</template>
+<script>
+const { createApp, ref, computed, reactive } = Vue;
+// Input Component
+const FormInput = {
+    template: '#form-input-template',
+    props: ['label', 'modelValue'],
+    emits: ['update:modelValue']
+}
+// Textarea Component
+const FormTextarea = {
+    template: '#form-textarea-template',
+    props: ['label', 'modelValue'],
+    emits: ['update:modelValue']
+}
+createApp({
+    components: {
+        'form-input': FormInput,
+        'form-textarea': FormTextarea
+    },
+    setup() {
+        const currentType = ref('Article');
+        const copyBtnText = ref('复制');
+        const schemaTypes = [
+            { id: 'Article', name: '文章 (Article)', icon: 'fa-regular fa-newspaper' },
+            { id: 'Product', name: '产品 (Product)', icon: 'fa-solid fa-box-open' },
+            { id: 'FAQPage', name: '常见问题 (FAQ)', icon: 'fa-solid fa-circle-question' },
+            { id: 'BreadcrumbList', name: '面包屑 (Breadcrumb)', icon: 'fa-solid fa-route' },
+            { id: 'Event', name: '活动 (Event)', icon: 'fa-regular fa-calendar-days' },
+        ];
+        // Form Data States
+        const forms = reactive({
+            article: {
+                headline: '',
+                image: '',
+                authorName: '',
+                publisherName: '',
+                datePublished: '',
+                dateModified: '',
+                description: ''
+            },
+            product: {
+                name: '',
+                image: '',
+                description: '',
+                brand: '',
+                sku: '',
+                price: '',
+                priceCurrency: 'CNY',
+                availability: 'InStock',
+                ratingValue: '',
+                reviewCount: ''
+            },
+            faq: {
+                questions: [
+                    { question: '', answer: '' }
+                ]
+            },
+            breadcrumb: {
+                items: [
+                    { name: '首页', item: 'https://example.com' },
+                    { name: '分类', item: 'https://example.com/category' }
+                ]
+            },
+            event: {
+                name: '',
+                startDate: '',
+                endDate: '',
+                locationName: '',
+                address: '',
+                image: '',
+                description: '',
+                price: '',
+                priceCurrency: 'CNY',
+                url: ''
+            }
+        });
+        // Computed JSON Generation
+        const generatedJson = computed(() => {
+            let schema = {
+                "@context": "https://schema.org",
+                "@type": currentType.value
+            };
+            if (currentType.value === 'Article') {
+                const f = forms.article;
+                if (f.headline) schema.headline = f.headline;
+                if (f.image) schema.image = [f.image];
+                if (f.authorName) {
+                    schema.author = {
+                        "@type": "Person",
+                        "name": f.authorName
+                    };
+                }
+                if (f.publisherName) {
+                    schema.publisher = {
+                        "@type": "Organization",
+                        "name": f.publisherName
+                    };
+                }
+                if (f.datePublished) schema.datePublished = f.datePublished;
+                if (f.dateModified) schema.dateModified = f.dateModified;
+                if (f.description) schema.description = f.description;
+            }
+            else if (currentType.value === 'Product') {
+                const f = forms.product;
+                if (f.name) schema.name = f.name;
+                if (f.image) schema.image = [f.image];
+                if (f.description) schema.description = f.description;
+                if (f.brand) schema.brand = { "@type": "Brand", "name": f.brand };
+                if (f.sku) schema.sku = f.sku;
+                if (f.price) {
+                    schema.offers = {
+                        "@type": "Offer",
+                        "url": "https://example.com/product", // Placeholder
+                        "priceCurrency": f.priceCurrency,
+                        "price": f.price,
+                        "availability": `https://schema.org/${f.availability}`
+                    };
+                }
+                if (f.ratingValue) {
+                    schema.aggregateRating = {
+                        "@type": "AggregateRating",
+                        "ratingValue": f.ratingValue,
+                        "reviewCount": f.reviewCount || "1"
+                    };
+                }
+            }
+            else if (currentType.value === 'FAQPage') {
+                schema.mainEntity = forms.faq.questions
+                    .filter(q => q.question && q.answer)
+                    .map(q => ({
+                        "@type": "Question",
+                        "name": q.question,
+                        "acceptedAnswer": {
+                            "@type": "Answer",
+                            "text": q.answer
+                        }
+                    }));
+            }
+            else if (currentType.value === 'BreadcrumbList') {
+                schema.itemListElement = forms.breadcrumb.items
+                    .filter(item => item.name && item.item)
+                    .map((item, index) => ({
+                        "@type": "ListItem",
+                        "position": index + 1,
+                        "name": item.name,
+                        "item": item.item
+                    }));
+            }
+            else if (currentType.value === 'Event') {
+                const f = forms.event;
+                if (f.name) schema.name = f.name;
+                if (f.startDate) schema.startDate = f.startDate;
+                if (f.endDate) schema.endDate = f.endDate;
+                if (f.image) schema.image = [f.image];
+                if (f.description) schema.description = f.description;
+                if (f.locationName || f.address) {
+                    schema.location = {
+                        "@type": "Place",
+                        "name": f.locationName,
+                        "address": {
+                            "@type": "PostalAddress",
+                            "streetAddress": f.address
+                        }
+                    };
+                }
+                if (f.price) {
+                    schema.offers = {
+                        "@type": "Offer",
+                        "url": f.url,
+                        "price": f.price,
+                        "priceCurrency": f.priceCurrency,
+                        "availability": "https://schema.org/InStock"
+                    };
+                }
+            }
+            return JSON.stringify(schema, null, 2);
+        });
+        const googleTestUrl = computed(() => {
+            // Google Rich Results Test URL with code snippet (Base64 encoded)
+            // Actually Google supports `code` param but it's tricky with length.
+            // Better to just link to the test page, but we can't pre-fill it easily via URL GET param for code snippets (only URLs).
+            // But there is a hack: `https://search.google.com/test/rich-results?code=...` is deprecated or doesn't work well.
+            // Let's just link to the tool.
+            return "https://search.google.com/test/rich-results";
+        });
+        // Methods
+        const getSchemaName = (id) => {
+            return schemaTypes.find(t => t.id === id)?.name;
+        };
+        const addFaqItem = () => {
+            forms.faq.questions.push({ question: '', answer: '' });
+        };
+        const removeFaqItem = (index) => {
+            if (forms.faq.questions.length > 1) {
+                forms.faq.questions.splice(index, 1);
+            }
+        };
+        const addBreadcrumbItem = () => {
+            forms.breadcrumb.items.push({ name: '', item: '' });
+        };
+        const removeBreadcrumbItem = (index) => {
+            if (forms.breadcrumb.items.length > 1) {
+                forms.breadcrumb.items.splice(index, 1);
+            }
+        };
+        const copyCode = () => {
+            navigator.clipboard.writeText(generatedJson.value).then(() => {
+                copyBtnText.value = '已复制!';
+                setTimeout(() => copyBtnText.value = '复制', 2000);
+            });
+        };
+        const resetForm = () => {
+             // Simple reload or reset state manually. Reload is easiest for MVP.
+             if(confirm('确定要重置所有内容吗？')) {
+                 location.reload();
+             }
+        }
+        return {
+            currentType,
+            schemaTypes,
+            forms,
+            generatedJson,
+            googleTestUrl,
+            getSchemaName,
+            addFaqItem,
+            removeFaqItem,
+            addBreadcrumbItem,
+            removeBreadcrumbItem,
+            copyCode,
+            copyBtnText,
+            resetForm
+        };
+    }
+}).mount('#app');
+</script>
+{% endraw %}
+</body>
+</html>