Главная » Языки программирования

Create html directory index

Содержание
  1. How can I create a simple index.html file which lists all files/directories?
  2. tree
  3. Generator script with recursive traversal
  4. Solution 3
  5. Solution 4
  6. Solution 5
  7. Create html directory index
  8. How can I create a simple index.html file which lists all files/directories?
  9. Html Solutions
  10. Solution 1 — Html
  11. tree
  12. Generator script with recursive traversal
  13. Solution 2 — Html
  14. Solution 3 — Html
  15. Solution 4 — Html
  16. Solution 5 — Html
  17. Solution 6 — Html
  18. Solution 7 — Html
  19. Solution 8 — Html

How can I create a simple index.html file which lists all files/directories?

There are enough valid reasons to explicitly disable automatic directory indexes in apache or other web servers. Or, for example, you might only want to include certain file types in the index. In such cases you might still want to have a statically generated index.html file for specific folders.

tree

tree is a minimalistic utility that is available on most unix-like systems (ubuntu/debian: sudo apt install tree , mac: brew install tree , windows: zip). tree can generate plain text, XML, JSON or HTML output.

Generate an HTML directory index one level deep:

tree -H '.' -L 1 --noreport --charset utf-8 -o index.html

Only include specific file types that match a glob pattern, e.g. *.zip files:

tree -H '.' -L 1 --noreport --charset utf-8 -P "*.zip" -o index.html

The argument to -H is what will be used as a base href, so you can pass either a relative path such as . or an absolute path from the web root, such as /files . -L 1 limits the listing to the current directory only.

See tree —help or man tree in your terminal for all the supported options.

Читайте также:  Java string индекс первого вхождения

Generator script with recursive traversal

I needed an index generator which I could style the way I want, and which would also include the file sizes, so ended up writing this script (python 3) which in addition to having customisable styling can also recursively generate an index.html file in all the nested subdirectories (with the —recursive or -r flag). The styling borrows heavily from caddyserver’s file-server module. It includes last modified times and is responsive in mobile viewports.

Solution 3

For me PHP is the easiest way to do it:

Place this in your directory and set where you want it to search on the $path. The first if statement will hide your php file and .htaccess and the error log. It will then display the output with a link. This is very simple code and easy to edit.

Solution 4

There’s a free php script made by Celeron Dude that can do this called Celeron Dude Indexer 2. It doesn’t require .htaccess The source code is easy to understand and provides a good starting point.

celeron dude indexer

Solution 5

Did you try to allow it for this directory via .htaccess?

I use this for some of my directories where directory listing is disabled by my provider

Источник

