Понравилось оглавление, которое по желанию располагается слева или с права в форке PaperModX. Только при увеличении масштаба оглавление будет как и раньше располагаться, но все равно симпатично.
На скорую руку сделать замены, это будет работать до первого обновления темы. Потом поэкспериментирую с пользовательскими каталогами. И еще надо будет сделать, что бы была прокрутка по меню с выделением читаемого раздела поста.
Для начала скопировать из themes/papermodx/assets/css/common/post-single.css темы PaperModX часть кода:
.toc {
margin: 0 2px 40px 2px;
border: 1px solid var(--border);
background: var(--code-bg);
border-radius: var(--radius);
padding: 0.4em 0;
}
.toc.side {
font-size: .8em;
}
@media screen and (min-width: 1350px) {
.toc.side {
position: fixed;
top: 118px;
z-index: 1;
max-height: calc(100% - 150px);
overflow: auto;
}
.toc.side::-webkit-scrollbar-thumb {
border: 5px solid var(--code-bg);
}
.toc.side.left {
left: 15px;
width: 250px;
}
.toc.side.right {
right: 15px;
width: 265px;
}
}
.toc details summary {
cursor: pointer;
margin-inline-start: 15px;
}
.toc .details {
display: inline;
font-weight: 500;
}
.toc .inner {
padding: 10px 15px 5px 35px;
}
.toc ul {
margin: 0;
padding: 0;
}
.toc li ul {
margin-inline-start: 20px;
}
.toc li a {
line-height: 1.5em;
padding: 3px 5px;
border-radius: 5px;
display: block;
}
.toc li a.active {
background-color: var(--link-background-color);
}
.toc li a:hover {
text-decoration: underline;
}
.toc summary:focus {
outline: 0;
}
И заменить в одноименном файле темы PaperMod themes/PaperMod/assets/css/common/post-single.css все что находится между строк включительно:
.toc {
margin: 0 2px 40px 2px;
border: 1px solid var(--border);
background: var(--code-bg);
border-radius: var(--radius);
padding: 0.4em 0;
......................................
......................................
......................................
.toc summary:focus {
outline: 0;
}
Скопировать файл из темы PaperModX themes/papermodx/layouts/partials/toc.html в папку темы PaperMod themes/papermodx/layouts/partials/
Пока не удалось реализовать прокрутку по оглавлению, как это сделано в теме PaperModX. Можно было бы полностью пересесть на эту тему, но не получается сделать подсветку кода. Да она там есть, но хотелось бы по умолчанию, а не через шорткоды.
Это первая ступень по реализации увиденного и понравившегося из темы PaperModX
Комментарии