Como consigo configurar um projeto que eu possa adcionar arquivos de css, js e bootstrap no slim framework, usei o projeto slim/skeleton, mas não consigo acicionar meus arquivos css e js sem a necessidade de adicionar um longo caminho ex(c:\xampp\htdocs\projeto\template\assests\style.css), existe uma possibilidade onde eu possa apenas adicionar <link href="style.css" />
1 Resposta
1) Crie a pasta 'assets' dentro do seu diretório public e dentro delas as pastas 'css', 'js' e 'images'.
2) Você tem que indicar no .htacess as configurações seguintes para que de seu diretório principal onde está o arquivo index.php, a sua pasta assets e os índices de pastas dentro dela sejam visíveis:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
#Checks to see if the user is attempting to access a valid file,
#such as an image or css document, if this isn't true it sends the
#request to index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|assets)
RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>
3) Após criar um layout padrão de página seguindo a documentação do Slim para templates, (eu utilizei o Twig), você deve colocar nesta página padrão suas configurações e aí você pode colocar diretamente e só a pasta assets, pois com a configuração acima no .htacess seu template já terá acesso e visibilidade aos arquivos. Segue um exemplo de configuração deste layout padrão:
<!DOCTYPE html>
<html lang="pt-br">
<head>
{% block head %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap e CSS -->
<link type="text/css" href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="/assets/css/jquery.dataTables.min.css" rel="stylesheet">
<link type="text/css" href="/assets/css/style.css" rel="stylesheet" />
<!-- Scripts -->
<!-- Scripts Datatables -->
<script type="text/javascript" src="/assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.dataTables.min.js"></script>
<!-- CSS -->
<link type="text/css" href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="/assets/css/jquery.dataTables.min.css" rel="stylesheet">
<link type="text/css" href="/assets/css/style.css" rel="stylesheet" />
<!-- Scripts -->
<script type="text/javascript" src="/assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.dataTables.min.js"></script>
<!-- Favicon -->
<link rel = "ícone de atalho" href = "favicon.ico" type = "imagem / x-ícone" >
<link rel = "icon" href = "favicon.ico" type = "imagem / x-ícone" >
<title>{% block title %}{% endblock %}</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyrigh by Corporation
{% endblock %}
</div>
</body>
</html>
No exemplo acima eu subi os arquivos padrões de css, js dentro das pastas correspondentes no diretório assets. Adicionei uma folha de estilo chamada 'style.css' adicionando algumas configurações minhas de estilo.
4) Ao criar uma nova página em seu diretório de Views, você deve extender o layout padrão (primeira linha do arquivo exemplo abaixo), você pode adicionar seguindo as tags do Twig configurações adicionais dentro das tags block possíveis (como no exemplo abaixo adicionei uma função em javascript, os outros block correspondes abaixo como ahead, title, body, footer):
{% extends "template.html" %}
{% block title %}Corporation{% endblock %}
{% block head %}
{{ parent() }}
<script>
$(document).ready(function () {
$('#registros').DataTable({
"language": {
"search": "Busca:",
"lengthMenu": "Exibindo _MENU_ registros",
"info": "Exibindo de _START_ a _END_ de _TOTAL_ registros",
"paginate": {
"previous": "Antes",
"next": "Próxima",
"firs": "<<",
"last": ">>"
}
}
});
});
</script>
{% endblock %}
{% block content %}
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Corporation Title</a>
<ul class="nav navbar-light">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
</nav>
<div id="content">
Coloque seu contéudo aqui...
</div>
{% endblock %}
{% block footer %}
<footer>
<p>© Corporation - Todos os direitos reservados</p>
</footer>
{% endblock %}
assests/style.css