Эффективная Структура Сайта

#php #html

Вопрос:

Мне нужно сделать несколько сайтов для работы. Я новичок в этом, поэтому я довольно просто использую bootstrap. Есть несколько страниц, которые будут иметь одинаковую структуру, просто с другим текстом и ссылками.

Мой вопрос в том, могу ли я иметь файл php шаблона, который просто считывает форматирующий txt-файл или что-то в этом роде? Я просто надеюсь, что смогу управлять одним основным файлом, который сохранит согласованность структуры на всех страницах, но сможет настроить каждую страницу с помощью простого файла, который изменяет только то, что необходимо.

Я надеюсь, что в этом есть смысл. Пожалуйста, дайте мне знать, если мне нужно будет уточнить, и заранее благодарю вас.

Комментарии:

1. Похоже, вам нужен PHP-скрипт заголовка, который загружает все CSS-файлы, а также основные фрагменты HTML, которые определяют макет и т. Д. Затем вы включаете этот сценарий во все свои файлы страниц. И включите сценарий нижнего колонтитула внизу, чтобы закрыть HTML-теги, которые вы открыли в верхнем колонтитуле.

Ответ №1:

Этот вопрос довольно широк и основан на мнениях, но я могу поделиться тем, как бы я его организовал:

Общая картина
Прежде всего, я предлагаю сделать мизансцену на месте-это французский термин, используемый на кухне. Это означает, что вы должны подготовить/собрать все и положить вещи туда, где им место, прежде чем начнете готовить, чтобы ускорить процесс. В нашем случае это означает, что мы должны сначала подумать о общей картине. Цель, инструменты, ресурсы, концепции и то, как все взаимосвязано. Проще записать весь план до того, как вы начнете — тогда вы увидите, не упускаете ли вы что-то, или что вы можете сделать по-другому, или где вам нужно дальнейшее расследование.

Разделение интересов
Итак, для начала у нас есть бэкэнд и интерфейс. PHP находится на внутренней стороне-, JavaScript , и CSS на внешней стороне. Как вы знаете, PHP мы можем делать множество вещей, например, инициализировать, загружать, печатать, изменять, настраивать и так далее. Данные могут быть получены из локального или внешнего источника. Мы также можем печатать CSS и JavaScript кодировать. Даже если мы можем это сделать, мы должны разделить проблемы, т. е. У каждого сценария и стиля должно быть свое собственное место или файл, в котором он живет.

Стили
Я рекомендую использовать SCSS или SASS для ваших стилей. Эти CSS предварительные компиляторы довольно удобны и сокращают стандартный код. Вы также можете использовать миксины и переменные. Существует также возможность объединить несколько файлов стилей в один, сократить и, следовательно, оптимизировать общее время загрузки.

Для начала вам также может понравиться сброс css или загрузка twitter. CSS сброса действительно решает несколько распространенных проблем в стиле кросс-браузера. Например, масштабирование шрифтов, высота строк и тому подобное. Twitter bootstrap добавляет готовые компоненты, которые вы можете легко использовать, и вам не нужно изобретать велосипед.

Скрипты
Если вы хотите, чтобы все было просто, напишите здесь ванильный код javascript или, возможно, включите некоторые библиотеки. Является ли jQuery все еще вещью? Для начала, почему бы и нет? В начальной загрузке есть некоторые компоненты, использующие javascript. Вы также можете объединить несколько файлов сценариев в один здесь, а затем уменьшить.

Шаблоны
В папке шаблона вы можете добавлять PHP файлы, которые используются на нескольких сайтах, например, в верхнем или нижнем колонтитуле. Возможно, вы также хотите создать свои собственные компоненты, которые можно использовать на разных сайтах. Кроме того, у вас могут быть альтернативные или резервные файлы, например, для разных файлов верхнего/нижнего колонтитула для разных страниц.

Приведенные ниже примеры содержат более или менее PHP код, но он не является функциональным, а просто абстрактным. Вы можете делать это так, как вам заблагорассудится.

пример header.php

 <!DOCTYPE html>
