javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板-6ren

javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板

转载作者：太空宇宙更新时间：2023-11-03 20:22:15

32

4

我正在构建一个 Javascript 交互性有限的 Django 应用程序，并且正在研究如何将 Vue 模板与 Django 模板合并以实现相同的内容。

想象一个无限滚动的页面，其中 SEO 非常重要。 Django 非常擅长解决这个问题，因为它根据定义是一个服务器端框架。但是，如果这两种技术都需要呈现相同的内容，那么如何丰富 Django 使用 Vue 呈现的页面呢？在这种情况下，Django 将为 SEO 爬虫进行渲染，在 Vue 接管之前，Vue “水合”这些组件并使它们具有交互性。发生这种情况后，后续使用 AJAX 异步获取的内容也将使用 Vue 进行模板化。

我做了一些研究，但没有找到足够的信息来解决这个问题:

https://vsupalov.com/vue-js-in-django-template/下面的代码示例的某些部分是基于
https://medium.com/quick-code/crud-app-using-vue-js-and-django-516edf4e4217其中概述了 django 和 vue 的结合似乎可以很好地协同工作
https://medium.com/@rodrigosmaniotto/integrating-django-and-vuejs-with-vue-cli-3-and-webpack-loader-145c3b98501a

我没有感觉到这些来源正在谈论 SEO，或者更确切地说，如果它们是，他们仅在内容不属于 SEO 的情况下使用 Vue 模板(例如打开模式)。

下面是这两种技术以不同方式呈现相同内容的初步想法。由于 Vue 有 delimiter 选项，我觉得也许有一种方法可以将两者结合起来(以避免模板语法的冲突)。

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Django and Vue test</title>
</head>
<body>

{% if names %}
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var names = {{ names_json|safe }};
    </script>

    <div id="app">

        <!-- This list is for SEO purposes, let's say 'above the fold' content contained in a responsive grid before an infinite scroll is triggered -->
        <h2>Django list</h2>
        <ul>
            {% for name in names %}
                <li>
                    <div>
                        <img src="avatar.jpg">
                        <div>
                            <div>{{ name }}@test.se</div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>

        <!-- This list is supposed to somehow 'hydrate' the django template content, in order to enrich the template with interactive VueJS. When the client Vue instance is instantiated/mounted, the idea is that only these elements populate the page, and not the SSR ones -->
        <h2>Vue list</h2>
        <ul>
            <li v-for="name in names">
                <div v-on:click="greet(name)">
                    <img src="avatar.jpg">
                    <div>
                        <div>[[ name ]]@test.se</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data: {
                names: names,
            },
            methods: {
                greet: function (name) {
                    console.log('Vue says hello from ' + name + '!')
                }
            }
        });
    </script>
{% endif %}
</body>
</html>

我是否以错误的方式思考这个问题，或者你们中有人能给我任何指导吗？

非常感谢。

最佳答案

我就是这样做的:

View .py

def show_customers(request):
    customers = Customer.objects.all()
    context = {
        'customers': customers,
    }

    return render(request, "app/customers.html", context)

模板:customers.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Customer list</title>
        {% if DEBUG %}
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        {% else %}
            <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        {% endif %}
    </head>
    <body>
    <div>
        {% for customer in customers|slice:":3" %}
            <p>
                {{ customer.id }} - {{ customer.user.username }}
            </p>
        {% endfor %}

        {% verbatim %}
        <script id="more-customers-template" type="text/template">
            <p>
                {{ customer.id }} - {{ customer.name }}
            </p>
        </script>
        {% endverbatim %}

    </div>
    <div class="issue-more-posts" id="more-customers">
        <customer
                v-for="customer in customers"
                v-bind:customer="customer"
                v-bind:key="customer.id"
        ></customer>
        <button @click="loadMorecustomer">
            SHOW MORE customers
        </button>
    </div>

    <script type="text/javascript">
        Vue.component('customer', {
            props: {
                customer: Object,
                nextPage: String
            },
            template: "#more-customers-template"
        });

        var customerMore = new Vue({
            el: '#more-customers',
            data: {
                customers: []
            },
            methods: {
                loadMorecustomer: function () {
                    this.customers = [{name: 'Some dynamic data', id: 1}]
                }
            }
        });
    </script>

    </body>
    </html>

此代码用于演示目的，您需要将 JS 代码和 Vue 模板代码分开。

编辑:我发现了一篇关于此的非常好的文章，甚至更清晰。 vuejs-and-django

关于javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58082170/

32

4

0

文章推荐： css - 同一行左边的标志和右边的菜单

文章推荐： matlab - 为什么神经网络会因为梯度而停止训练？

文章推荐： html - 将表格转换为CSS

文章推荐： python - Pycharm 控制台错误 - 未找到源文件

