notification support

6 files changed, 46 insertions, 0 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f7e9d34..cb4670c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# Under construction
+
+Features:
+1. Notification
+
 # May 28, 2020 v1.1.0
 
 New features are imported to erblog:
diff --git a/README.md b/README.md
index 9e5899a..cbce233 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,8 @@ There are some basic configuration options you may want to use:
 | Params.google_search | Enable Google Intra-Site Search Engine | false | 
 | Params.badge | The color for badge ('red', 'cyan', 'orange', 'green', 'blue', 'black' and 'gray' are available) | 'red' |
 | Params.quote | The color for quota ('red', 'cyan', 'orange', 'green', 'blue', 'black' and 'gray' are available) | 'green' |
+| Params.notice | Contents of notification | none |
+| Params.notice_color | The color for notification background ('red', 'cyan', 'orange', 'green', 'blue', 'black' and 'gray' are available) | 'red' |
 
 Add your own custom menus in the `config.toml` like this:
 
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 7e5be1c..98c1be0 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -11,6 +11,8 @@ footnoteReturnLinkContents = "^"
     author = "Steve Francia"
     badge = "orange"
     quote = "red"
+    notice = "Hello, world. This is a notification."
+    notice_color = "red"
     index_posts_num = 5
     google_search = true
     # logo = "//blog.ertuil.top/avater.png"
diff --git a/layouts/index.html b/layouts/index.html
index c164a2e..5d6db6c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,6 +1,9 @@
 {{ define "main" }}
 
 <main>
+
+{{ partial "notice.html" .}}
+
 <div class="layui-container">
     <div class="layui-row about">
         <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 about_left">
diff --git a/layouts/partials/notice.html b/layouts/partials/notice.html
new file mode 100644
index 0000000..3f31891
--- /dev/null
+++ b/layouts/partials/notice.html
@@ -0,0 +1,21 @@
+{{if isset .Site.Params "notice"}}
+<div id="erblog-notice" onclick="notice_close();"
+    class="layui-container-fluid {{with $.Site.Params.notice_color}}layui-bg-{{.}}{{else}}layui-bg-red{{end}}">
+    <div class="layui-row self-notice">
+        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 self-notice-text">
+            <span style="margin-left: 20px">
+                {{.Site.Params.notice | safeHTML}}
+                <i class="layui-icon layui-icon-close" style="vertical-align: -1px;margin-left: 20px"></i>   
+            </span>
+        </div>
+    </div>
+</div>
+
+<script>
+function notice_close() {
+    document.getElementById('erblog-notice').classList.add("layui-anim");
+    document.getElementById('erblog-notice').classList.add("layui-anim-fadeout");
+    //document.getElementById('erblog-notice').style.display='none';
+}
+</script>
+{{end}}
diff --git a/static/self/css/default.css b/static/self/css/default.css
index 6837192..058af6a 100644
--- a/static/self/css/default.css
+++ b/static/self/css/default.css
@@ -269,6 +269,19 @@ footer {
     text-decoration: underline;
 }
 
+.self-notice {
+    /* height: 40px; */
+}
+
+.self-notice-text {
+    /* top: 50%;
+    transform: translate(0, -50%); */
+    margin-top: 10px;
+    margin-bottom: 10px;
+    /* margin-left:30px;
+    margin-right: 30px; */
+}
+
 .self-elem-quote {
     margin-bottom:10px;
     padding:15px;