-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtemas.html
More file actions
292 lines (228 loc) · 14.5 KB
/
Copy pathtemas.html
File metadata and controls
292 lines (228 loc) · 14.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!doctype html>
<html lang="pt">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTMLy CMS em Língua Portuguesa | Temas</title>
<meta name="description" content="Temas e modelos do HTMLy CMS para lusófonos">
<meta name="author" content="Fabiano Santos - @fabianosantosnet">
<meta property="og:locale" content="pt, pt_BR, pt_PT">
<meta property="og:type" content="website">
<meta property="og:title" content="Temas e modelos do HTMLy CMS em Língua Portuguesa">
<meta property="og:site_name" content="HTMLyCMS">
<meta property="og:description" content="Temas e modelos do HTMLy CMS para lusófonos">
<meta property="og:url" content="https://fabianosantosnet.github.io/HTMLyCMS/temas.html">
<meta property="og:image" content="https://fabianosantosnet.github.io/HTMLyCMS/assets/img/logo-htmly-cms-fb.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@fabianosantos_n">
<meta name="twitter:image" content="https://fabianosantosnet.github.io/HTMLyCMS/assets/img/logo-htmly-cms-tw.png">
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png">
<link rel="canonical" href="https://fabianosantosnet.github.io/HTMLyCMS/temas.html">
<link rel="stylesheet" href="assets/styles.css">
<script src="assets/scripts.js" defer></script>
</head>
<body>
<div class="parent">
<div class="top">
<header>
<h1><a href="https://fabianosantosnet.github.io/HTMLyCMS/">HTMLy CMS</a></h1>
<p>Sua fonte de referencia sobre o CMS no idioma português</p>
<p class="view"><a href="https://github.com/fabianosantosnet/HTMLyCMS/">GitHub deste site</a></p>
</header>
</div>
<div class="menu">
<ul>
<li><a href="./index.html"><i class="fa fa-home"></i>Principal</a></li>
<li><a href="./historico.html"><i class="fa fa-link"></i>Histórico</a></li>
<li><a href="./instalacao.html"><i class="fa fa-link"></i>Instalação</a></li>
<li><a href="./estrutura.html"><i class="fa fa-link"></i>Estrutura</a></li>
<li><a href="./dicas-e-outros.html"><i class="fa fa-link"></i>Dicas</a></li>
<li><a href="./temas.html" class="active"><i class="fa fa-link"></i>Temas</a></li>
<li><a href="./extensoes.html"><i class="fa fa-link"></i>Extensões</a></li>
</ul>
<form id="oflinks"><!-- dinamic links --></form>
</div>
<main>
<h2>HTMLy CMS em Língua Portuguesa | Temas</h2>
<section class="f">
<h3><i class="fa fa-eye"></i> Diversas informações acerca dos temas</h3>
<h4><i class="fa fa-arrow-right"></i> Disponibilidade de temas</h4>
<p>O HTMLy CMS foi concebido com foco em blog, contudo você pode adaptar seu tema para que fique igual a um site pessoal ou empresarial.</p>
<p>Por padrão o pacote de instalação contém os seguintes temas: blog, clean, logs, readable, twentyfifteen e twentysixteen.</p>
<p>Os temas que você pode baixar no <a href="https://www.htmly.com/theme/">site oficial</a> são (do mais recente pro mais antigo): Gridzone, Occasio, Fairy, Moth, Independent Publisher, Casper, Clean Blog, Ignite e Vapor.</p>
<p>Alguns criados por outras pessoas são o <a href="https://github.com/deependhulla/brightsmartbt3-htmly">BrightSmart-BT3</a> e o <a href="https://github.com/noxymon/bootstrap-blog">bootstrap-blog</a>.</p>
<p>Você pode baixar os temas que fiz no site <a href="https://git.fabianosantos.net/">fs projetos e ideias</a>.</p>
<h4><i class="fa fa-arrow-right"></i> Alterando um tema</h4>
<p>A partir da versão 2.7.7, o tema pode ser alterado na área de administração na barra lateral <span class="info">Configurações -> Configurar -> Geral -> Tema</span>.</p>
<p>Você também pode alterar manualmente no arquivo <code class="p">config/<span>config.ini</span></code> na linha <code class="p">views.root = "themes/<span>NomePastaTema</span>"</code>.
<h4><i class="fa fa-arrow-right"></i> Estrutura padrão do tema</h4>
<p>HTMLy usa o mecanismo de template tradicional: tags HTML misturadas com PHP.</p>
<p>Para entender melhor o funcionamento, abra os arquivos dos temas que vem com a instalação do HTMLy e contribua com seu desenvolvimento.</p>
<p>O CMS implementa um modelo de páginas conforme informação abaixo.</p>
<p class="dif"><code class="minilight">themes/nomeDoTema/
/css <- Pasta para colocar os arquivos de estilo
/img <- Pasta para as imagens
/js <- Pasta para os JavaScripts
404.html.php <- Base para páginas não encontradas
404-search.html.php <- Padrão quando não há nenhum resultado
layout.html.php <- Página base para seu tema
main.html.php <- Página inicial
no-posts.html.php <- Determina o padrão para páginas sem postagens
post.html.php <- Apresentação de uma postagem individual
profile.html.php <- Página padrão do perfil do autor
static.html.php <- Padrão para páginas e sub-páginas estáticas
</code></p>
<p>Quando há necessidade de customizar o tema há outros tipos de modelo como a seguir.</p>
<p class="dif"><span class="tit">Frente - Somente para a página inicial</span><code class="minilight"> layout--front.html.php <- somente layout para primeira página
static--front.html.php <- conteúdo principal se usarmos a página inicial estática
main--front.html.php <- conteúdo principal se usarmos a página inicial dinâmica
</code></p>
<p class="dif"><span class="tit">Blog - para a URL '/blog'</span><code class="minilight"> layout--blog.html.php <- layout da página blog
main--blog.html.php <- conteúdo principal da página blog
</code></p>
<p class="dif"><span class="tit">Página estática - exemplo de uma página '/sobre'</span><code class="minilight"> layout--static.html.php <- modelo para todas páginas estáticas
layout--static--sobre.html.php <- modelo somente para a página sobre
static--sobre.html.php <- modelo para o conteudo principal da página 'sobre'
</code></p>
<p class="dif"><span class="tit">Sub Página estática - exemplo de uma página '/sobre/empresa'</span><code class="minilight"> layout--static--sobre.html.php <- página pai
static--sobre.html.php <- conteúdo principal da página pai
layout--static--sobre--empresa.html.php <- modelo somente para a página '/sobre/empresa'
static--sobre--empresa.html.php <- conteúdo principal da página filha</code></p>
<p class="dif"><span class="tit">Postagem de blog - disponível apenas com estilo baseado na categoria</span><code class="minilight"> layout--post--uncategorized.html.php <- layout para postagens com categoria não categorizada
layout--post.html.php <- layout para todas as postagens do blog
post--uncategorized.html.php <- conteúdo principal para postagem individual com categoria não categorizada</code></p>
<p class="dif"><span class="tit">Categoria - Exemplo de uma categoria não categorizada</span><code class="minilight"> layout--category.html.php
main--category.html.php
layout--category--uncategorized.html.php
main--category--uncategorized.html.php</code></p>
<p class="dif"><span class="tit">Tags - Exemplo de post com a tag github</span><code class="minilight"> layout--tag.html.php
main--tag.html.php
layout--tag--github.html.php
main--tag--github.html.php</code></p>
<p class="dif"><span class="tit">Arquivados</span><code class="minilight"> layout--archive.html.php
main--archive.html.php</code></p>
<p class="dif"><span class="tit">Busca</span><code class="minilight"> layout--search.html.php
main--search.html.php</code></p>
<p class="dif"><span class="tit">Tipo - Exemplo com o tipo imagem</span><code class="minilight"> layout--type.html.php
main--type.html.php
layout--type--image.html.php
main--type--image.html.php</code></p><br>
<h4><i class="fa fa-code"></i> Variáveis & Funções de Tema</h4>
<h5>layout.html.php</h5>
<p>Contém a estrutura base do HTML.</p>
<ul>
<li><code>echo head_contents();</code> - imprime as tags e metatags de cabeçalho como RSS, charset, viewport dentre outros;</li>
<li><code>echo $title . ' ' . $description .' ' . $canonical;</code> - imprime o título, a descrição e o meta canônico da página;</li>
<li><code>site_url()</code> - informa a URL do site;<br><br></li>
<li><code>facebook()</code> - imprime o script do Facebook, se utilizarmos seu comentário<br>
<small>Necessário habilitar no Painel de Controle em <span>Configurações->Configurar->Widget->Comentários e selecionarmos Facebook, e inserir o <a href="https://bit.ly/3B6K31A">Facebook App Id</a></span></small><br><br></li>
<li><code>login()</code> - utilizado para verificação se está logado;</li>
<li><code>toolbar()</code> - mostra a barra de ferramentas no topo;</li>
<li><code>is_index()</code> - checa se a página atual é a inicial;<br><br></li>
<li><code>blog_title() / blog_tagline() / blog_description()</code> - na sequencia informa imprime o título, o slogan e a descrição do blog;</li>
<li><code>content()</code> - imprime o conteúdo principal de outro arquivo modelo como main.html.php ou post.html.php;</li>
<li><code>copyright()</code> - informa um aviso de direitos autorais e link de crédito;<br><br></li>
<li><code>analytics()</code> - imprime o Google Analytics.<br>
<small>Configure no site do Google e depois vá no Painel de Controle em <span>Configurações->Configurar->Widget->Google Analytics</span> e preencha os campos.</small>
</li>
</ul>
<h5>main.html.php</h5>
<p>Este arquivo de modelo lida com índice de postagens como na página inicial dinâmica, tags, categorias, arquivo e resultado de pesquisa.</p>
<ul>
<li><code>$posts</code> - contém a coleção de resultados das páginas; utilize <code>foreach($posts as $p){...}</code> e retorne as variáveis
<pre><code class="p">$p->url
$p->title
$p->date
$p->body
$p->description
$p->tag
$p->category
$p->author
$p->authorUrl
$p->related
$p->views
$p->type
$p->file
$p->image
$p->video
$p->audio
$p->quote
$p->link
</code></pre>
<small>* na versão 2.8 - <code>$p->video</code> agora retorna apenas o link do vídeo, para obter o ID do vídeo, utilize <code>get_video_id($p->video)</code>.<br>
* na versão 2.8.1 foi introduzido as variáveis: <code>$p->readTime, $p->authorName, $p->authorAbout</code> para o tema.</small><br><br>
</li>
<li><code>get_teaser($p->body, $p->url)</code> - imprime o resumo, se estiver setado nas configurações o teaser.type como 'trimmed', caso contrário imprime todo o artigo; </li>
<li><code>$category->title / $category->body</code> - título e conteúdo da categoria;<br><br></li>
<li><code>$tag->title / $archive->title / $search->title</code> - título da tag, título dos arquivados e da busca;</li>
<li><code>$pagination['prev'] / $pagination['next'] / $page / $pagination['pagenum']</code> - variáveis de paginação;</li>
<li><code>$pagination['html']</code> - renderiza a paginação completa;</li>
<li><code>$breadcrumb</code> - imprime o <span title="sistema de navegação estrutural usada para proporcionar ao usuário um meio de localização dentro da estrutura de navegação do site">breadcrumb</span>;<br><br></li>
<li><code>disqus_count()</code> - mostra a numeração de comentários do Disqus.</li>
</ul>
<h5>post.html.php</h5>
<p>Na página de postagem única as variáveis disponíveis são as mencionadas abaixo.</p>
<ul>
<li>Por exemplo: <code>foreach($posts as $p){...}</code> <pre><code class="p">$p->url
$p->title
$p->date
$p->body
$p->description
$p->tag
$p->category
$p->author
$p->authorUrl
$p->related
$p->views
$p->type
$p->file
$p->image
$p->video
$p->audio
$p->quote
$p->link
</code></pre>
<small>* na versão 2.8 - <code>$p->video</code> agora retorna apenas o link do vídeo, para obter o ID do vídeo, utilize <code>get_video_id ($p->video)</code>.</small><br><br>
</li>
<li><code>$prev / $next</code> - para navegação na postagem;</li>
<li><code>$post / $next</code> - as duas coleções contém todas as variável como em <em>$p</em> descrita acima, exemplo: <code class="c">$prev['url'] / $prev['image']</code>;<br><br></li>
<li><code>$breadcrumb / disqus($p->title, $p->url) / disqus_count()</code> - para navegação, o comentário disqus e sua contagem;</li>
<li><code>get_related($p->related)</code> - referente aos posts relacionados;</li>
</ul>
<h5>static.html.php</h5>
<p>Para páginas estáticas as variáveis mais comuns são: <code class="c">$p->title / $p->url / $p->body</code></p>
<h5>profile.html.php</h5>
<p>Para a página de perfil temos: <code class="c">$name / $about / $posts</code>. A variável <code>$posts</code> funciona como em main.html.php.</p>
<h5>Outros arquivos modelos</h5>
<p>Geralmente contém apenas tags HTML, ou por exemplo um widget de pesquisa: <code class="c">search()</code></p><br>
<h4><i class="fa fa-code"></i> Recursos de tema avançado</h4>
<p>HTMLy pode listar quase qualquer postagem com base em tag, categoria, autor ou tipo. Você só precisa ler o <code>/system/includes/functions.php</code> para saber a função correta para customizar seu próprio widget.</p>
<!-- <h5>Postagens específicas por tag</h5>
<p></p>
<code class="p">
// $tag = endereço URL
// $pagina = a página
// $itensporpagina = quantos posts por página
// $randomico = true ou false
get_tag($tag, $pagina, $itensporpagina, $randomico)
</code>
<p></p>
<p></p>
<p></p>
-->
</section>
</main>
<div class="bottom">
<footer>
<p>Projeto mantido por <a href="https://github.com/fabianosantosnet"><i class="fa fa-github"></i>fabianosantosnet</a><br>
<small>Hospedado no GitHub Pages — Tema criado por <a href="https://www.fabianosantos.net">fabianosantos.net</a></small></p>
<p id="contractdev"></p>
<p><small><i class="fa fa-file-text"></i> JavaScript - <i class="fa fa-css3"></i> CSS3 - <i class="fa fa-html5"></i> HTML5 - <i class="fa fa-font-awesome"></i> Fonte Awesome</small></p>
</footer>
</div>
</div>
</body>
</html>