帝国CMS插件开发

帝国CMS插件

帝国CMS编辑器Ctrl+V粘贴图片自动上传插件

帝国CMS粘贴图片上传插件，专为解决站长日常建站痛点开发，完美修复帝国CMS编辑器截图粘贴无响应、Word/WPS图文粘贴裂图两大难题。插

帝国CMS阿里云OSS插件

Wayne OSS插件，将网站附件上传至阿里云OSS对象存储，减轻服务器存储与带宽压力。上传、删除、缩略图生

帝国CMS问题修复

帝国CMS图片裁剪Cannot read properties of null (ReloadChangeFilePage)

最近搭建、维护帝国CMS站点的朋友，基本都会遇到一个兼容性bug：新版Chrome/Edge浏览器后台图片裁剪、选择已上

一、HTML

1. 文档结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

说明：DOCTYPE 声明文档类型，html 是根元素，head 包含元数据，body 包含可见内容。

2. 常用标签

<!-- 标题 -->
<h1>一级标题</h1>
<h2>二级标题</h2>

<!-- 段落 -->
<p>这是一个段落。</p>

<!-- 列表 -->
<ul>
  <li>无序列表项</li>
  <li>列表项</li>
</ul>

<ol>
  <li>有序列表项</li>
</ol>

<!-- 链接 -->
<a href="https://example.com">链接文本</a>

<!-- 图片 -->
<img src="image.jpg" alt="描述">

说明：HTML 标签用于定义内容的结构和含义。

3. 语义化标签

<header>页眉</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>文章</article>
<section>章节</section>
<aside>侧边栏</aside>
<footer>页脚</footer>

说明：语义化标签使代码更易读，有利于 SEO 和无障碍访问。

二、CSS

1. 选择器类型

/* 元素选择器 */
p { color: blue; }

/* 类选择器 */
.class-name { color: red; }

/* ID 选择器 */
#id-name { color: green; }

/* 后代选择器 */
div p { color: purple; }

/* 子元素选择器 */
div > p { color: orange; }

/* 伪类 */
a:hover { color: yellow; }

说明：选择器用于定位需要应用样式的 HTML 元素。

2. 常用属性

/* 颜色和背景 */
color: #333;
background-color: white;

/* 字体 */
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;

/* 盒模型 */
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
width: 200px;
height: 100px;

/* 定位 */
position: relative;
top: 10px;
left: 20px;

说明：CSS 属性控制元素的外观和布局。

3. Flexbox 布局

.container {
  display: flex;
  justify-content: center;    /* 主轴对齐 */
  align-items: center;        /* 交叉轴对齐 */
  gap: 10px;                  /* 间距 */
}

.item {
  flex: 1;                    /* 弹性增长 */
}

说明：Flexbox 是一种一维布局模型，适用于行或列布局。

4. 响应式设计

/* 媒体查询 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

/* 相对单位 */
width: 50%;      /* 百分比 */
width: 50vw;     /* 视口宽度 */
height: 100vh;   /* 视口高度 */

说明：媒体查询使页面能够根据不同设备屏幕尺寸自适应。

三、JavaScript

1. 变量声明

// let - 块级作用域，可重新赋值
let name = '张三';
name = '李四';

// const - 块级作用域，不可重新赋值
const PI = 3.14;

// var - 函数作用域（不推荐使用）
var old = '旧方式';

说明：优先使用 const，需要重新赋值时使用 let，避免使用 var。

2. 数据类型

// 原始类型
const string = '文本';
const number = 42;
const boolean = true;
const nil = null;
const undef = undefined;

// 引用类型
const array = [1, 2, 3];
const object = { key: 'value' };
const func = () => {};

说明：JavaScript 有原始类型和引用类型两种类型系统。

3. 函数

// 函数声明
function add(a, b) {
  return a + b;
}

// 箭头函数
const multiply = (a, b) => a * b;

// 带默认参数
const greet = (name = '访客') => {
  return `你好，${name}`;
};

说明：函数是 JavaScript 的基本构建单元，箭头函数提供简洁语法。

4. DOM 操作

// 获取元素
const el = document.querySelector('.class');
const all = document.querySelectorAll('div');

// 修改内容
el.textContent = '新文本';
el.innerHTML = '<span>HTML</span>';

// 修改样式
el.style.color = 'red';
el.classList.add('active');

// 创建元素
const newEl = document.createElement('div');
document.body.appendChild(newEl);

说明：DOM API 允许 JavaScript 操作页面元素。

5. 事件处理

// 添加事件监听器
btn.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('点击了');
});

// 常见事件
// click, mouseover, keydown
// submit, change, input
// load, scroll, resize

说明：事件监听器使用户能够与页面交互。