MCBBS Wiki欢迎您共同参与编辑！在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题，可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户，请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线！
您可以在回声洞中发表吐槽！
服务器状态监控。点击进入
本站由MCBBS用户自行搭建，与MCBBS及东银河系漫游指南（北京）科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
微件:SaltInPageCSSLoader：修订间差异
跳到导航
跳到搜索
Salt lovely（留言 | 贡献） （创建页面，内容为“<noinclude> <pre><div name="test" class="salt InPageCSSLoader"><nowiki> h1{ color: royalblue; background-color: #f0f6ff; } </nowiki></div> {{#Widget:Sa…”） |
（// Edit via Wikiplus） |
||
| （未显示1个用户的11个中间版本） | |||
| 第1行： | 第1行： | ||
<noinclude> |
<noinclude> |
||
已弃用，请使用 <code><nowiki>{{#inline-css}}</nowiki></code> 解析器函数代替。 |
|||
<pre><div |
<pre><div id="test" class="salt InPageCSSLoader"><pre> |
||
h1{ |
h1{ |
||
color: royalblue; |
color: royalblue; |
||
background-color: #f0f6ff; |
background-color: #f0f6ff; |
||
} |
} |
||
</ |
</pre></div> |
||
{{#Widget:SaltInPageCSSLoader}}</pre> |
{{#Widget:SaltInPageCSSLoader}}</pre> |
||
<div |
<div id="test" class="salt InPageCSSLoader"><pre> |
||
h1{ |
h1{ |
||
color: royalblue; |
color: royalblue; |
||
background-color: #f0f6ff; |
background-color: #f0f6ff; |
||
} |
} |
||
</ |
</pre></div> |
||
{{#Widget:SaltInPageCSSLoader}} |
{{#Widget:SaltInPageCSSLoader}} |
||
这个页面的标题（<h1>）变成了蓝字蓝底。 |
这个页面的标题（<h1>）变成了蓝字蓝底。 |
||
</noinclude><includeonly>< |
</noinclude><includeonly><script defer> |
||
/** |
|||
* 搬运须知: 您必须在**显眼处**标识来源“MCBBS Wiki”与作者“Salt_lovely”, **不**接受任何形式的简称或不署名。 |
* 搬运须知: 您必须在**显眼处**标识来源“MCBBS Wiki”与作者“Salt_lovely”, **不**接受任何形式的简称或不署名。 |
||
* |
|||
* Notice: You have to mark origin "MCBBS Wiki" and author "Salt_lovely" in CONSPICUOS PLACE, abbreviation or omissions are NOT allowed. |
* Notice: You have to mark origin "MCBBS Wiki" and author "Salt_lovely" in CONSPICUOS PLACE, abbreviation or omissions are NOT allowed. |
||
* |
|||
* 许可证: CC BY-NC-SA 4.0 |
* 许可证: CC BY-NC-SA 4.0 |
||
* |
|||
* License: CC BY-NC-SA 4.0 |
* License: CC BY-NC-SA 4.0 |
||
*/ |
*/ |
||
(function () { |
|||
function main() { |
|||
let ps = pageState() // 获取页面状态 |
let ps = pageState() // 获取页面状态 |
||
let elems = HTMLElemsFliter(Array.from(document.querySelectorAll('.salt.InPageCSSLoader'))) |
let elems = HTMLElemsFliter(Array.from(document.querySelectorAll('.salt.InPageCSSLoader'))) |
||
if (elems.length < 1) { console.log('[SaltInPageCSSLoader]未检测到页内CSS'); return } else { console.log('[SaltInPageCSSLoader]检测到页内CSS, 共计' + elems.length + '个') } |
|||
for (let el of elems) { |
for (let el of elems) { |
||
// 去除标记 |
// 去除标记 |
||
el.classList.remove('InPageCSSLoader') |
el.classList.remove('InPageCSSLoader') |
||
el.classList.remove('SaltCSS') |
|||
let toolbar = el.querySelector('.toolbar') // Prism处理 |
|||
if (toolbar) { toolbar.remove() } // Prism处理 |
|||
// 根据id查重（MW不支持id、class之外其他可以存放字符串的属性） |
|||
if (el.hasAttribute('id')) { |
|||
let id = el.getAttribute('id') || '' |
|||
if (document.head.querySelector( 'style#' + id )) { |
|||
console.log('[SaltInPageCSSLoader]检测到重复CSS id: ' + id) |
|||
el.removeAttribute('id') |
|||
el.style.display = 'none' |
|||
continue |
|||
} |
|||
} |
|||
// 内容简单处理 |
// 内容简单处理 |
||
let text = (el.textContent || '').replace(/^\n+|\n+$/gm, '') // 去除首尾的空行 |
let text = (el.textContent || '').replace(/^\n+|\n+$/gm, '') // 去除首尾的空行 |
||
el.textContent = text |
// el.textContent = text |
||
let handler = () => { |
let handler = () => { |
||
// 处理这个元素 |
// 处理这个元素 |
||
| 第54行： | 第67行： | ||
document.head.appendChild(style) |
document.head.appendChild(style) |
||
} |
} |
||
if (ps == 0) { |
if (ps == 0 || el.classList.contains('nopreview')) { |
||
handler() |
handler() |
||
} else { // 页面编写者模式 |
} else { // 页面编写者模式 |
||
el.textContent = text |
|||
highlightEl(el, '点击应用CSS(页面编写完毕后CSS将默认启用)') |
highlightEl(el, '点击应用CSS(页面编写完毕后CSS将默认启用)') |
||
el.addEventListener('click', handler) |
el.addEventListener('click', handler) |
||
| 第74行： | 第88行： | ||
* 1 - 编辑/预览页面 */ |
* 1 - 编辑/预览页面 */ |
||
function pageState() { |
function pageState() { |
||
if (mw && mw.config && typeof mw.config.get == 'function') { |
if (typeof mw != 'undefined' && typeof mw.config != 'undefined' && typeof mw.config.get == 'function') { |
||
switch (mw.config.get('wgAction')) { |
switch (mw.config.get('wgAction')) { |
||
case 'view': |
case 'view': |
||
| 第98行： | 第112行： | ||
} |
} |
||
} |
} |
||
if (document.readyState == 'loading') { |
|||
| ⚫ | |||
document.addEventListener('DOMContentLoaded', main) |
|||
| ⚫ | |||
} else { |
|||
main() |
|||
} |
|||
| ⚫ | |||
| ⚫ | |||
2023年4月29日 (六) 01:31的最新版本
已弃用，请使用 {{#inline-css}} 解析器函数代替。
<div id="test" class="salt InPageCSSLoader"><pre>
h1{
color: royalblue;
background-color: #f0f6ff;
}
</pre></div>
{{#Widget:SaltInPageCSSLoader}}
h1{
color: royalblue;
background-color: #f0f6ff;
}
这个页面的标题（<h1>）变成了蓝字蓝底。