<html>
<head>
    <!-- you could have a foreach loop here or just pass it as a string -->
    <?php echo $metas; ?>
    <title><?php echo $title; ?></title>

    <!-- begin styles -->
    <?php echo $styles; ?>
    <!-- end styles -->

    <!-- begin scripts -->
    <?php echo $scripts; ?>
    <!-- end scripts -->
</head>
<body>
 

пример about.php

 <?php
  $metas = [...];   // could be site specific or global
  $styles = [...];  // ...
  $scripts = [...]; // ...
  $title = 'About';
?>
<?php require('header.php'); ?>

<div>
    <h2>About us</h2>
    // ...
</div>

<?php require('footer.php'); ?>
 

пример footer.php

   <footer>
    <div>Footer ...</div>
  </footer>
</body>
</html>
 

Сайты
Это могут быть реальные страницы, которые вы хотите представить на своем веб-сайте. Например, about.php обрабатывает /about страницу, и вы можете получить к ней доступ через www.example.com/about . Это действительно зависит от того, какова ваша цель. Здесь вы можете повторно использовать верхние и нижние колонтитулы, компоненты и другие шаблоны.

Структура
Давайте рассмотрим возможную упрощенную структуру файлов для этого:

 ./
├── styles/
│   ├── css/
│       └── componentX.css     // compiled css files from scss/sass
│   ├── componentX.sass        // custom css files per component
│   └── vendor/
│       └── bootstrap.min.css  // external css files
├── scripts/
│   ├── global.js              // custom js files for all sites
│   ├── componentX.js          // custom js files per component
│   └── vendor/
│       └── bootstrap.min.js   // external js files
├── images/
│   ├── banner.png             // images, icons, svgs
│   ├── favicon.ico            // 
│   └── logo.svg               //
├── fonts/
│   ├── font.ttf               // various fonts
│   └── font.eot               //
├── templates/
│   ├── header.php             // standard header template
│   ├── footer.php             // standard footer template
│   └── componentX.php         // custom template, each component (or fallback)
├── pages/
│   ├── about.php              // www.example.com/about
│   ├── products.php           // www.example.com/products
│   └── sitemap.php            // www.example.com/sitemap
├── index.php                  // can be used for bootstrapping / setup
└── .htaccess                  // rewrite rules, access restrictions etc.
 

Начальная загрузка, управление доступом, маршрутизация
Вы можете использовать .htaccess для передачи всех запросов через index.php него и внутри него, а также для настройки маршрутов, путей, служб, подключения к базе данных и всего, что вам может понадобиться.

Возможно, вам захочется взглянуть на шаблон MVC, маршрутизацию и spl-загрузку

Ответ №2:

Используйте страницу includes в своей структуре php. Эта страница будет иметь функции, создающие каждую структуру ваших страниц, которые являются одинаковыми. Например, у вас могут быть внешние ссылки, которые вы используете на каждой из своих страниц, у вас также могут быть заголовок и панель навигации, возможно, боковая панель и нижний колонтитул, которые все одинаковы. На includes.php странице у вас есть функции, которые создают каждый из этих компонентов.

Ниже приведен пример раздела заголовка с разделом навигации и одним разделом div, который вы можете использовать на нескольких страницах.Вы также можете включить страницу определений, которая определяет различные переменные или определяет, которые также могут использоваться на каждой странице.

 
function evalPath($page){
    switch ($page){
        case "home":
            $path = "";
            break;
        default:
            $path = "../";
    }    
    return $path;
};

function constructHead($page, $metaDesc, $metaKeywords, $otherLinks, $siteroot){
$path = evalPath($page);
    $stmt = "    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">    
            <meta name="description" content="".$metaDesc."">
            <meta name="keywords" content="".$metaKeywords."">
            <meta name="author" content="".META['author']."">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
            ".$otherLinks."
            
            <link rel='stylesheet' type='text/css' href='$siteroot/css/main.css'>
            
            <link rel="icon" href="".$path."favicon.png">
            
            <title>".$title."</title>
            
        
        </head>    
        ";
    return $stmt;
}