hadoop - Cassandra:原因:InvalidRequestException(原因:无效的限制)
我对cassandra并使用1.2.10非常陌生。我有一个时间戳数据类型的主键列。现在，我正在尝试检索日期范围的数据。由于我们知道不能在cassandra中使用，因此我使用的是大于()来获取日期范围。
objective-c - 以编程方式调用 segue 原因 NSInvalidArgumentException，原因 : 'UILabel length' unrecognized selector
我正在尝试进行有条件的转场。但我得到: Terminating app due to uncaught exception 'NSInvalidArgumentException', reas
iphone - 构建用新的应用程序版本替换旧版本的应用程序会导致应用程序崩溃!原因？
我有一个游戏项目，在调试和发布模式下在设备上运行得非常好。我有两个版本。旧版本和新版本具有更多(后来我添加了)功能，并且两者的 bundle ID、版本相同。当我构建旧版本时，之前没有安装“myGam
java - ClassCastException 原因
这个问题已经有答案了: 奥 git _a (2 个回答) 已关闭 5 年前。我正在获取 ClassCastException 。这两个类来自不同的 jar，但是JettyContinuationPr
java - 如何获取外部包中的异常原因/原因
以下代码行抛出异常: HttpResponse response = client.execute(request); // actual HTTP request 我能够捕获它并打印: Log
java - ClassNotFoundException 原因
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
java - 为什么这里抛出中断异常...原因？
public class TwoThreads { private static Object resource = new Object(); private static void
C程序-段错误，原因
当我输入 6 (int) 作为值时，运行此命令会出现段错误 (gcc filename.c -lm)。请帮助我解决这个问题。预期的功能尚未实现，但我需要知道为什么我已经陷入段错误。谢谢! #incl
c++ - 不良顶点数据的常见陷阱/原因？
所以，过去一周半我一直在研究这个 .OBJ/.MTL 网格解析器。在这段时间里，我一直在追踪/修复很多错误、清理代码、记录代码等等。问题是，每修复一个错误，仍然会出现这个问题，而且一张图片胜过一千个
为什么某些元素以数组和标量形式出现的 Python 原因
我正在运行一个代码，它基本上围绕 3 个维度旋转一个大数据数组(5000 万行)。但是，我遇到了一个奇怪的问题，我已将其缩小到如何评估旋转矩阵。基本上，对于除绕 x 轴以外的任何旋转，python 代
更改包名称大小写约定的 Java 原因
就在你说这是重复之前，我已经看到了其他问题，但我仍然想发布这个。所以我正在阅读 Thinking in Java -Bruce Eckel 这篇文章是关于小写命名约定的: In Java 1.0 a
Android SocketTimeoutException 原因
我想在我的应用程序中使用 REST API。它为我从这个应用程序发出的所有请求抛出 SocketTimeoutException。 Logcat 输出:(您也可以在此处看到带有漂亮格式的输出:http
python - 如何抑制显示后续异常的父异常(原因)
我知道 raise ... from None 并已阅读 How can I more easily suppress previous exceptions when I raise my own
gcc - 生成coreutils时发生MinGW错误(Windows和Linux上均发生一致错误)-原因？
在未能找到各种Unix工具(例如xargs和whatnot)的最新独立二进制文件(this version很好，但需要外部DLL)后，我承担了自己进行编译的挑战。 ...这是痛苦的。最终，尽管如此，
php - stream_socket_accept()失败时如何查找错误代码/原因
我有一个用PHP编写的流套接字服务器。为了查看一次可以处理多少个连接，我用C语言编写了一个模拟器来创建1000个不同的客户端以连接到服务器。 stream_socket_accept几次返回fals
android - 构建失败，原因:读取zip文件时出错
我的Android Studio昨天运行良好，但是今天当我启动Android Studio并想在移动设备上运行应用程序时，发生了以下错误，我在互联网和stackoverflow上进行了搜索，但没有解
grails - Grails Java域类中的toString()原因
默认情况下，grails似乎为Java域对象的toString()返回:。那当然不是我想要的，所以我尝试@Override toString()返回我想要的。当我尝试grails generate-a
spring - 原因:在Spring Security中无法将空值或空值传递给构造函数
尝试通过LDAP通过LDAP对用户进行身份验证时，出现以下错误。 Reason: Cannot pass null or empty values to constructor. 谁能告诉我做错了什么
Python模块无法加载共享库，原因: image not found
我正在尝试使用应用程序附带的 Houdini Python 模块，该模块是 Houdini 安装文件夹的一部分，位于标准 Python 路径之外。按照安装说明操作后，运行 Houdini Termin
c - 在非常小的代码片段中寻找 SEGFAULT 原因
简单地说，我正在为基本数据库编写单链表的原始实现。当用户请求打印索引下列出的元素高于数据库中当前记录数量时，我不断出现段错误，但仅当差值为 1 时。对于更高的数字，它只会触发我在那里编写的错误系统。

首页

博学

6Ren·AI

商城

javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板