Modify homepage for multipage

Panel
1

Hi all,

just follow Multi Page Apps — Panel v1.3.2 and we can run multipage instantly with the code

panel serve page1.py page2.ipynb

and when visited localhost:5006 there will be a default home page which is good because looks like indexing all of the page run in the previous above code.
Result:

image
image1906×538 76.3 KB

the question is how to modify the default homepage, where is the location of default homepage?

if we use the other code

panel serve page1.py page2.ipynb --index=page1

we can change entirely default to page 1 but looks like too slow to display
thanks

1 Like
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

3

Hi @Marc many thanks for your advise. will do with built in templates.

Actually the default one is very nice, but if we can modify some thing for example logo in the header, header background image, etc will be perfect (just replicate the page into our folder). is it located some where in holoviz/panel apps folder?

thanks

4

You can copy and adjust index.html. Then use it via --index path/to/your/new/index.html.

1 Like
5

thanks @Marc, apologize one more question I just found is how to mapping images/logo in the html page since when I put with the full address for example :

  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon.ico">

or 
<link rel="icon" type="image/png" sizes="32x32" href="localhost/assets/favicon.ico">

there will be no image show up because panel didn’t find the image. where should i put so apps correctly read the source address.

same thing in pn.markdown when want to put from local image, there is no output show up.

thanks

1 Like