Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

How to changed page title in django projects


I want changed page title (this not means html title)

I used default.html templates.


class KTLayout:
# Initialize the bootstrap files and page layout
def init(context):
# Init the theme API
KTTheme.init()

# Set a default layout globally. Can be set in the page level view file as well.
# See example in dashboards/views.py
context.update(
{
"layout": KTTheme.setLayout("default.html", context),
# "layout": KTTheme.setLayout("default_header_layout.html", context),
# "layout": KTTheme.setLayout("default_mini_sidebar_layout.html", context),
# "layout": KTTheme.setLayout("default_overlay_layout.html", context),
}
)


default.html

{% extends "layout/master.html" %}

{% block layout %}

<!--begin::App-->
<div class="d-flex flex-column flex-root app-root" id="kt_app_root">
<!--begin::Page-->
<div class="app-page flex-column flex-column-fluid" id="kt_app_page">
{% include "./partials/sidebar-layout/_header.html" %}
<!--begin::Wrapper-->
<div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
{% include "./partials/sidebar-layout/_sidebar.html" %}
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
<!--begin::Content wrapper-->
<div class="d-flex flex-column flex-column-fluid">
<!--begin::Content-->
<div id="kt_app_content" class="app-content flex-column-fluid">
<!--begin::Content container-->
<div id="kt_app_content_container" class="app-container container-fluid">
{% block content %}
{% endblock content %}
</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
{% include "./partials/sidebar-layout/_footer.html" %}
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>


_header.html

<!--begin::Header-->
<div id="kt_app_header" class="app-header">
<!--begin::Header container-->
<div class="app-container container-fluid d-flex align-items-stretch justify-content-between" id="kt_app_header_container">
<!--begin::Mobile menu toggle-->
<div class="d-flex align-items-center d-lg-none ms-n2 me-2" title="Show sidebar menu">
<div class="btn btn-icon btn-active-color-primary w-35px h-35px" id="kt_app_sidebar_mobile_toggle">{% getIcon "abstract-14" "fs-1" %}</div>
</div>
<!--end::Mobile menu toggle-->
<!--begin::Mobile logo-->
<div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0">
<a href="/%22%20class=%22d-lg-none" target="_blank">
<img alt="Logo" src="{% static "media/logos/default-dark.svg" %}" class="h-25px" />
</a>
</div>
<!--end::Mobile logo-->
<!--begin::Header wrapper-->
<div class="d-flex align-items-stretch justify-content-between flex-lg-grow-1" id="kt_app_header_wrapper">
{% include "./_page-title.html" %}
{% include "./header/_navbar.html" %}
</div>
<!--end::Header wrapper-->
</div>
<!--end::Header container-->
</div>
<!--end::Header-->


_page-title.html

<!--begin::Page title-->
<div data-kt-swapper="true" data-kt-swapper-mode="{default: "prepend", lg: "prepend"}" data-kt-swapper-parent="{default: "#kt_app_content_container", lg: "#kt_app_header_wrapper"}" class="page-title d-flex flex-column justify-content-center flex-wrap me-3 mb-5 mb-lg-0">
<!--begin::Title-->
<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
{% block page_title_string %}{% endblock page_title_string %} - My Project
<!--begin::Description-->
<span class="page-desc text-gray-500 fs-7 fw-semibold pt-1">
{% block page_title_description %}{% endblock page_title_description %}
</span>
<!--end::Description--></h1>
<!--end::Title-->
</div>
<!--end::Page title-->


page_title_string, page_title_description is Django template tag for changed page title.

And this is my index.html code snippet

index.html

{% extends layout %}

{% load i18n %}

{% block title %}{% translate "Test Page" %}{% endblock %}

{% block page_title_string %}Test Page{% endblock %}
{% block page_title_description %}My project "Test Page"{% endblock %}

{% block content %}
<!--begin::Card-->
<div class="card">


When I connect to index.html page, {% block title %} value shows well

But, page_title_string and page_title_description shows blank

How to changed page title?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi 닥터튜링

It looks like there might be an issue with how you're extending your templates and defining your blocks.

In your _page-title.html, ensure that the {% block page_title_string %} and {% block page_title_description %} tags are correctly defined:


<!--begin::Page title-->
<div data-kt-swapper="true" data-kt-swapper-mode="{default: "prepend", lg: "prepend"}" data-kt-swapper-parent="{default: "#kt_app_content_container", lg: "#kt_app_header_wrapper"}" class="page-title d-flex flex-column justify-content-center flex-wrap me-3 mb-5 mb-lg-0">
<!--begin::Title-->
<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
{% block page_title_string %}Default Page Title{% endblock page_title_string %} - My Project
<!--begin::Description-->
<span class="page-desc text-gray-500 fs-7 fw-semibold pt-1">
{% block page_title_description %}Default Page Description{% endblock page_title_description %}
</span>
<!--end::Description-->
</h1>
<!--end::Title-->
</div>
<!--end::Page title-->


In your index.html, extend default.html and define the {% block title %}, {% block page_title_string %}, and {% block page_title_description %} tags:


{% extends "default.html" %}

{% load i18n %}

{% block title %}{% translate "Test Page" %}{% endblock %}

{% block page_title_string %}Test Page{% endblock %}
{% block page_title_description %}My project "Test Page"{% endblock %}

{% block layout %}
<!-- Your layout content here -->
{% endblock layout %}


This structure should display the custom page title and description in your layout. Make sure to check for any typos or missing blocks in your actual code.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(