配色预览：
172 | 173 | `; 174 | optionUl[1].parentNode.insertBefore(imgBox, optionUl[3]); 175 | 176 | // 获取配色单选框 177 | const colorRadio = document.getElementsByName('color'); 178 | // 获取预览图 179 | const img = document.querySelector('#preview-img'); 180 | for (let i = 0; i < colorRadio.length; i++) { 181 | // 给配色单选框添加一个索引 182 | colorRadio[i].index = i; 183 | // 根据选中的单选框设置图片 184 | if (colorRadio[i].checked) { 185 | img.style.backgroundPositionY = `-${colorRadio[i].index * 313}px`; 186 | } 187 | // 配色单选框改变 188 | colorRadio[i].addEventListener('change', ev => { 189 | img.style.backgroundPositionY = `-${ev.target.index * 313}px`; 190 | }); 191 | } 192 | 193 | // 创建选项列表 194 | const optionsList = document.querySelector('#options-list'); 195 | // 创建选项列表项 196 | for (let i = 0;i < title.length;i ++) { 197 | const itemLi = document.createElement('li'); 198 | const itemLink = document.createElement('a'); 199 | itemLink.innerHTML = title[i]; 200 | itemLink.href = 'javascript:;'; 201 | itemLink.index = i; 202 | // 给目录链接添加跳转事件 203 | itemLink.addEventListener('click', ev => { 204 | titleEl[ev.target.index].scrollIntoView({behavior: 'smooth'}); 205 | }); 206 | 207 | itemLi.appendChild(itemLink); 208 | optionsList.querySelector('ul').appendChild(itemLi); 209 | } 210 | 211 | // 设置选项列表目录的位置 212 | const left = document.querySelector('.col-tb-offset-2').offsetLeft; 213 | optionsList.style.left = left - optionsList.offsetWidth + 'px'; 214 | 215 | // 窗口大小改变时调整选项目录的位置 216 | window.addEventListener('resize', () => { 217 | if (window.innerWidth < 768) return false; 218 | const left = document.querySelector('.col-tb-offset-2').offsetLeft; 219 | optionsList.style.left = left - optionsList.offsetWidth + 'px'; 220 | }); 221 | 222 | // 目录下方的保存选项按钮提交保存 223 | document.querySelector('.submit-options').addEventListener('click', () => { 224 | document.querySelector('.typecho-page-main form').submit(); 225 | }); 226 | 227 | 228 | // 获取友情链接表格 229 | const linkList = document.querySelector('#link-list table tbody'); 230 | let linkInputName = null; // 存储友链表单的名称 231 | 232 | // 打开链接编辑器 233 | document.querySelectorAll('.show-link-editor').forEach(el => { 234 | el.setAttribute('title', `${el.getAttribute('data-title')}编辑`); 235 | 236 | el.addEventListener('click', ev => { 237 | // 设置链接编辑器标题 238 | document.querySelector('#link-editor-title').innerHTML = `${ev.target.getAttribute('data-title')}编辑`; 239 | // 从链接表单获取 JSON 240 | linkInputName = ev.target.getAttribute('data-name'); 241 | let linkJson = document.querySelector(`textarea[name="${linkInputName}"]`).value; 242 | 243 | // 显示链接编辑器 244 | document.querySelector('#link-editor-box').style.display = 'block'; 245 | // 如果屏幕尺寸较小就调节编辑器尺寸 246 | if (window.innerWidth < 900 || window.innerHeight < 500) { 247 | const linkListHeight = window.innerHeight - document.querySelector('#link-editor-title').offsetHeight - document.querySelector('#link-editor .dialog-actions').offsetHeight; 248 | document.querySelector('#link-list').style.height = linkListHeight + 'px'; 249 | } 250 | // 禁止页面滚动 251 | document.body.classList.add('no-scroll'); 252 | // 清空链接表格 253 | linkList.innerHTML = ''; 254 | // 读取链接 255 | if (linkJson !== '') { 256 | try { 257 | linkJson = JSON.parse(linkJson); 258 | }catch (error) { 259 | alert(`无法解析链接 JSON ${error.message}`); 260 | return false; 261 | } 262 | 263 | // 生成链接表格 264 | linkJson.forEach(link => { 265 | if (link.url === undefined) link.url = ''; 266 | if (link.name === undefined) link.name = ''; 267 | if (link.title === undefined) link.title = ''; 268 | if (link.logoUrl === undefined) link.logoUrl = ''; 269 | 270 | const trEl = document.createElement('tr'); 271 | trEl.innerHTML = ` 272 |