関連ページリストをページの横に表示するUserCSS ver.2
その他、自然な形のレイアウトにするにあたって削りきれなかった機能
以下の機能はオプションです
使用する際はstyle.scssの8行目(@use "./page-info.scss";)をコメントアウトを解除してください
注意
不具合がまあまあ残っていますが、Mijinko_SD.iconが個人的なタスクを消化しきれていないため、修正するのはまだ先になりそうです
リポジトリ
前作
スクリプト
UserCSSなのにスクリプト…?となるとは思いますが、ページメニュー周りの位置調整のために使います
ただし、ページメニューの項目を増やしている編集者以外の人は不要です
1行目のprojectNameの値は自分のプロジェクトの名前(URLに使われている方)に置き換えてください
code:calc_pagemenu_rows.js
const projectName = "Mijinko"
const styleDOMId = "Mijinko-settings-additional-style"
function updateStyle() {
removeStyle()
if(scrapbox.Project.name !== projectName) return
const iconsLen = document.querySelectorAll(".page-menu > :is(.dropdown, a)").length
const rows = Math.ceil(iconsLen / 4)
const styleDOM = document.createElement("style")
styleDOM.textContent = html body{ --page-menu-rows: ${rows} }
styleDOM.id = styleDOMId
document.body.append(styleDOM)
}
function removeStyle() {
const style = document.getElementById(styleDOMId)
if(style === null) return
style.remove()
}
setTimeout(updateStyle, 1000)
scrapbox.on("page:changed", updateStyle)
ソースコード
CSSに変換する際はDart Sassに対応したコンパイラ(トランスパイラ)を使用して、style.scss変換してください ここでの公開は取りやめました。