Não escrevo sobre por que MODx e como passei a viver assim. Se alguém estiver interessado, seja bem-vindo ao meu. Também assumiremos que se você veio para esta lição, então você está interessado não apenas em criar sites, mas em criar sites no MODx. Vamos supor que você já tenha o seguinte por padrão:

• computador (ou laptop) com instalado sistema operacional(, não importa)
• mouse para apontar ou clicar
• teclado para clicar ou apertar
• monitor
• acesso à Internet
• muita vontade de fazer sites

A propósito, tudo isso cabe muito bem em um dispositivo como um laptop. E se você pretende trabalhar com frequência no campo, é melhor comprá-lo. Fique à vontade e repita o que escreverei a seguir e tudo dará certo para você!

Para começar, colocamos todos os pontos e vírgulas - um plano de aula. Como você não pode simplesmente criar um site imediatamente, aprenderemos como fazer isso gradualmente. Portanto, as primeiras aulas podem parecer um pouco chatas ou simples para você - à medida que você adquire habilidades, as tarefas se tornam mais complicadas.

Aprendendo MODxÉ melhor começar criando um site de cartão de visita. Isto irá ajudá-lo não apenas a compreender os princípios básicos do sistema, mas também a aprender características distintivas, que são necessários para colocar problemas mais complexos e interessantes. Aliás, esse é um dos três pilares de ganho de um web studio, e é neles que você não só consegue se firmar, mas também ganhar um bom dinheiro (se fizer rápido e encontrar muitos clientes ).

O que é um site de cartão de visita?

Um site de cartão de visita é um pequeno site que consiste em várias páginas da web e contém informações básicas sobre a organização, produtos ou serviços, listas de preços e informações de contato (c) Wikipedia.

Na verdade, um site de cartão de visita de 4 páginas pode ser feito usando HTML simples, mas manter esse site é muito mais difícil - se você adicionar pelo menos uma página, precisará refazer tudo. Então sistemas de gerenciamento de conteúdo tornar a vida de um gerente de conteúdo comum ou proprietário de site muito mais fácil.

Como fazer um site no Modex

