Is it possible to set different names for multipage in the sidebar and URL?

[Ginger-Tec]

I want the multipage in the sidebar to be displayed in Korean, while I want the URL to be independently named.

As a Korean user of streamlit, I am having an issue with the multipage feature. When using multipage, the page name and URL address are the same as the file name. If I name the page in Korean, the URL address will also be in Korean, making it inconvenient to copy and paste the URL.

ex)

• https://genportview.com/팩터_다분위_분석
• https://genportview.com/%ED%8C%A9%ED%84%B0_%EB%8B%A4%EB%B6%84%EC%9C%84_%EB%B6%84%EC%84%9D
  
  

I would like to know if there is a way to use different names for the page name and URL address in multipage. If this feature is not currently available, I am curious if it is possible to create it myself.

I am currently looking at GitHub - blackary/st_pages: An experimental version of Streamlit Multi-Page Apps but it seems that the functionality I want is not available.

Thank you.

[snehankekre]

Hi @Ginger-Tec

We have a long way to go in terms of internationalization/localization support. There is currently no way to set the URL independently of the page name.

I did find a hacky workaround though. The CSS hack also assumes you know the URL of all the pages beforehand. Here it is:

Create a utility .py script that contains the hack:

korean_pages.py

# korean_pages.py
import streamlit as st

def titles():
    return st.markdown(
        """
    <style>
:root {
  --text-color: #808495; /* Light text color */
  --bg-color: transparent; /* Dark background color */
}
a[href="http://localhost:8501/"] span:first-child {
    position: relative;
    z-index: 1;
    color: transparent;
}
a[href="http://localhost:8501/"] span:first-child::before {
    content: "홈페이지";
    position: absolute;
    left: 0;
    z-index: 2;
    color: var(--text-color);
    background-color: var(--bg-color);
}
a[href="http://localhost:8501/Page_two"] span:first-child {
    position: relative;
    z-index: 1;
    color: transparent;
}
a[href="http://localhost:8501/Page_two"] span:first-child::before {
    content: "감자";
    position: absolute;
    left: 0;
    z-index: 2;
    color: var(--text-color);
    background-color: var(--bg-color);
}
a[href="http://localhost:8501/About"] span:first-child {
    position: relative;
    z-index: 1;
    color: transparent;
}
a[href="http://localhost:8501/About"] span:first-child::before {
    content: "주황색";
    position: absolute;
    left: 0;
    z-index: 2;
    color: var(--text-color);
    background-color: var(--bg-color);
}
a[href="http://localhost:8501/Page_three"] span:first-child {
    position: relative;
    z-index: 1;
    color: transparent;
}
a[href="http://localhost:8501/Page_three"] span:first-child::before {
    content: "사과";
    position: absolute;
    left: 0;
    z-index: 2;
    color: var(--text-color);
    background-color: var(--bg-color);
}
</style>
    """,
        unsafe_allow_html=True,
    )

The hack involves using CSS selectors to find each page title, set the existing title to look transparent, and overlay our new titles on the existing ones.

Next, on each page, import the utility and call the titles() function:

Home.py

import streamlit as st
from korean_pages import titles

st.set_page_config(page_title="Home", page_icon="🏠")
st.title("Home")
titles()

pages/2_Page_two.py

import streamlit as st
from korean_pages import titles

st.set_page_config(page_title="Page two")
st.title("Page two")
titles()

pages/About.py

import streamlit as st
from korean_pages import titles

st.set_page_config(page_title="About")
st.title("About")
titles()

pages/Page_three.py

import streamlit as st
from korean_pages import titles

st.set_page_config(page_title="three")
st.title("three")
titles()

Another drawback is that when you change pages, you briefly see the old names flash.

[Ginger-Tec]

snehankekre, thank you so much.

I really appreciate you providing a solution and it’s useful enough for me to adopt it.

I’m currently using streamlit very effectively for my work, and Korean users who use the genportview service made with streamlit are also very satisfied.

Thank you.