diff --git a/.github/actions/build-mdbook/action.yaml b/.github/actions/build-mdbook/action.yaml
index 6b54628c..0007031a 100644
--- a/.github/actions/build-mdbook/action.yaml
+++ b/.github/actions/build-mdbook/action.yaml
@@ -42,3 +42,12 @@ runs:
       env:
         RUST_LOG: INFO
       shell: bash
+
+    - name: Install mdbook-i18n-helpers
+      run: cargo install mdbook-i18n-helpers --locked --version 0.3.5
+      shell: bash
+
+    - name: Install i18n-report
+      run: cargo install i18n-report --locked --version 0.2.0
+      shell: bash
+  
\ No newline at end of file
diff --git a/.github/workflows/build.sh b/.github/workflows/build.sh
new file mode 100755
index 00000000..43e4843f
--- /dev/null
+++ b/.github/workflows/build.sh
@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+set -Eeuo pipefail
+
+# Usage: build.sh <book-lang> <dest-dir>
+#
+# Build the course as of the date specified specified in the
+# POT-Creation-Date header of po/$book_lang.po. The output can be
+# found in $dest_dir.
+#
+
+book_lang=${1:?"Usage: $0 <book-lang> <dest-dir>"}
+dest_dir=${2:?"Usage: $0 <book-lang> <dest-dir>"}
+
+if [ "$book_lang" = "en" ]; then
+    echo "::group::Building English course"
+else
+    pot_creation_date=$(grep --max-count 1 '^"POT-Creation-Date:' "po/$book_lang.po" | sed -E 's/".*: (.*)\\n"/\1/')
+    pot_creation_date=${pot_creation_date:-now}
+    echo "::group::Building $book_lang translation as of $pot_creation_date"
+
+    export MDBOOK_BOOK__LANGUAGE=$book_lang
+fi
+
+mdbook build -d "$dest_dir"
+
+echo "::endgroup::"
diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index 5e9cbc19..b9c40216 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -54,11 +54,40 @@ jobs:
     env:
       # Colors don't seem to work properly with the multiline commands.
       NO_COLOR: 1
+      # Update the language picker in index.hbs to link new languages.
+      LANGUAGES: zh_CN
     steps:
       - uses: actions/checkout@v4
+
+      - name: Install Gettext
+        run: |
+          sudo apt update
+          sudo apt install gettext
+
       - uses: ./.github/actions/build-mdbook
         with:
           with_linkcheck: "false"
