Mercurial
comparison .cms/mini/instruction.ru_RU.UTF-8.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
1 <!doctype html> | |
2 <html lang="ru"> | |
3 | |
4 <head> | |
5 <meta charset="utf-8"> | |
6 <title>Заготовки для шаблона</title> | |
7 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
8 <link rel="stylesheet" href="styles.css"> | |
9 <style> | |
10 /*Инструкция использует css стили темы сайта, а прописанные стили ниже дополняют оформление только для инструкции*/ | |
11 body {grid-template-areas: unset; grid-template-rows: unset; align-content: start; padding: 0 0 2rem 0;} | |
12 main {grid-area: unset; padding: 0;} | |
13 main:first-child {padding-bottom: 2rem;} | |
14 main > h2 {margin-bottom: 1rem;} | |
15 main > p {margin-bottom: 0.5rem;} | |
16 [data-copy] {justify-self: center; padding: 0.4rem 0.7rem; min-width: 110px;} | |
17 pre {word-wrap: break-word; word-break: break-all; margin: 0;padding: 0.5rem;} | |
18 .block-code {display: grid; row-gap: 1rem; padding: 3rem 0; border-bottom: 1px solid #999999;} | |
19 body > main:first-child {border-bottom: 1px solid #999999; padding-top: 2rem;} | |
20 main .code {overflow-x: auto; background-color: white;} | |
21 </style> | |
22 </head> | |
23 | |
24 <body> | |
25 | |
26 <main> | |
27 <h2>Инструкция по шаблоу mini</h2> | |
28 <p>Ниже хранятся фрагменты кода для быстрого копирования и вставки. Вы можете дополнить эту инструкцию своими примерами кода через пункт Шаблон, отредактировав файл instruction.ru_RU.UTF-8.html. Но сначала сделайте копию шаблона, иначе из-за измененных файлов не сможете обновлять CMS.</p> | |
29 <p>Скопированный код вставьте в нужное место страницы, выделите его и выровняйте нажатием сочетания клавиш - [Shit] + [Tab].</p> | |
30 | |
31 <h2>Как создать свой шаблон</h2> | |
32 <p>Шаблон mini - это простой стартовый шаблон. Он находится в папке .cms/mini/. Создайте копию этой папки, например, с названием .cms/mini2/, переключитесь на шаблон mini2 и уже в этой папке изменяйте файлы под себя. Если же вы будете править файлы в оригинальном шаблоне, то CMS потом не сможет обновиться, будет сообщать, что файлы изменены и поэтому она не хочет перезатирать ваши наработки.</p> | |
33 <h2>Блог</h2> | |
34 <p>С помощью шаблона mini можно создать блог с бесконечной подгружаемой лентой тизеров статей. Тизер переводится как "приманка", это часть статьи, не обязательно ее начало, которая интригует к прочтению всей статьи. Для этого нужно для одной из страниц, которая будет лентой, задать шаблон blog, а остальным страницам, которые будут статьями в блоге, задать шаблоны post. А внутри постов выделить тизеры с помощью открывающего и закрывающего html-комментария.</p> | |
35 <pre><!-- preview-start --> | |
36 <p>тут расположен текст тизера</p> | |
37 <p>можно с html-тегами, а можно и без</p> | |
38 <!-- preview-end --></pre> | |
39 <p>Но если не отметить тизер специально, то будут взяты первые 500 символов статьи, при этом очищается html-разметка. Старайтесь задавать тизеры вручную чтобы они выглядели красиво и заинтересовывали читателей.</p> | |
40 <h2>Главная</h2> | |
41 <p>Так же имеется шаблон frontpage, который как и blog выводит тизеры страниц с шаблоном post, но только последние 6 штук. Он подойдет для создания главной страницы которая не должна быть лентой. В этом шаблоне php-код сильно упрощен по сравнению с blog.</p> | |
42 <h2>Заготовки</h2> | |
43 <p>Ниже представлены заготовки, которые вы можете использовать для оформления страниц сайта. Выберите нужный вам блок и нажмите кнопку Копировать под ним. Затем вставьте скопированный блок в редактируемую страницу.</p> | |
44 </main> | |
45 | |
46 | |
47 <div class="block-code"> | |
48 <main data-example=lbox-example> | |
49 <img class="lbox" alt="Баннер" src="/mini/banner.jpg" width="1920" height="700"> | |
50 </main> | |
51 <button data-copy=lbox-example>Копировать</button> | |
52 </div> | |
53 | |
54 | |
55 | |
56 <div class="block-code"> | |
57 <main data-example=banner> | |
58 <img class="banner" alt="Баннер" src="/mini/banner.jpg" width="1920" height="700"> | |
59 </main> | |
60 <button data-copy=banner>Копировать</button> | |
61 </div> | |
62 | |
63 | |
64 | |
65 <div class="block-code"> | |
66 <main data-example=cite> | |
67 <blockquote> | |
68 <p>Только работа дает ответы на все вопросы.</p> | |
69 <p class="author">Николай Замяткин</p> | |
70 </blockquote> | |
71 </main> | |
72 | |
73 <button data-copy=cite>Копировать</button> | |
74 </div> | |
75 | |
76 <div class="block-code"> | |
77 <main data-example=code> | |
78 <pre class="ignorgap"><code><p>Заголовок</p><?php | |
79 $cms['modules']['test.mod.php'] = array( | |
80 'name' => 'Test', | |
81 'description' => 'Test module', | |
82 'url_title' => 'Module page', | |
83 'url_link' => 'https://coffee-cms.com/modules/test/', | |
84 'author' => 'Coffee CMS team', | |
85 'version' => '20.04', | |
86 'files' => array( | |
87 '.cms/mod/test.mod.php', | |
88 ), | |
89 'sort' => 100, | |
90 );</code></pre> | |
91 </main> | |
92 | |
93 <button data-copy=code>Копировать</button> | |
94 </div> | |
95 | |
96 | |
97 | |
98 <div class="block-code"> | |
99 <main data-example=wpic1> | |
100 <p>Ниже пример картинки выходящей за ширину текста и описанием за счёт добавления класса wide тегу figure.</p> | |
101 | |
102 <figure class="wide"> | |
103 <img alt="" src="/mini/banner.jpg" width="1920" height="700"> | |
104 <figcaption>Описание изображения</figcaption> | |
105 </figure> | |
106 </main> | |
107 | |
108 <button data-copy=wpic1>Копировать</button> | |
109 </div> | |
110 | |
111 <div class="block-code"> | |
112 <main data-example=wpic2> | |
113 <p>Ниже пример картинки картинки выходящей за ширину текста за счёт добавления ей класса wide</p> | |
114 | |
115 <img class="wide" alt=""src="/mini/banner.jpg" width="1920" height="700"> | |
116 </main> | |
117 | |
118 <button data-copy=wpic2>Копировать</button> | |
119 </div> | |
120 | |
121 | |
122 <script> | |
123 document.addEventListener( "DOMContentLoaded", function( event ) { | |
124 | |
125 document.querySelectorAll( "[data-copy]" ).forEach( function( button ) { | |
126 | |
127 button.addEventListener( "click", function( e ) { | |
128 | |
129 let html = document.querySelector( '[data-example="' + button.getAttribute( "data-copy" ) + '"]' ).innerHTML.trim(); | |
130 | |
131 let textarea = document.querySelector( "[data-for-copy]" ); | |
132 textarea.style = ""; // делаем видимым чтобы работало копирование | |
133 textarea.value = html; | |
134 textarea.select(); | |
135 let ok = document.execCommand( "copy" ); | |
136 | |
137 let old_text = button.textContent; | |
138 if ( ok ) { | |
139 button.textContent = "OK"; | |
140 setTimeout( function() { | |
141 button.textContent = old_text; | |
142 }, 1000 ); | |
143 } else { | |
144 button.textContent = "Ошибка"; | |
145 setTimeout( function() { | |
146 button.textContent = old_text; | |
147 }, 1000 ); | |
148 } | |
149 textarea.style.display = "none"; | |
150 | |
151 } ); | |
152 | |
153 } ); | |
154 | |
155 } ); | |
156 | |
157 document.querySelectorAll( "img.lbox" ).forEach( function( img ) { | |
158 img.addEventListener( "click", function () { | |
159 if ( document.querySelector( "#lbox-window" ) == null ) { | |
160 let img = document.createElement( "img" ); | |
161 img.src = this.getAttribute( "src" ); | |
162 let div = document.createElement( "div" ); | |
163 div.id = "lbox-window"; | |
164 div.appendChild( img ); | |
165 document.body.appendChild( div ); | |
166 div.addEventListener( "click", function( e ) { | |
167 this.remove(); | |
168 } ); | |
169 } | |
170 } ); | |
171 } ); | |
172 </script> | |
173 | |
174 <div> | |
175 <textarea data-for-copy style="display: none;"></textarea> | |
176 </div> | |
177 | |
178 </body> | |
179 </html> |