|
0
|
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>
|