+
+      - name: Build course in English
+        run: .github/workflows/build.sh en build
+      
+      - name: Build all translations
+        run: |
+          for po_lang in ${{ env.LANGUAGES }}; do
+              .github/workflows/build.sh $po_lang build/$po_lang
+              mv build/$po_lang/html build/html/$po_lang
+          done
+
+      - name: Build translation report
+        run: i18n-report report build/html/translation-report.html po/*.po
+
+      - name: Build synced translation report
+        run: |
+          cp -r po synced-po
+          MDBOOK_OUTPUT='{"xgettext": {"pot-file": "messages.pot", "granularity": 0}}' mdbook build -d synced-po
+          for file in synced-po/*.po; do msgmerge --update $file synced-po/messages.pot ; done
+          i18n-report report build/html/synced-translation-report.html synced-po/*.po
+
       - uses: ./.github/actions/set-up-walrus
         with:
           SUI_ADDRESS: "${{ vars.SUI_ADDRESS }}"
diff --git a/book.toml b/book.toml
index ff00a24b..37e73bd7 100644
--- a/book.toml
+++ b/book.toml
@@ -11,7 +11,10 @@ extra-watch-dirs = ["po"]
 
 [output.html]
 theme = "theme"
-additional-css = ["./mdbook-admonish.css"]
+additional-css = [
+  "theme/css/mdbook-admonish.css",
+  "theme/css/language-picker.css",
+]
 
 [output.linkcheck]
 optional = true
diff --git a/po/zh_CN.po b/po/zh_CN.po
index f5ae4b74..578874e4 100644
--- a/po/zh_CN.po
+++ b/po/zh_CN.po
@@ -1743,7 +1743,7 @@ msgid ""
 "The encoding is _systematic_, meaning that some storage nodes hold part of "
 "the original blob, allowing for fast random-access reads."
 msgstr ""
-"编码是_系统化_的，这意味着一些存储节点持有原始blob的一部分，从而允许快速随机"
+"编码是 _系统化_ 的，这意味着一些存储节点持有原始blob的一部分，从而允许快速随机"
 "访问读取。"
 
 #: docs/design/encoding.md:17
@@ -2368,7 +2368,7 @@ msgstr ""
 
 #: docs/design/properties.md:3
 msgid "Walrus assurance and security properties"
-msgstr "基本架构和安全假设"
+msgstr "Walrus 保证和安全属性"
 
 #: docs/design/properties.md:5
 msgid ""
@@ -6797,7 +6797,7 @@ msgid ""
 "Assume the developer uses the SuiNS name `dapp.sui` to point to the object "
 "ID of the created Walrus Site."
 msgstr ""
-"** 站点发布 **（步骤 0）：站点开发人员使用 [`site-builder`](#the-site-"
+"**站点发布**（步骤 0）：站点开发人员使用 [`site-builder`](#the-site-"
 "builder) 或利用发布器发布 Walrus 站点。假设开发人员使用 SuiNS 名称 `dapp."
 "sui` 指向创建的 Walrus 站点的对象 ID。"
 
@@ -6806,7 +6806,7 @@ msgid ""
 "**Browsing starts** (step 1): A client browses `dapp.walrus.site/index.html` "
 "in their browser."
 msgstr ""
-"** 浏览开始 **（步骤 1）：客户端在其浏览器中浏览 `dapp.walrus.site/index."
+"**浏览开始**（步骤 1）：客户端在其浏览器中浏览 `dapp.walrus.site/index."
 "html`。"
 
 #: docs/walrus-sites/overview.md:123
@@ -6816,7 +6816,7 @@ msgid ""
 "service worker for `dapp.walrus.site`. The page is refreshed to activate the "
 "service worker."
 msgstr ""
-"** 服务工作线程安装 **（步骤 2-6）：浏览器连接到托管在 `walrus.site` 的门户，"
+"**服务工作线程安装**（步骤 2-6）：浏览器连接到托管在 `walrus.site` 的门户，"
 "该门户响应一个页面，该页面为 `dapp.walrus.site` 安装服务工作线程。页面刷新以"
 "激活服务工作线程。"
 
@@ -6830,7 +6830,7 @@ msgid ""
 "index.html`, and extracts its Walrus blob ID and headers (see the [advanced "
 "section on headers](./routing.md))."
 msgstr ""
-"** 站点解析 **（步骤 7-10）：现在安装的服务工作线程解释其 _来源_ `dapp."
+"**站点解析**（步骤 7-10）：现在安装的服务工作线程解释其 _来源_ `dapp."
 "walrus.site`，并进行 `dapp.sui` 的 SuiNS 解析，获取相关的对象 ID。使用对象 "
 "ID，然后获取对象的动态字段（还检查 [重定向](./portal.md)）。从动态字段中，它"
 "选择 `index.html` 的字段，并提取其 Walrus blob ID 和头信息（请参阅 [头信息高"
@@ -6841,7 +6841,7 @@ msgid ""
 "**Blob fetch** (steps 11-14): Given the blob ID, the service worker queries "
 "a Walrus aggregator for the blob."
 msgstr ""
-"** Blob 获取 **（步骤 11-14）：给定 blob ID，服务工作线程会向 Walrus 聚合器查"
+"**Blob 获取**（步骤 11-14）：给定 blob ID，服务工作线程会向 Walrus 聚合器查"
 "询 blob。"
 
 #: docs/walrus-sites/overview.md:133
@@ -6850,7 +6850,7 @@ msgid ""
 "the bytes for `/index.html`, and its headers, it can craft a response that "
 "is then rendered by the browser."
 msgstr ""
-"** 返回响应 **（步骤 15-16）：现在服务工作线程已经获取了 `/index.html` 的字节"
+"**返回响应**（步骤 15-16）：现在服务工作线程已经获取了 `/index.html` 的字节"
 "及其头信息，它可以构建一个响应，然后由浏览器渲染。"
 
 #: docs/walrus-sites/overview.md:137
diff --git a/theme/css/language-picker.css b/theme/css/language-picker.css
new file mode 100644
index 00000000..9847dcd1
--- /dev/null
+++ b/theme/css/language-picker.css
@@ -0,0 +1,13 @@
+#language-list {
+    left: auto;
+    right: 10px;
+  }
+  
+  [dir="rtl"] #language-list {
+    left: 10px;
+    right: auto;
+  }
+  
+  #language-list a {
+    color: inherit;
+  }
\ No newline at end of file
diff --git a/mdbook-admonish.css b/theme/css/mdbook-admonish.css
similarity index 100%
rename from mdbook-admonish.css
rename to theme/css/mdbook-admonish.css
diff --git a/theme/index.hbs b/theme/index.hbs
new file mode 100644
index 00000000..7eb135e7
--- /dev/null
+++ b/theme/index.hbs
@@ -0,0 +1,411 @@
+<!DOCTYPE HTML>
+<html lang="{{ language }}" class="{{ default_theme }}" dir="{{ text_direction }}">
+    <head>
+        <!-- Book generated using mdBook -->
+        <meta charset="UTF-8">
+        <title>{{ title }}</title>
+        {{#if is_print }}
+        <meta name="robots" content="noindex">
+        {{/if}}
+        {{#if base_url}}
+        <base href="{{ base_url }}">
+        {{/if}}
+
+
+        <!-- Custom HTML head -->
+        {{> head}}
+
+        <meta name="description" content="{{ description }}">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="theme-color" content="#ffffff">
+
+        {{#if favicon_svg}}
+        <link rel="icon" href="{{ path_to_root }}favicon.svg">
+        {{/if}}
+        {{#if favicon_png}}
+        <link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
+        {{/if}}
+        <link rel="stylesheet" href="{{ path_to_root }}css/variables.css">
+        <link rel="stylesheet" href="{{ path_to_root }}css/general.css">
+        <link rel="stylesheet" href="{{ path_to_root }}css/chrome.css">
+        {{#if print_enable}}
+        <link rel="stylesheet" href="{{ path_to_root }}css/print.css" media="print">
+        {{/if}}
+
+        <!-- Fonts -->
+        <link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
+        {{#if copy_fonts}}
+        <link rel="stylesheet" href="{{ path_to_root }}fonts/fonts.css">
+        {{/if}}
+
+        <!-- Highlight.js Stylesheets -->
+        <link rel="stylesheet" href="{{ path_to_root }}highlight.css">
+        <link rel="stylesheet" href="{{ path_to_root }}tomorrow-night.css">
+        <link rel="stylesheet" href="{{ path_to_root }}ayu-highlight.css">
+
+        <!-- Custom theme stylesheets -->
+        {{#each additional_css}}
+        <link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
+        {{/each}}
+
+        {{#if mathjax_support}}
+        <!-- MathJax -->
+        <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+        {{/if}}
+    </head>
+    <body class="sidebar-visible no-js">
+    <div id="body-container">
+        <!-- Provide site root to javascript -->
+        <script>
+            var path_to_root = "{{ path_to_root }}";
+            var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
+        </script>
+
+        <!-- Work around some values being stored in localStorage wrapped in quotes -->
+        <script>
+            try {
+                var theme = localStorage.getItem('mdbook-theme');
+                var sidebar = localStorage.getItem('mdbook-sidebar');
+
+                if (theme.startsWith('"') && theme.endsWith('"')) {
+                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
+                }
+
+                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
+                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
+                }
+            } catch (e) { }
+        </script>
+
+        <!-- Set the theme before any content is loaded, prevents flash -->
+        <script>
+            var theme;
+            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
+            if (theme === null || theme === undefined) { theme = default_theme; }
+            var html = document.querySelector('html');
+            html.classList.remove('{{ default_theme }}')
+            html.classList.add(theme);
+            var body = document.querySelector('body');
+            body.classList.remove('no-js')
+            body.classList.add('js');
+        </script>
+
+        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
+
+        <!-- Hide / unhide sidebar before it is displayed -->
+        <script>
+            var body = document.querySelector('body');
+            var sidebar = null;
+            var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
+            if (document.body.clientWidth >= 1080) {
+                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
+                sidebar = sidebar || 'visible';
+            } else {
+                sidebar = 'hidden';
+            }
+            sidebar_toggle.checked = sidebar === 'visible';
+            body.classList.remove('sidebar-visible');
+            body.classList.add("sidebar-" + sidebar);
+        </script>
+
+        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
+            <div class="sidebar-scrollbox">
+                {{#toc}}{{/toc}}
+            </div>
+            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
+                <div class="sidebar-resize-indicator"></div>
+            </div>
+        </nav>
+
+        <!-- Track and set sidebar scroll position -->
+        <script>
+            var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
+            sidebarScrollbox.addEventListener('click', function(e) {
+                if (e.target.tagName === 'A') {
+                    sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
+                }
+            }, { passive: true });
+            var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
+            sessionStorage.removeItem('sidebar-scroll');
+            if (sidebarScrollTop) {
+                // preserve sidebar scroll position when navigating via links within sidebar
+                sidebarScrollbox.scrollTop = sidebarScrollTop;
+            } else {
+                // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
+                var activeSection = document.querySelector('#sidebar .active');
+                if (activeSection) {
+                    activeSection.scrollIntoView({ block: 'center' });
+                }
+            }
+        </script>
+
+        <div id="page-wrapper" class="page-wrapper">
+
+            <div class="page">
+                {{> header}}
+                <div id="menu-bar-hover-placeholder"></div>
+                <div id="menu-bar" class="menu-bar sticky">
+                    <div class="left-buttons">
+                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
+                            <i class="fa fa-bars"></i>
+                        </label>
+                        <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
+                            <i class="fa fa-paint-brush"></i>
+                        </button>
+                        <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
+                            <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
+                            <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
+                        </ul>
+                        {{#if search_enabled}}
+                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
+                            <i class="fa fa-search"></i>
+                        </button>
+                        {{/if}}
+                    </div>
+
+                    <h1 class="menu-title">{{ book_title }}</h1>
+
+                    <div class="right-buttons">
+                        <button id="language-toggle" class="icon-button" type="button"
+                                title="Change language" aria-label="Change language"
+                                aria-haspopup="true" aria-expanded="false"
+                                aria-controls="language-list">
+                            <i class="fa fa-globe"></i>
+                        </button>
+                        <ul id="language-list" class="theme-popup" aria-label="Languages" role="menu">
+                          <li role="none"><button role="menuitem" class="theme">
+                              <a id="en">English</a>
+                          </button></li>
+                          <li role="none"><button role="menuitem" class="theme">
+                              <a id="zh_CN">Chinese Simplified (简体中文)</a>
+                          </button></li>
+                        </ul>
+                        <script>
+                          let langToggle = document.getElementById("language-toggle");
+                          let langList = document.getElementById("language-list");
+                          langToggle.addEventListener("click", (event) => {
+                              langList.style.display = langList.style.display == "block" ? "none" : "block";
+                          });
+                          let selectedLang = document.getElementById("{{ language }}");
+                          if (selectedLang) {
+                              selectedLang.parentNode.classList.add("theme-selected");
+                          }
+
+                          // The path to the root, taking the current
+                          // language into account.
+                          {{#if (eq language "en")}}
+                          let full_path_to_root = "{{ path_to_root }}";
+                          {{else}}
+                          let full_path_to_root = "{{ path_to_root }}../";
+                          {{/if}}
+                          // The page path (mdbook only gives us
+                          // access to the path to the Markdown file).
+                          let path = "{{ path }}".replace(/\.md$/, ".html");
+                          for (let lang of langList.querySelectorAll("a")) {
+                              if (lang.id == "en") {
+                                  lang.href = `${full_path_to_root}${path}`;
+                              } else {
+                                  lang.href = `${full_path_to_root}${lang.id}/${path}`;
+                              }
+                          }
+
+                          // When the user clicks a list item, the page jump is performed, just like clicking the internal <a> tag.
+                          langList.querySelectorAll("li").forEach(function(li) {
+                            li.addEventListener("click", function(event) {
+                              event.preventDefault();
+        
+                              let link = this.querySelector("a");
+                              if (link && window.location.href !== link.href) {
+                                window.location.href = link.href;
+                              }
+                            });
+                          });
+                        </script>
+
+                        {{#if print_enable}}
+                        <a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
+                            <i id="print-button" class="fa fa-print"></i>
+                        </a>
+                        {{/if}}
+                        {{#if git_repository_url}}
+                        <a href="{{git_repository_url}}" title="Git repository" aria-label="Git repository">
+                            <i id="git-repository-button" class="fa {{git_repository_icon}}"></i>
+                        </a>
+                        {{/if}}
+                        {{#if git_repository_edit_url}}
+                        {{#if (eq language "en")}}
+                        <a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit"
+                           target="_blank">
+                            <i id="git-edit-button" class="fa fa-edit"></i>
+                        </a>
+                        {{else}}
+                        <a href="https://github.com/MystenLabs/walrus-docs/edit/main/po/{{language}}.po"
+                           title="Suggest an edit to the translation" aria-label="Suggest an edit to the translation"
+                           target="_blank">
+                            <i id="git-edit-button" class="fa fa-edit"></i>
+                        </a>
+                        {{/if}}
+                        {{/if}}
+
+                    </div>
+                </div>
+
+                {{#if search_enabled}}
+                <div id="search-wrapper" class="hidden">
+                    <form id="searchbar-outer" class="searchbar-outer">
+                        <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
+                    </form>
+                    <div id="searchresults-outer" class="searchresults-outer hidden">
+                        <div id="searchresults-header" class="searchresults-header"></div>
+                        <ul id="searchresults">
+                        </ul>
+                    </div>
+                </div>
+                {{/if}}
+
+                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
+                <script>
+                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
+                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
+                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
+                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
+                    });
+                </script>
+
+                <div id="content" class="content">
+                    <main>
+                        {{{ content }}}
+                    </main>
+
+                    <nav class="nav-wrapper" aria-label="Page navigation">
+                        <!-- Mobile navigation buttons -->
+                        {{#previous}}
+                            <a rel="prev" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
+                                <i class="fa fa-angle-left"></i>
+                            </a>
+                        {{/previous}}
+
+                        {{#next}}
+                            <a rel="next prefetch" href="{{ path_to_root }}{{link}}" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
+                                <i class="fa fa-angle-right"></i>
+                            </a>
+                        {{/next}}
+
+                        <div style="clear: both"></div>
+                    </nav>
+                </div>
+            </div>
+
+            <nav class="nav-wide-wrapper" aria-label="Page navigation">
+                {{#previous}}
+                    <a rel="prev" href="{{ path_to_root }}{{link}}" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
+                        <i class="fa fa-angle-left"></i>
+                    </a>
+                {{/previous}}
+
+                {{#next}}
+                    <a rel="next prefetch" href="{{ path_to_root }}{{link}}" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
+                        <i class="fa fa-angle-right"></i>
+                    </a>
+                {{/next}}
+            </nav>
+
+        </div>
+
+        {{#if live_reload_endpoint}}
+        <!-- Livereload script (if served using the cli tool) -->
+        <script>
+            const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsAddress = wsProtocol + "//" + location.host + "/" + "{{{live_reload_endpoint}}}";
+            const socket = new WebSocket(wsAddress);
+            socket.onmessage = function (event) {
+                if (event.data === "reload") {
+                    socket.close();
+                    location.reload();
+                }
+            };
+
+            window.onbeforeunload = function() {
+                socket.close();
+            }
+        </script>
+        {{/if}}
+
+        {{#if google_analytics}}
+        <!-- Google Analytics Tag -->
+        <script>
+            var localAddrs = ["localhost", "127.0.0.1", ""];
+
+            // make sure we don't activate google analytics if the developer is
+            // inspecting the book locally...
+            if (localAddrs.indexOf(document.location.hostname) === -1) {
+                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+                })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+                ga('create', '{{google_analytics}}', 'auto');
+                ga('send', 'pageview');
+            }
+        </script>
+        {{/if}}
+
+        {{#if playground_line_numbers}}
+        <script>
+            window.playground_line_numbers = true;
+        </script>
+        {{/if}}
+
+        {{#if playground_copyable}}
+        <script>
+            window.playground_copyable = true;
+        </script>
+        {{/if}}
+
+        {{#if playground_js}}
+        <script src="{{ path_to_root }}ace.js"></script>
+        <script src="{{ path_to_root }}editor.js"></script>
+        <script src="{{ path_to_root }}mode-rust.js"></script>
+        <script src="{{ path_to_root }}theme-dawn.js"></script>
+        <script src="{{ path_to_root }}theme-tomorrow_night.js"></script>
+        {{/if}}
+
+        {{#if search_js}}
+        <script src="{{ path_to_root }}elasticlunr.min.js"></script>
+        <script src="{{ path_to_root }}mark.min.js"></script>
+        <script src="{{ path_to_root }}searcher.js"></script>
+        {{/if}}
+
+        <script src="{{ path_to_root }}clipboard.min.js"></script>
+        <script src="{{ path_to_root }}highlight.js"></script>
+        <script src="{{ path_to_root }}book.js"></script>
+
+        <!-- Custom JS scripts -->
+        {{#each additional_js}}
+        <script src="{{ ../path_to_root }}{{this}}"></script>
+        {{/each}}
+
+        {{#if is_print}}
+        {{#if mathjax_support}}
+        <script>
+        window.addEventListener('load', function() {
+            MathJax.Hub.Register.StartupHook('End', function() {
+                window.setTimeout(window.print, 100);
+            });
+        });
+        </script>
+        {{else}}
+        <script>
+        window.addEventListener('load', function() {
+            window.setTimeout(window.print, 100);
+        });
+        </script>
+        {{/if}}
+        {{/if}}
+
+    </div>
+    </body>
+</html>
\ No newline at end of file