function constructSingleDiv($spans, $content){
    $stmt = "
        <div id='cont' class='container'>
            <div class='".$spans."'>". $content."</div><!--/END .'.$spans.' -->
        </div>";
    return $stmt;
}

function constructNav($page, $siteroot){ //$page is the body id of the page calling the function and is defined on the page 
                              //example: 
                              ##################################################
                              #### $page = 'home'; --> <body id='.$page.'>  ####
                              ##################################################
    
    $path = evalPath($page);
    $stmt = '
        <div id="top-nav"><a class="adminLogin" href="'.$siteroot.'/admin/index.php">Login</a>
            <ul id="nav_bar" class="nav">
                <li class="home">
                    <a href="'.$siteroot.'/index.php">Home</a>
                </li>
                <li  class="media">
                    <a href="#media">Media</a>
                    <ul>
                        <li class="music"><a href="#music">Music</a>
                            <ul>
                                <li class=""><a href="#">Foil</a></li>
                                <li class=""><a href="#">Long Drive home</a></li>
                                <li class=""><a href="#">Sunday Girl</a></li>
                            </ul>
                        </li>    
                        <li class="video"><a href="'.$siteroot.'/pages/video.php">Video</a></li>            

                        <li class="art"><a href="'.$siteroot.'/pages/art.php">Art</a></li>            

                        <li class="pictures"><a href="'.$siteroot.'/pages/pictures.php">Pictures</a></li>

                        <li class="web"><a href="'.$siteroot.'/pages/web.php">Web</a></li>
                    </ul>
                </li><!-- END li.media -->
                <li class="contact">
                    <a href="'.$siteroot.'/pages/contact.php">Contact</a>
                </li>
                <li class="blog">
                    <a href="'.$siteroot.'/pages/blog.php">Blog</a>       
                </li>
                
                    
                
            </ul><!-- END ul.nav -->
        </div><!-- END div#top-nav -->';
        //<p>current page is: '.$page.'</p>
    return $stmt;
    
}

 

Теперь на моей странице, где я хочу повторно использовать этот компонент кода, я просто добавляю функцию включения, чтобы включить этот файл на страницу, затем вызываю функцию и передаю переменные, которые добавляют содержимое для каждой функции, которую я хочу использовать.

include 'includes.php';

Затем, чтобы вызвать мой головной раздел, я просто добавляю функцию…

constructHead($page, $metaDesc, $metaKeywords, $otherLinks, $siteroot);

Теперь над этими функциями, которые я вызываю, исходящими из моего includes.php страница, мне нужно определить те переменные, которые я передаю в функции… Эти переменные представляют собой содержимое, относящееся к странице, на которой я вызываю функцию со страницы «Включает». HTML или структура будут одинаковыми, однако содержимое будет определено на странице локально.

Поэтому на своем home.php я могу определить эти переменные как таковые…

 // JUST below the opening php tag place the include statement
include 'includes/functions.php';

$page = 'home';
$metaDesc = 'A few lines that describe what my page is about.';
$metaKeywords = 'code, coding, php, incudes, fucntions';
$otherLinks = 'scripts/js/index.js';
$siteroot = 'https://mypage.php';
$content = 'Something I want to say about my home page';
 

Этот пример очень прост, но вы можете видеть, как это работает.

включить в php
требуется в php

Комментарии:

1. Это то, чего я добивался. Спасибо за подробный ответ!

Ответ №3:

Да! Так что обычно с PHP-сайтами у меня обычно был такой формат:

SomePage.php:

 <?php include 'header.php';?>
Content Here
<?php include 'footer.php';?>
 

header.php:

 <link href="mycss.css">
<nav> .. menu here
 

footer.php:

 <script src="myglobal.js"></script>
 

Этому простому подходу можно научиться. Позже вы захотите изменить подход и использовать наследование шаблонов. Узнайте больше о наследовании шаблонов здесь: https://arshaw.com/phpti/

Комментарии:

1. Спасибо за ссылку на наследование шаблона, это было полезно.