Create html directory index

  • HTML Tutorial
  • HTML Introduction
  • HTML full form
  • HTML Editors
  • HTML Comments
  • HTML Basics
  • HTML Layout
  • HTML Elements
  • HTML Heading
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Quotations
  • HTML Color Styles and HSL
  • HTML Links
  • HTML Images
  • HTML Tables
  • HTML Lists
  • HTML Block and Inline Elements
  • HTML Iframes
  • HTML File Paths
  • HTML Viewport meta tag for Responsive Web Design
  • HTML Computer Code Elements
  • HTML Entities
  • HTML Charsets
  • HTML | URL Encoding
  • HTML | Deprecated Tags
  • HTML Attributes
  • HTML | accept Attribute
  • HTML accept-charset Attribute
  • HTML accesskey Attribute
  • HTML| action Attribute
  • HTML align Attribute
  • HTML alt attribute
  • HTML | async Attribute
  • HTML input autocomplete Attribute
  • HTML autocomplete Attribute
  • HTML autofocus Attribute
  • HTML input autofocus Attribute
  • HTML autofocus Attribute
  • HTML autofocus Attribute
  • HTML Attributes Complete Reference
  • DOM (Document Object Model)
  • HTML DOM activeElement Property
  • HTML DOM anchors Collection
  • HTML DOM close() Method
  • HTML DOM baseURI Property
  • HTML DOM body Property
  • HTML DOM createAttribute() Method
  • HTML DOM doctype Property
  • HTML DOM writeln() Method
  • HTML DOM console error() Method
  • HTML DOM URL Property
  • HTML DOM embeds Collection
  • HTML DOM console warn() Method
  • HTML DOM console trace() Method
  • HTML DOM Complete Reference
  • HTML DOM Audio Object
  • HTML DOM Video Object
  • HTML DOM Video canPlayType( ) Method
  • HTML DOM Audio audioTracks Property
  • HTML DOM Audio autoplay Property
  • HTML DOM Audio buffered Property
  • HTML DOM Audio controls Property
  • HTML DOM Audio currentSrc Property
  • HTML DOM Audio currentTime Property
  • HTML DOM Audio defaultMuted Property
  • HTML DOM Audio defaultPlaybackRate Property
  • HTML DOM Audio duration Property
  • HTML DOM Audio ended Property
  • HTML DOM Audio loop Property
  • HTML DOM Audio/Video Complete Reference
  • Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week
  • HTML Course | Structure of an HTML Document
  • HTML Course First Web Page Printing Hello World
  • HTML Course Basics of HTML
  • HTML Course : Starting the Project – Creating Directories
  • HTML Course Understanding and Building Project Structure
  • HTML Course : Creating Navigation Menu
  • HTML Course : Building Header of the Website
  • HTML Course : Building Main Content – Section 1
  • HTML Course | Building Main Content – Section 2
  • HTML course | Building Main Content – Section 3
  • HTML Course | Building Footer
  • HTML Course | Practice Quiz 1
  • HTML Course | Practice Quiz 2
  • Create a Sticky Social Media Bar using HTML and CSS
  • Create a Search Bar using HTML and CSS
  • How to create Right Aligned Menu Links using HTML and CSS ?
  • How to add a Login Form to an Image using HTML and CSS ?
  • How to Create a Tab Image Gallery ?
  • How to create a Hero Image using HTML and CSS ?
  • How to design Meet the Team Page using HTML and CSS ?
  • How to Create an Image Overlay Icon using HTML and CSS ?
  • How to Create Browsers Window using HTML and CSS ?
  • How to Create Breadcrumbs using HTML and CSS ?
  • How to Create Section Counter using HTML and CSS ?
  • How to Create Toggle Switch by using HTML and CSS ?
  • How to Create a Cutout Text using HTML and CSS ?
  • How to make a Pagination using HTML and CSS ?
  • HTML Tutorial
  • HTML Introduction
  • HTML full form
  • HTML Editors
  • HTML Comments
  • HTML Basics
  • HTML Layout
  • HTML Elements
  • HTML Heading
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Quotations
  • HTML Color Styles and HSL
  • HTML Links
  • HTML Images
  • HTML Tables
  • HTML Lists
  • HTML Block and Inline Elements
  • HTML Iframes
  • HTML File Paths
  • HTML Viewport meta tag for Responsive Web Design
  • HTML Computer Code Elements
  • HTML Entities
  • HTML Charsets
  • HTML | URL Encoding
  • HTML | Deprecated Tags
  • HTML Attributes
  • HTML | accept Attribute
  • HTML accept-charset Attribute
  • HTML accesskey Attribute
  • HTML| action Attribute
  • HTML align Attribute
  • HTML alt attribute
  • HTML | async Attribute
  • HTML input autocomplete Attribute
  • HTML autocomplete Attribute
  • HTML autofocus Attribute
  • HTML input autofocus Attribute
  • HTML autofocus Attribute
  • HTML autofocus Attribute
  • HTML Attributes Complete Reference
  • DOM (Document Object Model)
  • HTML DOM activeElement Property
  • HTML DOM anchors Collection
  • HTML DOM close() Method
  • HTML DOM baseURI Property
  • HTML DOM body Property
  • HTML DOM createAttribute() Method
  • HTML DOM doctype Property
  • HTML DOM writeln() Method
  • HTML DOM console error() Method
  • HTML DOM URL Property
  • HTML DOM embeds Collection
  • HTML DOM console warn() Method
  • HTML DOM console trace() Method
  • HTML DOM Complete Reference
  • HTML DOM Audio Object
  • HTML DOM Video Object
  • HTML DOM Video canPlayType( ) Method
  • HTML DOM Audio audioTracks Property
  • HTML DOM Audio autoplay Property
  • HTML DOM Audio buffered Property
  • HTML DOM Audio controls Property
  • HTML DOM Audio currentSrc Property
  • HTML DOM Audio currentTime Property
  • HTML DOM Audio defaultMuted Property
  • HTML DOM Audio defaultPlaybackRate Property
  • HTML DOM Audio duration Property
  • HTML DOM Audio ended Property
  • HTML DOM Audio loop Property
  • HTML DOM Audio/Video Complete Reference
  • Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week
  • HTML Course | Structure of an HTML Document
  • HTML Course First Web Page Printing Hello World
  • HTML Course Basics of HTML
  • HTML Course : Starting the Project – Creating Directories
  • HTML Course Understanding and Building Project Structure
  • HTML Course : Creating Navigation Menu
  • HTML Course : Building Header of the Website
  • HTML Course : Building Main Content – Section 1
  • HTML Course | Building Main Content – Section 2
  • HTML course | Building Main Content – Section 3
  • HTML Course | Building Footer
  • HTML Course | Practice Quiz 1
  • HTML Course | Practice Quiz 2
  • Create a Sticky Social Media Bar using HTML and CSS
  • Create a Search Bar using HTML and CSS
  • How to create Right Aligned Menu Links using HTML and CSS ?
  • How to add a Login Form to an Image using HTML and CSS ?
  • How to Create a Tab Image Gallery ?
  • How to create a Hero Image using HTML and CSS ?
  • How to design Meet the Team Page using HTML and CSS ?
  • How to Create an Image Overlay Icon using HTML and CSS ?
  • How to Create Browsers Window using HTML and CSS ?
  • How to Create Breadcrumbs using HTML and CSS ?
  • How to Create Section Counter using HTML and CSS ?
  • How to Create Toggle Switch by using HTML and CSS ?
  • How to Create a Cutout Text using HTML and CSS ?
  • How to make a Pagination using HTML and CSS ?

