萤途个人博客

[[ slide_text ]]

[[ item.c ]]

django的CDN配置

发布时间: 2026-01-22 作者: wshsm 来源: yt

Vue Django

# django的CDN配置

## 修改 settings.py

在 `settings.py`中配置

```python
# 设为 True 则使用 CDN，False 则使用本地路径
USE_CDN = False

# cdn
CDN_LINKS = {
    'vue': 'https://cdn.staticfile.org/vue/3.4.21/vue.global.prod.js',
    'axios': 'https://cdn.staticfile.org/axios/1.6.8/axios.min.js',
    'jquery': '/static/js/jquery/jquery-3.7.1.min.js',
    'element_plus_index': 'https://cdn.staticfile.org/element-plus/2.3.0/index.full.min.js',
    'element_plus_icons': 'https://cdn.staticfile.org/element-plus-icons-vue/2.3.1/index.iife.min.js',
    'katex': 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min', # 不需要加后缀，js和css都通用
}

# 本地
LOCAL_LINKS = {
    'vue': '/static/vue/vue.global.js',
    'axios': '/static/js/axios/axios.min.js',
    'jquery': '/static/js/jquery/jquery-3.7.1.min.js',
    'element_plus_index': '/static/element-plus/element-plus@2.13.0/dist/index.full.js',
    'element_plus_icons': '/static/element-plus/icons-vue@2.3.2/dist/index.iife.min.js',
    'katex': '/static/editor.md-master/lib/KaTeX/0.16.9/katex.min', # 不需要加后缀，js和css都通用
}
```

## 创建自定义 Context Processor

在app下创建 `context_processors.py`

## 在ettings中注册

```
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                # 其他配置 ...

# 用户自定义函数，加上这一行
                # 格式：'应用名.文件名.函数名'
                'app01.context_processors.js_libs',
            ],
        },
    },
]
```

## 引用

```html
<script src="{{ libs.vue }}"></script>
<script src="{{ libs.element_plus_index }}"></script>
<script src="{{ libs.element_plus_icons }}"></script>
<script src="{{ libs.jquery }}"></script>
<script src="{{ libs.axios }}"></script>
```

你觉得文章怎么样