• django的CDN配置
    # 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> ```
    17 666 0 2026-01-22
  • element-plus icon图标
    # element-plus icon图标 ## icon引用-组件名格式规范 本篇主要是介绍引用icon图标时`<el-icon><document-copy /></el-icon>`,`<el-icon><DocumentCopy /></el-icon>`两种不同的引用方式的区别 首先`<el-icon><document-copy /></el-icon>`的这种 PascalCase 的命名格式,是合法的 JavaScript 标识符。但是,由于你是在 index.html 直接写代码(DOM 模板),Vue 官方文档明确指出: “在原生的 HTML 模板中,你应该始终使用 kebab-case 命名法。” 因此就会出现 `<el-icon><DocumentCopy /></el-icon>` 无法显示的问题 总结: - 在 JS 里: 使用大写驼峰,比如 ElementPlusIconsVue.DocumentCopy。 - 在 HTML 里: 使用小写横杠,比如 <document-copy />。 ## 使用时机问题 由于 Vue 的组件(如 <el-icon> 和 <document-copy>)需要被 Vue 的编译器“编译”后才能变成浏览器能看懂的 SVG 图标。当你使用 jQuery 的 append 方法添加 HTML 字符串时,例如下面这样: ``` let iconSvg = '<el-icon><document-copy /></el-icon>' let copy = $('<i>' + iconSvg + '</i>'); $(this).append(copy) ``` 这些内容是直接插入 DOM 的,完全绕过了 Vue 的编译过程。浏览器看到 <document-copy> 这个标签,不知道它是干什么的(因为它不是标准的 HTML 标签),所以什么都不显示。 解决方法就是直接使用原生 SVG,直接加载官方的 SVG 代码,例如下面这样: ``` let iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="巴拉巴拉巴拉巴拉..."></path></svg>' let copy = $('<i title="copy" class="code_copy">' + iconSvg + '</i>'); $(this).append(copy) ``` ## 参考网址链接 组件注册 ``` https://cn.vuejs.org/guide/components/registration ``` 图标库 ``` https://element-plus.org/zh-CN/component/icon ```
    3 666 1115 2026-01-24