Search code examples
htmldrupaldrupal-7

Static HTML page in custom Drupal Module


I need to create a custom module that produces a static HTML page on a specific menu item. I know how to create the menu item with the menu hook, but how would I go about having the module produce the static html on that menu page?

Basically I have a static HTML site created that I need to be included into a module. I am then sending the module to someone else to install on their site.

I have to include all the images, css, and javascript as well. It also needs to live outside the current theme since it has a different look and feel as well.


Solution

  • Create your .html, .css, and .js files like you normally would (however, do not include <html>, <head>, or <body> tags in your .html file as these will already be included when your module is loaded). Any CSS you define will override Drupal's default CSS.

    You can then use the Form API's item element to import your static HTML page.

    static_page.module

    /**
     * Implements hook_menu().
     */
    function static_page_menu() {
      $items = array();
      $items['staticpage'] = array(
        'title' => t('My Static Page'),
        'page callback' => 'drupal_get_form',
        'page arguments' => array('static_page_form'),
        'access arguments' => array('access content'),
        'type' => MENU_NORMAL_ITEM,
      );
      return $items;
    }
    
    /**
     * Implements hook_form().
     */
    function static_page_form($form, &$form_state) {
      // Add CSS and JS
      drupal_add_css(drupal_get_path('module', 'static_page') . '/static_page.css');
      drupal_add_js(drupal_get_path('module', 'static_page') .'/static_page.js');
      // Import your static HTML page
      $form['html'] = array(
        '#type' => 'item',
        '#markup' => file_get_contents(drupal_get_path('module', 'static_page') .'/static_page.html'),
      );
      return $form;
    }
    

    If you don't want your static page to include the standard header, breadcrumb, sidebar and footer that is displayed for the rest of the site, you can use CSS to hide them.

    static_page.css

    #header,
    #breadcrumb,
    .sidebar,
    #footer-wrapper {
      display: none !important;
    }