Modify homepage for multipage

Panel
2

Hi @rh1

You can serve a .html file or jinja .html template if you want the index page at / to load really fast.

You can see how the built in template works at index.html. You will notice that you can refer to a list of items containing the relative urls to the apps.

But before diving into a custom template I would recommend using on of the built in templates like the FastListTemplate and make a special index.py file that contains for example only a markdown component. It can also load pretty fast and will make things easier and more consistent.

Jinja Template Examle

Here is an example of a basic jinja index template

app2.py

import panel as pn

pn.panel("Hello World").servable()

app1.py

import panel as pn

pn.panel("Hello World").servable()

index.html

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="UTF-8">  
  <title>Image Gallery</title>  
  <style>  
    .gallery {  
      display: grid;  
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
      grid-gap: 20px;  
      margin: 20px;  
    }  
      
    .gallery img {  
      width: 100%;  
      height: auto;  
      border-radius: 5px;  
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);  
    }  
  </style>  
</head>  
<body>  
  <div class="gallery">  
    {% for item in items %}  
      <a href=".{{ item }}">{{ item }}</a>  
    {% end for %}  
  </div>  
</body>  
</html>  

panel serve app1.py app2.py --index index.html