[assets] configurable URL for static resources (#7911)

* static url

* add cors support for static resources

* [assets] work on the migration to configurable url for assets

Signed-off-by: Jakob Ackermann <das7pad@outlook.com>

* [misc] fix whitespace

Signed-off-by: Jakob Ackermann <das7pad@outlook.com>

* [assets] fix the loading of the manifest.json

It is generated dynamically, and as such can not be served by the cdn.

Signed-off-by: Jakob Ackermann <das7pad@outlook.com>

* Revert "add cors support for static resources"

This reverts commit 42f964fd181dbb8b139808b9be623470d4f0e40f

Signed-off-by: Jakob Ackermann <das7pad@outlook.com>

* [docs] add the STATIC_URL_PREFIX option

Signed-off-by: Jakob Ackermann <das7pad@outlook.com>

* [docs] reverse-proxy: nginx: add two setups for STATIC_URL_PREFIX

Signed-off-by: Jakob Ackermann <das7pad@outlook.com>

* [assets] migrate the url of a new asset to the static url prefix

REF: f2a3abc683ad4b2177b7c7c6160a2c0b4316120a
Signed-off-by: Jakob Ackermann <das7pad@outlook.com>

16 files changed, 128 insertions, 128 deletions

diff --git a/templates/admin/hook_new.tmpl b/templates/admin/hook_new.tmpl
index c047efe9a2..2292377f6e 100644
--- a/templates/admin/hook_new.tmpl
+++ b/templates/admin/hook_new.tmpl
@@ -11,19 +11,19 @@
 			{{end}}
 			<div class="ui right">
 				{{if eq .HookType "gitea"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/gitea-sm.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
 				{{else if eq .HookType "gogs"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/gogs.ico">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/gogs.ico">
 				{{else if eq .HookType "slack"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/slack.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/slack.png">
 				{{else if eq .HookType "discord"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/discord.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/discord.png">
 				{{else if eq .HookType "dingtalk"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/dingtalk.ico">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/dingtalk.ico">
 				{{else if eq .HookType "telegram"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/telegram.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/telegram.png">
 				{{else if eq .HookType "msteams"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/msteams.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/msteams.png">
 				{{end}}
 			</div>
 		</h4>
diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index 13718620da..7185b20377 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -12,38 +12,38 @@
 
 	{{template "base/footer_content" .}}
 
-	<script src="{{AppSubUrl}}/vendor/plugins/jquery/jquery.min.js?v=3.4.1"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/jquery-migrate/jquery-migrate.min.js?v=3.0.1"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery/jquery.min.js?v=3.4.1"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery-migrate/jquery-migrate.min.js?v=3.0.1"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js"></script>
 {{if .RequireSimpleMDE}}
-	<script src="{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.js"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/codemirror/addon/mode/loadmode.js"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/codemirror/mode/meta.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js"></script>
 	<script>
-		CodeMirror.modeURL =  "{{AppSubUrl}}/vendor/plugins/codemirror/mode/%N/%N.js";
+		CodeMirror.modeURL =  "{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/%N/%N.js";
 	</script>
 {{end}}
 {{if .RequireGitGraph}}
 	<!-- graph -->
-	<script src="{{AppSubUrl}}/vendor/plugins/gitgraph/gitgraph.js"></script>
-	<script src="{{AppSubUrl}}/js/draw.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.js"></script>
+	<script src="{{StaticUrlPrefix}}/js/draw.js"></script>
 {{end}}
 
 <!-- Third-party libraries -->
 {{if .RequireHighlightJS}}
-	<script src="{{AppSubUrl}}/vendor/plugins/highlight/highlight.pack.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/highlight/highlight.pack.js"></script>
 {{end}}
 {{if .RequireMinicolors}}
-	<script src="{{AppSubUrl}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js"></script>
 {{end}}
 {{if .RequireDatetimepicker}}
-	<script src="{{AppSubUrl}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js"></script>
 {{end}}
 {{if .RequireDropzone}}
-	<script src="{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js"></script>
 {{end}}
 {{if .RequireU2F}}
-	<script src="{{AppSubUrl}}/vendor/plugins/u2f/index.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/u2f/index.js"></script>
 {{end}}
 {{if .EnableCaptcha}}
 	{{if eq .CaptchaType "recaptcha"}}
@@ -51,7 +51,7 @@
 	{{end}}
 {{end}}
 {{if .RequireTribute}}
-	<script src="{{AppSubUrl}}/vendor/plugins/tribute/tribute.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.min.js"></script>
 	<script>
 		var issuesTribute = new Tribute({
 			values: [
@@ -101,7 +101,7 @@
 					return ':' + item.original + ':';
 				},
 				menuItemTemplate: function (item) {
-					return '<img class="emoji" src="{{AppSubUrl}}/vendor/plugins/emojify/images/' + item.original + '.png"/>' + item.original;
+					return '<img class="emoji" src="{{StaticUrlPrefix}}/vendor/plugins/emojify/images/' + item.original + '.png"/>' + item.original;
 				}
 			}]
 		});
@@ -115,16 +115,16 @@
 		}
 	</script>
 {{end}}
-	<script src="{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/clipboard/clipboard.min.js"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/vue/vue.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/clipboard/clipboard.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js"></script>
 
 	<!-- JavaScript -->
-	<script src="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.js"></script>
-	<script src="{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/semantic/semantic.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
 {{if .EnableHeatmap}}
-	<script src="{{AppSubUrl}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js" charset="utf-8"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js" charset="utf-8"></script>
 	<script type="text/javascript">
 		initHeatmap('user-heatmap', '{{.HeatmapUser}}');
 	</script>
diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl
index 6f680d4cb8..364e58a3d0 100644
--- a/templates/base/footer_content.tmpl
+++ b/templates/base/footer_content.tmpl
@@ -16,7 +16,7 @@
 					{{end}}
 				</div>
 			</div>
-			<a href="{{AppSubUrl}}/vendor/librejs.html" data-jslicense="1">JavaScript licenses</a>
+			<a href="{{StaticUrlPrefix}}/vendor/librejs.html" data-jslicense="1">JavaScript licenses</a>
 			{{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
 			<a target="_blank" rel="noopener noreferrer" href="https://gitea.io">{{.i18n.Tr "website"}}</a>
 			{{if (or .ShowFooterVersion .PageIsAdmin)}}<span class="version">{{GoVer}}</span>{{end}}
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index 7cdfdd34be..ae2b6b954d 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -70,35 +70,35 @@
 	THE SOFTWARE.
 	---
 	Licensing information for additional javascript libraries can be found at:
-	  {{AppSubUrl}}/vendor/librejs.html
+	  {{StaticUrlPrefix}}/vendor/librejs.html
 
 	@licend  The above is the entire license notice
         for the JavaScript code in this page.
 	*/`}}
 	</script>
 
-	<link rel="shortcut icon" href="{{AppSubUrl}}/img/favicon.png" />
-	<link rel="mask-icon" href="{{AppSubUrl}}/img/gitea-safari.svg" color="#609926">
-	<link rel="preload" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
-	<noscript><link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css"></noscript>
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/octicons/octicons.min.css">
+	<link rel="shortcut icon" href="{{StaticUrlPrefix}}/img/favicon.png" />
+	<link rel="mask-icon" href="{{StaticUrlPrefix}}/img/gitea-safari.svg" color="#609926">
+	<link rel="preload" href="{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
+	<noscript><link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css"></noscript>
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.min.css">
 
 {{if .RequireSimpleMDE}}
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css">
 {{end}}
 
 {{if .RequireGitGraph}}
 	<!-- graph -->
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/gitgraph/gitgraph.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.css">
 {{end}}
 
 {{if .RequireTribute}}
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/tribute/tribute.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css">
 {{end}}
 
 	<!-- Stylesheet -->
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.css">
-	<link rel="stylesheet" href="{{AppSubUrl}}/css/index.css?v={{MD5 AppVer}}">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/semantic/semantic.min.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
 	<noscript>
 		<style>
 			.dropdown:hover > .menu { display: block; }
@@ -107,25 +107,25 @@
 	</noscript>
 
 {{if .RequireHighlightJS}}
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/highlight/github.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css">
 {{end}}
 {{if .RequireMinicolors}}
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css">
 {{end}}
 {{if .RequireDatetimepicker}}
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css">
 {{end}}
 {{if .RequireDropzone}}
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css">
 {{end}}
 {{if .EnableHeatmap}}
-	<link rel="stylesheet" href="{{AppSubUrl}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css">
 {{end}}
 	<style class="list-search-style"></style>
 
-	<script src="{{AppSubUrl}}/vendor/plugins/promise-polyfill/polyfill.min.js"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/cssrelpreload/loadCSS.min.js"></script>
-	<script src="{{AppSubUrl}}/vendor/plugins/cssrelpreload/cssrelpreload.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/promise-polyfill/polyfill.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/loadCSS.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/cssrelpreload.min.js"></script>
 {{if .PageIsUserProfile}}
 	<meta property="og:title" content="{{.Owner.Name}}" />
 	<meta property="og:type" content="profile" />
@@ -144,16 +144,16 @@
 {{else}}
 	<meta property="og:title" content="{{AppName}}">
 	<meta property="og:type" content="website" />
-	<meta property="og:image" content="{{AppUrl}}img/gitea-lg.png" />
+	<meta property="og:image" content="{{StaticUrlPrefix}}img/gitea-lg.png" />
 	<meta property="og:url" content="{{AppUrl}}" />
 	<meta property="og:description" content="{{MetaDescription}}">
 {{end}}
 {{if .IsSigned }}
 	{{ if ne .SignedUser.Theme "gitea" }}
-		<link rel="stylesheet" href="{{AppSubUrl}}/css/theme-{{.SignedUser.Theme}}.css">
+		<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/theme-{{.SignedUser.Theme}}.css">
 	{{end}}
 {{else if ne DefaultTheme "gitea"}}
-	<link rel="stylesheet" href="{{AppSubUrl}}/css/theme-{{DefaultTheme}}.css">
+	<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/theme-{{DefaultTheme}}.css">
 {{end}}
 {{template "custom/header" .}}
 </head>
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 390a1fe804..fdba57d5bf 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -1,7 +1,7 @@
 <div class="ui container" id="navbar">
 	<div class="item brand" style="justify-content: space-between;">
 		<a href="{{AppSubUrl}}/">
-			<img class="ui mini image" src="{{AppSubUrl}}/img/gitea-sm.png">
+			<img class="ui mini image" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
 		</a>
 		<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
 			<i class="sidebar icon"></i>
diff --git a/templates/home.tmpl b/templates/home.tmpl
index 2c7b9e0d61..6616e3c870 100644
--- a/templates/home.tmpl
+++ b/templates/home.tmpl
@@ -3,7 +3,7 @@
 	<div class="ui stackable middle very relaxed page grid">
 		<div class="sixteen wide center aligned centered column">
 			<div>
-				<img class="logo" src="{{AppSubUrl}}/img/gitea-lg.png" />
+				<img class="logo" src="{{StaticUrlPrefix}}/img/gitea-lg.png" />
 			</div>
 			<div class="hero">
 				<h1 class="ui icon header title">
diff --git a/templates/org/settings/hook_new.tmpl b/templates/org/settings/hook_new.tmpl
index 5db91011d8..c83957dc6a 100644
--- a/templates/org/settings/hook_new.tmpl
+++ b/templates/org/settings/hook_new.tmpl
@@ -10,19 +10,19 @@
 					{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
 					<div class="ui right">
 						{{if eq .HookType "gitea"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/gitea-sm.png">
+							<img class="img-13" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
 						{{else if eq .HookType "gogs"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/gogs.ico">
+							<img class="img-13" src="{{StaticUrlPrefix}}/img/gogs.ico">
 						{{else if eq .HookType "slack"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/slack.png">
+							<img class="img-13" src="{{StaticUrlPrefix}}/img/slack.png">
 						{{else if eq .HookType "discord"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/discord.png">
+							<img class="img-13" src="{{StaticUrlPrefix}}/img/discord.png">
 						{{else if eq .HookType "dingtalk"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/dingtalk.png">
+							<img class="img-13" src="{{StaticUrlPrefix}}/img/dingtalk.png">
 						{{else if eq .HookType "telegram"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/telegram.png">
+							<img class="img-13" src="{{StaticUrlPrefix}}/img/telegram.png">
 						{{else if eq .HookType "msteams"}}
-							<img class="img-13" src="{{AppSubUrl}}/img/msteams.png">
+							<img class="img-13" src="{{StaticUrlPrefix}}/img/msteams.png">
 						{{end}}
 					</div>
 				</h4>
diff --git a/templates/pwa/manifest_json.tmpl b/templates/pwa/manifest_json.tmpl
index 557bee5d76..793b42f2e1 100644
--- a/templates/pwa/manifest_json.tmpl
+++ b/templates/pwa/manifest_json.tmpl
@@ -3,22 +3,22 @@
     "name": "Gitea - Git with a cup of tea",
     "icons": [
       {
-        "src": "{{AppSubUrl}}/img/gitea-lg.png",
+        "src": "{{StaticUrlPrefix}}/img/gitea-lg.png",
         "type": "image/png",
         "sizes": "880x880"
       },
       {
-        "src": "{{AppSubUrl}}/img/gitea-sm.png",
+        "src": "{{StaticUrlPrefix}}/img/gitea-sm.png",
         "type": "image/png",
         "sizes": "120x120"
       },
       {
-        "src": "{{AppSubUrl}}/img/gitea-512.png",
+        "src": "{{StaticUrlPrefix}}/img/gitea-512.png",
         "type": "image/png",
         "sizes": "512x512"
       },
       {
-        "src": "{{AppSubUrl}}/img/gitea-192.png",
+        "src": "{{StaticUrlPrefix}}/img/gitea-192.png",
         "type": "image/png",
         "sizes": "192x192"
       }
@@ -28,4 +28,4 @@
     "background_color": "#FAFAFA",
     "display": "standalone",
     "theme_color": "{{ThemeColorMetaTag}}"
-  }
\ No newline at end of file
+  }
diff --git a/templates/pwa/serviceworker_js.tmpl b/templates/pwa/serviceworker_js.tmpl
index ee96cd5f68..5a2756cf24 100644
--- a/templates/pwa/serviceworker_js.tmpl
+++ b/templates/pwa/serviceworker_js.tmpl
@@ -1,55 +1,55 @@
 var STATIC_CACHE = 'static-cache-v1';
 var urlsToCache = [
   // js
-  '{{AppSubUrl}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js',
-  '{{AppSubUrl}}/vendor/plugins/jquery/jquery.min.js?v=3.4.1',
-  '{{AppSubUrl}}/vendor/plugins/jquery-migrate/jquery-migrate.min.js?v=3.0.1',
-  '{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.js',
-  '{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}',
-  '{{AppSubUrl}}/js/draw.js',
-  '{{AppSubUrl}}/vendor/plugins/clipboard/clipboard.min.js',
-  '{{AppSubUrl}}/vendor/plugins/gitgraph/gitgraph.js',
-  '{{AppSubUrl}}/vendor/plugins/vue/vue.min.js',
-  '{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js',
-  '{{AppSubUrl}}/vendor/plugins/cssrelpreload/loadCSS.min.js',
-  '{{AppSubUrl}}/vendor/plugins/cssrelpreload/cssrelpreload.min.js',
-  '{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.js',
-  '{{AppSubUrl}}/vendor/plugins/highlight/highlight.pack.js',
-  '{{AppSubUrl}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
-  '{{AppSubUrl}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
-  '{{AppSubUrl}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
-  '{{AppSubUrl}}/vendor/plugins/codemirror/mode/meta.js',
-  '{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery/jquery.min.js?v=3.4.1',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery-migrate/jquery-migrate.min.js?v=3.0.1',
+  '{{StaticUrlPrefix}}/vendor/plugins/semantic/semantic.min.js',
+  '{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/js/draw.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/clipboard/clipboard.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/loadCSS.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/cssrelpreload.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/highlight/highlight.pack.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.js',
 
   // css
-  '{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css',
-  '{{AppSubUrl}}/vendor/assets/octicons/octicons.min.css',
-  '{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.css',
-  '{{AppSubUrl}}/vendor/plugins/gitgraph/gitgraph.css',
-  '{{AppSubUrl}}/vendor/plugins/tribute/tribute.css',
-  '{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.css',
-  '{{AppSubUrl}}/css/index.css?v={{MD5 AppVer}}',
-  '{{AppSubUrl}}/vendor/plugins/highlight/github.css',
-  '{{AppSubUrl}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
-  '{{AppSubUrl}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css',
-  '{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.css',
+  '{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
+  '{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.min.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/semantic/semantic.min.css',
+  '{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css',
 {{if .IsSigned }}
 	{{ if ne .SignedUser.Theme "gitea" }}
-		'{{AppSubUrl}}/css/theme-{{.SignedUser.Theme}}.css',
+		'{{StaticUrlPrefix}}/css/theme-{{.SignedUser.Theme}}.css',
 	{{end}}
 {{else if ne DefaultTheme "gitea"}}
-	'{{AppSubUrl}}/css/theme-{{DefaultTheme}}.css',
+	'{{StaticUrlPrefix}}/css/theme-{{DefaultTheme}}.css',
 {{end}}
 
   // img
-  '{{AppSubUrl}}/img/gitea-sm.png',
-  '{{AppSubUrl}}/img/gitea-lg.png',
+  '{{StaticUrlPrefix}}/img/gitea-sm.png',
+  '{{StaticUrlPrefix}}/img/gitea-lg.png',
 
   // fonts
-  '{{AppSubUrl}}/vendor/plugins/semantic/themes/default/assets/fonts/icons.woff2',
-  '{{AppSubUrl}}/vendor/assets/octicons/octicons.woff2?ef21c39f0ca9b1b5116e5eb7ac5eabe6',
-  '{{AppSubUrl}}/vendor/assets/lato-fonts/lato-v14-latin-regular.woff2',
-  '{{AppSubUrl}}/vendor/assets/lato-fonts/lato-v14-latin-700.woff2'
+  '{{StaticUrlPrefix}}/vendor/plugins/semantic/themes/default/assets/fonts/icons.woff2',
+  '{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.woff2?ef21c39f0ca9b1b5116e5eb7ac5eabe6',
+  '{{StaticUrlPrefix}}/vendor/assets/lato-fonts/lato-v14-latin-regular.woff2',
+  '{{StaticUrlPrefix}}/vendor/assets/lato-fonts/lato-v14-latin-700.woff2'
 ];
 
 self.addEventListener('install', function (event) {
diff --git a/templates/repo/migrating.tmpl b/templates/repo/migrating.tmpl
index 34031d5653..0057325e91 100644
--- a/templates/repo/migrating.tmpl
+++ b/templates/repo/migrating.tmpl
@@ -9,7 +9,7 @@
 					<div class="ui stackable middle very relaxed page grid">
 						<div id="repo_migrating" class="sixteen wide center aligned centered column" repo="{{.Repo.Repository.FullName}}">
 							<div>
-								<img src="{{AppSubUrl}}/img/loading.png"/>
+								<img src="{{StaticUrlPrefix}}/img/loading.png"/>
 							</div>
 						</div>
 					</div>
diff --git a/templates/repo/settings/webhook/list.tmpl b/templates/repo/settings/webhook/list.tmpl
index 8fdae45b1b..d1784564dc 100644
--- a/templates/repo/settings/webhook/list.tmpl
+++ b/templates/repo/settings/webhook/list.tmpl
@@ -6,25 +6,25 @@
 			<div class="ui blue tiny button">{{.i18n.Tr "repo.settings.add_webhook"}}</div>
 			<div class="menu">
 				<a class="item" href="{{.BaseLink}}/gitea/new">
-					<img class="img-10" src="{{AppSubUrl}}/img/gitea-sm.png">Gitea
+					<img class="img-10" src="{{StaticUrlPrefix}}/img/gitea-sm.png">Gitea
 				</a>
 				<a class="item" href="{{.BaseLink}}/gogs/new">
-					<img class="img-10" src="{{AppSubUrl}}/img/gogs.ico">Gogs
+					<img class="img-10" src="{{StaticUrlPrefix}}/img/gogs.ico">Gogs
 				</a>
 				<a class="item" href="{{.BaseLink}}/slack/new">
-					<img class="img-10" src="{{AppSubUrl}}/img/slack.png">Slack
+					<img class="img-10" src="{{StaticUrlPrefix}}/img/slack.png">Slack
 				</a>
 				<a class="item" href="{{.BaseLink}}/discord/new">
-					<img class="img-10" src="{{AppSubUrl}}/img/discord.png">Discord
+					<img class="img-10" src="{{StaticUrlPrefix}}/img/discord.png">Discord
 				</a>
 				<a class="item" href="{{.BaseLink}}/dingtalk/new">
-					<img class="img-10" src="{{AppSubUrl}}/img/dingtalk.ico">Dingtalk
+					<img class="img-10" src="{{StaticUrlPrefix}}/img/dingtalk.ico">Dingtalk
 				</a>
 				<a class="item" href="{{.BaseLink}}/telegram/new">
-					<img class="img-10" src="{{AppSubUrl}}/img/telegram.png">Telegram
+					<img class="img-10" src="{{StaticUrlPrefix}}/img/telegram.png">Telegram
 				</a>
 				<a class="item" href="{{.BaseLink}}/msteams/new">
-					<img class="img-10" src="{{AppSubUrl}}/img/msteams.png">Microsoft Teams
+					<img class="img-10" src="{{StaticUrlPrefix}}/img/msteams.png">Microsoft Teams
 				</a>
 			</div>
 		</div>
diff --git a/templates/repo/settings/webhook/new.tmpl b/templates/repo/settings/webhook/new.tmpl
index 358827c0f8..1d5d849738 100644
--- a/templates/repo/settings/webhook/new.tmpl
+++ b/templates/repo/settings/webhook/new.tmpl
@@ -8,19 +8,19 @@
 			{{if .PageIsSettingsHooksNew}}{{.i18n.Tr "repo.settings.add_webhook"}}{{else}}{{.i18n.Tr "repo.settings.update_webhook"}}{{end}}
 			<div class="ui right">
 				{{if eq .HookType "gitea"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/gitea-sm.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/gitea-sm.png">
 				{{else if eq .HookType "gogs"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/gogs.ico">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/gogs.ico">
 				{{else if eq .HookType "slack"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/slack.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/slack.png">
 				{{else if eq .HookType "discord"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/discord.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/discord.png">
 				{{else if eq .HookType "dingtalk"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/dingtalk.ico">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/dingtalk.ico">
 				{{else if eq .HookType "telegram"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/telegram.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/telegram.png">
 				{{else if eq .HookType "msteams"}}
-					<img class="img-13" src="{{AppSubUrl}}/img/msteams.png">
+					<img class="img-13" src="{{StaticUrlPrefix}}/img/msteams.png">
 				{{end}}
 			</div>
 		</h4>
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index e3d346db3e..e490fc123b 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -67,7 +67,7 @@
 							<strong>{{.i18n.Tr "repo.audio_not_supported_in_browser"}}</strong>
 						</audio>
 					{{else if .IsPDFFile}}
-						<iframe width="100%" height="600px" src="{{AppSubUrl}}/vendor/plugins/pdfjs/web/viewer.html?file={{EscapePound $.RawFileLink}}"></iframe>
+						<iframe width="100%" height="600px" src="{{StaticUrlPrefix}}/vendor/plugins/pdfjs/web/viewer.html?file={{EscapePound $.RawFileLink}}"></iframe>
 					{{else}}
 						<a href="{{EscapePound $.RawFileLink}}" rel="nofollow" class="btn btn-gray btn-radius">{{.i18n.Tr "repo.file_view_raw"}}</a>
 					{{end}}
diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl
index 8e6a013f03..f947602bf2 100644
--- a/templates/status/404.tmpl
+++ b/templates/status/404.tmpl
@@ -1,7 +1,7 @@
 {{template "base/head" .}}
 {{if .IsRepo}}<div class="repository">{{template "repo/header" .}}</div>{{end}}
 <div class="ui container center">
-	<p style="margin-top: 100px"><img src="{{AppSubUrl}}/img/404.png" alt="404"/></p>
+	<p style="margin-top: 100px"><img src="{{StaticUrlPrefix}}/img/404.png" alt="404"/></p>
 	<div class="ui divider"></div>
 	<br>
 	{{if .ShowFooterVersion}}<p>Application Version: {{AppVer}}</p>{{end}}
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index 2e01e8ac74..191e5929d8 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div class="ui container center">
-	<p style="margin-top: 100px"><img src="{{AppSubUrl}}/img/500.png" alt="500"/></p>
+	<p style="margin-top: 100px"><img src="{{StaticUrlPrefix}}/img/500.png" alt="500"/></p>
 	<div class="ui divider"></div>
 	<br>
 	{{if .ErrorMsg}}<p>An error has occurred :</p>
diff --git a/templates/swagger/ui.tmpl b/templates/swagger/ui.tmpl
index 20d4f7f63b..0125ee4a19 100644
--- a/templates/swagger/ui.tmpl
+++ b/templates/swagger/ui.tmpl
@@ -4,9 +4,9 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Swagger UI</title>
-	<link rel="stylesheet" type="text/css" href="{{AppSubUrl}}/vendor/assets/swagger-ui/swagger-ui.css" >
-	<link rel="icon" type="image/png" href="{{AppSubUrl}}/vendor/assets/swagger-ui/favicon-32x32.png" sizes="32x32" />
-	<link rel="icon" type="image/png" href="{{AppSubUrl}}/vendor/assets/swagger-ui/favicon-16x16.png" sizes="16x16" />
+	<link rel="stylesheet" type="text/css" href="{{StaticUrlPrefix}}/vendor/assets/swagger-ui/swagger-ui.css" >
+	<link rel="icon" type="image/png" href="{{StaticUrlPrefix}}/vendor/assets/swagger-ui/favicon-32x32.png" sizes="32x32" />
+	<link rel="icon" type="image/png" href="{{StaticUrlPrefix}}/vendor/assets/swagger-ui/favicon-16x16.png" sizes="16x16" />
 	<style>
 	html
 	{
@@ -65,8 +65,8 @@
 
 <div id="swagger-ui"></div>
 
-<script src="{{AppSubUrl}}/vendor/assets/swagger-ui/swagger-ui-bundle.js"> </script>
-<script src="{{AppSubUrl}}/vendor/assets/swagger-ui/swagger-ui-standalone-preset.js"> </script>
+<script src="{{StaticUrlPrefix}}/vendor/assets/swagger-ui/swagger-ui-bundle.js"> </script>
+<script src="{{StaticUrlPrefix}}/vendor/assets/swagger-ui/swagger-ui-standalone-preset.js"> </script>
 <script>
 
 window.onload = function() {