feat: first screen description supports line breaks (#97)

_config.yml

@@ -28,7 +28,7 @@ style:
   # Favicon (You can use local image or image external link)
   favicon: /images/logo.svg
 
-  # Article image align position, value: left | center (!!!! --- 需调整)
+  # Article image align position, value: left | center
   article_img_align: left
 
   # Left side width
@@ -55,6 +55,7 @@ style:
     background_img: /images/bg.svg
 
     # First screen description
+    # You can use the || to begin a newline, maximum is two lines.
     description: Keep writing and Keep loving.
 
     # If you want to customize the first screen font color, you can fill in here (e.g. "#0066CC")

layout/_partial/first-screen.ejs

@@ -1,15 +1,17 @@
 <%
-const {
-  description: fs_description,
-  hitokoto: fs_hitokoto
-} = theme.style.first_screen
+const { description: fs_description, hitokoto: fs_hitokoto } = theme.style.first_screen
 const { description: c_description } = config
+let final_description = fs_description || c_description || ''
+final_description = final_description.split('||').map(desc => desc.trim())
+if (final_description.length > 2) { final_description.length = 2 }
 %>
 <div class="first-screen-container flex-center fade-in-down-animation">
     <div class="content flex-center">
-        <% if (fs_description || c_description || fs_hitokoto.enable) { %>
+        <% if (final_description.length || fs_hitokoto.enable) { %>
             <div class="description hitokoto">
-                <%= fs_description || c_description %>
+                <% for (const idx in final_description) { %>
+                    <div><%= final_description[idx] %></div>
+                <% } %>
             </div>
         <% } %>
         <% if (fs_hitokoto.enable) { %>

source/css/layout/_partial/first-screen.styl

@@ -31,6 +31,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
     box-sizing: border-box;
     width: 80%;
     height: 90%;
+    padding-top: 5rem;
 
     .description {
       font-weight: bold;