Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Sử dụng mẫu Django + mẫu Vue cho cùng một nội dung vì lý do SEO

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-03 20:22:15 32 4
mua khóa gpt4 Nike

Tôi đang xây dựng một ứng dụng Django với khả năng tương tác Javascript hạn chế và tôi đang tìm cách hợp nhất các mẫu Vue với các mẫu Django để đạt được điều tương tự.

Hãy tưởng tượng một trang cuộn vô hạn trong đó SEO rất quan trọng. Django rất giỏi trong việc giải quyết vấn đề này vì theo định nghĩa, đây là một framework phía máy chủ. Nhưng nếu cả hai công nghệ đều cần hiển thị cùng một nội dung, làm cách nào để làm phong phú trang được Django hiển thị bằng Vue? Trong trường hợp này, Django sẽ kết xuất cho trình thu thập dữ liệu SEO trước khi Vue tiếp quản, điều này sẽ "cung cấp nước" cho các thành phần và khiến chúng tương tác. Sau khi điều này xảy ra, nội dung tiếp theo được lấy không đồng bộ bằng AJAX cũng sẽ được tạo khuôn mẫu bằng Vue.

Tôi đã thực hiện một số nghiên cứu nhưng không tìm thấy đủ thông tin để giải quyết vấn đề này:

Tôi không có cảm giác rằng những nguồn này đang nói về SEO, hay nói đúng hơn là nếu có thì họ chỉ sử dụng các mẫu Vue khi nội dung không thuộc về SEO (như mở một phương thức).

Dưới đây là một số suy nghĩ ban đầu về cách hai công nghệ này trình bày cùng một nội dung theo những cách khác nhau. Vì Vue có dấu phân cách tùy chọn, tôi nghĩ có lẽ có cách kết hợp cả hai (để tránh xung đột cú pháp mẫu).

{% tải tĩnh %}



<đầu>
    Thử nghiệm Django và Vue



{% nếu tên %}
    
    

    


        
        
Danh sách Django

        

                {% cho tên trong tên %}
                    

  •                     

                            
                            

                                
    {{ name }}@test.se

                            

                        

                    

    •             {% endfor %}
            


        
        
Danh sách Vue

        

                

  •                 

                        
                        

                            
    [[ tên ]]@test.se

                        

                    

                

    •         

    


    
        ứng dụng var = Vue mới ({
            dấu phân cách: ['[[', ']]'],
            el: '#app',
            data: {
                tên: tên,
            },
            phương pháp: {
                chào: hàm (tên) {
                    console.log('Vue gửi lời chào từ ' + name + '!')
                }
            }
        });
    
{% endif %}
Xem sitemap của VNExpress

Tôi đang nghĩ về điều này một cách sai lầm hay bất kỳ ai trong số bạn có thể cho tôi bất kỳ hướng dẫn nào?

Cảm ơn bạn rất nhiều.

câu trả lời hay nhất

Đây là những gì tôi làm:

view.py

def show_customers(yêu cầu):
    khách hàng = Khách hàng.objects.all()
    bối cảnh = {
        'khách hàng': khách hàng,
    }

    trả về kết xuất (yêu cầu, "app/customers.html", ngữ cảnh)

bản mẫu:khách hàng.html

    
    
    <đầu>
        
        Danh sách khách hàng
        {% nếu GỠ LỖI %}
            
        {% khác %}
            
        {% endif %}
    
    
    

        {% cho khách hàng trong khách hàng|slice:":3" %}
            

                {{ customer.id }} - {{ customer.user.username }}
            

        {% endfor %}

        {% nguyên văn %}
        
        {% endverbatim %}

Mã này mang tính chất minh họa, bạn cần tách biệt mã JS và mã mẫu Vue.

EDIT: Tôi đã tìm thấy một bài viết thực sự hay về vấn đề này thậm chí còn rõ ràng hơn. vuejs-và-Django

Về javascript - sử dụng mẫu Django + mẫu Vue cho cùng một nội dung vì lý do SEO, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/58082170/

32 4 0
Bài viết khuyến nghị: css - Logo bên trái và menu bên phải trên cùng một dòng
Bài viết khuyến nghị: matlab - Tại sao mạng lưới thần kinh ngừng đào tạo do độ dốc?
Bài viết khuyến nghị: html - chuyển đổi bảng sang css
Bài viết khuyến nghị: python - Lỗi bảng điều khiển Pycharm - không tìm thấy tệp nguồn
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com