Antes de começarmos a desenvolver o site, precisamos nos preparar local de trabalho. Portanto, vamos ao site oficial com a versão mais recente do sistema MODx CMS/CMF e baixamos. O site oficial fala pouco russo, mas isso não nos impedirá de baixar a versão mais recente do MODx Evolution No momento em que este artigo foi escrito, a versão mais recente do MODx 1.0.8. (Literalmente no dia seguinte ao lançamento desta lição, foi anunciado nova versão Evolução MODx 1.0.9. Detalhes sobre o hub http://habrahabr.ru/post/173667/)

Tome cuidado: MODx 1.0.8 também é versão mais recente, mas um ramo diferente do sistema de controle, então se você está apenas começando a se familiarizar com o MODx, não se apresse em instalar o Revolution 2. As lições deste curso serão escritas especificamente para o Evolution.

Em seguida, você precisa instalar um servidor web em seu computador ou começar imediatamente a desenvolver um site de hospedagem. Prefiro a segunda opção, pois às vezes podem ocorrer erros inesperados durante a transferência de um site do host local. É sempre assim.

Site oficial do MODx

http://modx.com/

Materiais de treinamento sobre criação de sites emMODx

Opções de trecho

http://wiki.modxcms.com/index.php/Category:Snippets

A versão mais recente da distribuição pode ser baixada em http://modx.com/download/evolution/

Sequência de criação do site emMODxevolução

1. Crie um banco de dados e usuário com prefixo determinado pelo hoster, para não editar o arquivo config.inc.php posteriormente.
2. Instale o MODx. Faça configurações.
3. Copie o modelo de site para a pasta assets/templates.
4. Copie o código do modelo index.html no modelo Modelos Mínimos.
5. Dentro registre o caminho

   .

6. Escreva caminhos para scripts, imagens, estilos (img, link, scrypts). Por exemplo,

7. Determine quantos modelos estarão no site.
8. Selecione partes comuns a todas as páginas; elas serão pedaços. Os pedaços são exibidos entre chaves duplas. Por exemplo, ((CABEÇA))
9. O menu principal do site pode ser colocado em um bloco separado. .
10. O menu do site e o mapa do site são exibidos usando o snippet Wayfinder. Descrição do trecho do Wayfinder.
11. Uma lista de recursos, incluindo descrições, imagens, links... é exibida como um trecho Ditto. Descrição e exemplos do snippet Ditto.
12. Cadeia de navegação " migalhas de pão»é exibido pelo snippet Breadcrumbs. Descrição do trecho de pão ralado.
13. A pesquisa no site é realizada através do snippet AjaxSearch. Descrição do trecho AjaxSearch.
14. Forma opinião- trecho do eForm. Um exemplo de criação de um formulário de feedback usando o snippet eForm.
15. O plugin Phx foi projetado para verificar a ausência de imagem em um parâmetro de TV, determinar propriedades parentais, etc.
16. É necessário registrar adicionalmente vários estilos.
17. Depois de transferir o site para hospedagem:

Crie um mapa do site para mecanismos de pesquisa. Serviço para sites de até 500 páginas -
http://www.xml-sitemaps.com

Configurar arquivo .htaccess.

Faça entradas no arquivo robôs.txt. Para sites MODx, fazemos alterações no arquivo sample-robots.txt. Por exemplo:

# Exclusões modx padrão
Agente do usuário: *# direitos de indexação se aplicam a qualquer robô
Proibir: /assets/cache/
Proibir: /assets/docs/
Proibir: /assets/export/
Proibir: /assets/import/
Não permitir: /assets/modules/
Proibir: /assets/plugins/
Proibir: /assets/snippets/
Proibir: /assets/packages/
Proibir: /assets/tvs/
Proibir: /instalar/
Proibir: /gerente/
# Para descoberta automática de sitemaps.xml. Remova o comentário se você tiver um.
Anfitrião: site
Mapa do site: http://site/sitemap.xml

EM Mestre Yandex relatório mecanismo de pesquisa sobre o arquivo mapa do site.xml E robôs.txt.

EM Métrica Yandex cadastre o contador e instale-o no site.

Nas lições anteriores instalamos e configuramos o modx, e também instalamos os pacotes que serão necessários para criar um site. Hoje é uma lição sobre como transferir design HTML/CSS/JS regular para MODX Revo. Onde você pode obter o design que escrevi no artigo: Modelos MODX - o que são, onde obtê-los (baixar, solicitar, comprar). Para o meu site, escolhi um modelo de bootstrap adaptativo pago pronto no themeforest por US$ 17 chamado Brightbox (clique no nome para ver sua demonstração e descrição). Você pode usar absolutamente qualquer um, há muitos deles e são gratuitos - assim você provavelmente compreenderá melhor todo o princípio da tensão.

Estrutura do tema HTML

Quase todos os temas possuem arquivos html, css, js e de imagem + muitos também possuem arquivos php- formar processadores.

No meu caso, a pasta assets contém arquivos css e js (nos diretórios correspondentes), a pasta images contém imagens e arquivos vermelhos (os seus podem não ser vermelhos - tudo depende do navegador padrão) - isto arquivo HTML S.

Transferindo um modelo para Modx

A maneira mais fácil é simplesmente fazer upload de todos os arquivos e pastas (exceto html) para a raiz do site. Mas vou seguir um caminho mais difícil. Como meu modx é protegido e não tenho um diretório de ativos, carregarei o conteúdo dos ativos (subpastas css e js) para a raiz do site e as imagens para a raiz também.

Anteriormente, criei um diretório de modelos e coloquei todos os arquivos nele - você pode fazer o mesmo.

Editando um modelo básico

Na árvore à esquerda, vá até a aba “Elementos” e abra o modelo inicial (você pode simplesmente clicar com o botão esquerdo ou com o botão direito e selecionar editar).

Excluímos e substituímos pelo código de index.html (que não adicionamos à raiz do site).

Você pode abrir um arquivo html usando um bloco de notas normal, mas é melhor usar um editor especial, por exemplo.

Salve e vá para a página principal do site.

A página principal agora parece torta.

Isso aconteceu porque os caminhos para os scripts e CSS mudaram.

Editando caminhos

Os caminhos agora ficam assim.

Aliás, esse é um assunto meio estranho, geralmente o caminho passa por uma barra /, e \, vamos consertar isso.

Se você já instalou o pacote ace, então você pode de forma fácil e simples fazer uma busca com substituição, para isso clique no código e a seguir pressione a combinação de teclas Ctrl+H (funciona em Linux e Windows), digite \ no campo superior e / no campo inferior e pressione todos.

Olá a todos, amigos! Este é um tutorial básico do CMF MODX Revolution, no qual conheceremos o sistema MODX, instalaremos os plugins necessários e realizaremos configuração básica estrutura.

Legal

Gaguejar

Recursos básicos da lição MODX:

• Documentação do pdoTools: docs.modx.pro/components/pdotools/

Instalando e configurando plug-ins MODx

Instalar Avançado versão do MODx, durante a instalação indicamos que a pasta admin será chamada super.

Plugins MODx indispensáveis

Os complementos mais populares e usados ​​com mais frequência para MODx:

1. Ás- Editor de código MODx;
2. Coleções- exibição e gerenciamento de coleções de recursos;
3. ferramentas pdo- um conjunto de ferramentas básicas do MODx;
4. FormIt- trabalhar com formulários em MODx;
5. phpThumbOf- trabalhar com imagens em MODx;
6. TinyMCE/CKEditor (opcional)- editor de texto WYSIWYG para MODx;
7. transliterado- Transliteração de URL em MODx;
8. MIGX- Adicionados campos adicionais ao MODx;
9. Modelo automático- Atribuição automática "inteligente" de modelos a recursos.

Configurações básicas da revolução MODx

Vá para " Configurações do sistema".

1. Seção: URLs amigáveis

   • Transliteração de pseudônimos: russo;
   • Use URLs amigáveis: Sim;
   • Modo de URL amigável estrito: Sim;
   • Verifique se há URIs duplicados em todos os contextos: Sim;
   • Use URLs aninhados: Sim;
   • Não se esqueça de renomear também ht.access V .htaccess na raiz do site.

2. Seção: Painel de Controle

   • Mostrar descrição em menu superior: Não.

3. Seção: Site

   • Página de erro 404 "Documento não encontrado": ID do recurso 404;
   • Publicar por padrão: Sim;
   • Nome do site: O nome do seu projeto.

4. Seção: Sistema e servidor

   • Enviar cabeçalho X-Powered-By: Não.

5. Namespace: ás

   • Tamanho da fonte: 18px;
   • Guia suave: Não;
   • Tamanho da guia: 2;
   • Tema do editor (opcional): ambiente, caos, cromo, nuvens, clouds_midnight, cobalt, crimson_editor, amanhecer, dreamweaver, eclipse, github, idle_fingers, katzenmilch, kr, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, terminal, textmate, amanhã, amanhã_noite, amanhã_noite_azul, amanhã_noite_brilhante, amanhã_noite_oitenta, crepúsculo, tinta_vibrante, xcode;
   • Além disso, você pode criar um tema Material no editor Ace. Instruções:

     MODx Ace Material Theme 1. Configurações do sistema> Namespace "ace": Tamanho da fonte: 15px Altura da área de edição: 560 caracteres invisíveis: Sim Soft Tab: Não Tamanho da guia: 2 Tema do editor: Tomorrow_night 2. Arquivos: Sistema de arquivos > super > modelos > padrão > css > index.css: (Adicionar no final) .ace_editor(line-height: 1.4!important;font-family: "Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace !importante) .ace_gutter(cor:#666E79!importante) .ace_active-line,.ace_gutter-active-line(cor de fundo:#2A2F38!importante) .ace_scroller,.ace_gutter (cor de fundo: #272B33!importante) . ace_meta.ace_tag(cor:#A6B2C0!importante) .ace_meta.ace_tag.ace_tag-name(cor:#DF6A73!importante) .ace_entity.ace_other.ace_attribute-name(cor:#D2945D!importante) .ace_string(cor:#90C378 !importante) 3. Limpe o cache através do menu.

Recursos base criados

1. Página 404- página para configuração “Documento não encontrado”. Não aparece no menu;
2. mapa do site- recurso para retirada [] . Modelo em branco. Não aparece no menu. Tipo de conteúdo: XML. Não pesquisável. Não use um editor HTML;
3. robôs- recurso para retirada robôs.txt. Modelo em branco. Não aparece no menu. Tipo de conteúdo: texto. Não pesquisável. Não use um editor HTML.

Análise