Источник

How can I create a simple index.html file which lists all files/directories?

We use a web server that does not allow directory listing.

There is a specific directory I would like to allow listing of.

How can make a simple HTML file that will contain the contents of this directory?

Html Solutions

Solution 1 — Html

There are enough valid reasons to explicitly disable automatic directory indexes in apache or other web servers. Or, for example, you might want to only include certain file types in the index. In such cases you might still want to have a statically generated index.html file for specific folders.

tree

tree is a minimalistic utility that is available on most unix-like systems (ubuntu/debian: sudo apt install tree , mac: brew install tree , windows: zip). tree can generate plain text, XML, JSON or HTML output.

Generate an HTML directory index one level deep:

tree -H '.' -L 1 --noreport --charset utf-8 -o index.html

Only include specific file types that match a glob pattern, e.g. *.zip files:

tree -H '.' -L 1 --noreport --charset utf-8 -P "*.zip" -o index.html

> The argument to -H is what will be used as a base href, so you can pass either a relative path such as . or an absolute path from the web root, such as /files . -L 1 limits the listing to the current directory only.

See tree —help or man tree in your terminal for all the supported options.

Generator script with recursive traversal

I needed an index generator which I could style the way I want, and which would also include the file sizes, so ended up writing this script (python 3) which in addition to having customisable styling can also recursively generate an index.html file in all the nested subdirectories (with the —recursive or -r flag). The styling borrows heavily from caddyserver’s file-server module. It includes last modified time and is responsive in mobile viewports.

Solution 2 — Html

For me PHP is the easiest way to do it:

Place this in your directory and set where you want it to search on the $path. The first if statement will hide your php file and .htaccess and the error log. It will then display the output with a link. This is very simple code and easy to edit.

Solution 3 — Html

You can either: Write a server-side script page like PHP, JSP, ASP.net etc to generate this HTML dynamically

Setup the web-server that you are using (e.g. Apache) to do exactly that automatically for directories that doesn’t contain welcome-page (e.g. index.html)

Solution 4 — Html

There’s a free php script made by Celeron Dude that can do this called Celeron Dude Indexer 2. It doesn’t require .htaccess The source code is easy to understand and provides a good starting point.

celeron dude indexer

Solution 5 — Html

Did you try to allow it for this directory via .htaccess?

I use this for some of my directories where directory listing is disabled by my provider

Solution 6 — Html

If you have a staging server that has directory listing enabled, then you can copy the index.html to the production server.

wget https://staging/dir/index.html # do any additional processing on index.html scp index.html prod/dir

Solution 7 — Html

This can’t be done with pure HTML.

However if you have access to PHP on the Apache server (you tagged the post «apache») it can be done easilly — se the PHP glob function. If not — you might try Server Side Include — it’s an Apache thing, and I don’t know much about it.

Solution 8 — Html

If you have node then you can use fs like in this answer to get all the files:

const < resolve >= require('path'), < readdir >= require('fs').promises; async function getFiles(dir) < const dirents = await readdir(dir, < withFileTypes: true >); const files = await Promise.all(dirents.map((dirent) => < const res = resolve(dir, dirent.name); return dirent.isDirectory() ? getFiles(res) : res; >)); return Array.prototype.concat(. files); >

And you might use that like this:

You could call it at the command-line with something like this:

$ node thatScript.js > index.html

Источник

Оцените статью
© 2024 Программирование