feat(journal): [#18] 增加日志界面

本次新增内容如下： - 新增日志界面，日志界面默认地址为/journals - 配置文件中，新增日志界面的配置，在 `外观 -> 主题 -> 设置 -> 日志页` - 将配置文件位置进行合理调整 - 对拥有背景图片但标题在背景图片上的BUG界面做了处理 close #18
2020-08-18 13:49:32 +08:00 · 2020-08-18 13:49:32 +08:00 · 0dca354827
parent b8c999a3a9
commit 0dca354827
10 changed files with 713 additions and 364 deletions
--- a/README.md
+++ b/README.md
@ -43,15 +43,14 @@ DEMO：[https://lixingyong.com/](https://lixingyong.com/)
 - [x] 标签目录页面（需要手动在菜单中配置/tags链接）
 - [x] 全局提示&复制提醒功能
 - [x] 相册
+- [x] 说说

 > Tip:
 >> 上述功能大部分均可配置。具体操作在 后台 -> 外观 -> 主题 -> 设置 中进行配置   
 ## <img src="https://media.giphy.com/media/WUlplcMpOCEmTGBtBW/giphy.gif" width="30">  待完成功能
- [ ] 归档
- [ ] 说说
+- [ ] 归档重写
 - [ ] 集成视频播放插件

-
 ## ⭐️ 安装主题

 ### 本地安装
--- a/archives.ftl
+++ b/archives.ftl
@ -4,6 +4,7 @@
 <#include "header.ftl">
 <@header title="文章归档 - ${blog_title!}">
    <#if (settings.patternimg!true) && (settings.archives_patternimg?? && settings.archives_patternimg!='')>
+        <div class="pattern-center-blank"></div>
        <div class="pattern-center">
            <div class="pattern-attachment-img">
                <img data-src="${settings.archives_patternimg!}" src="https://cdn.jsdelivr.net/gh/LIlGG/cdn@1.0.2/img/svg/loader/orange.progress-bar-stripe-loader.svg" class="lazyload" onerror="imgError(this, IMG_Type.DEFAULT)">
--- a/category.ftl
+++ b/category.ftl
@ -4,6 +4,7 @@
 <#include "header.ftl">
 <@header title="分类：${category.name!} - ${blog_title!}">
    <#if (settings.patternimg!true) && (settings.category_patternimg?? && settings.category_patternimg!='')>
+        <div class="pattern-center-blank"></div>
        <div class="pattern-center">
            <div class="pattern-attachment-img">
                <img data-src="${settings.category_patternimg!}" src="https://cdn.jsdelivr.net/gh/LIlGG/cdn@1.0.2/img/svg/loader/orange.progress-bar-stripe-loader.svg" class="lazyload" onerror="imgError(this, IMG_Type.DEFAULT)">
--- a/header.ftl
+++ b/header.ftl
@ -14,6 +14,7 @@
 	<@global.head />
 	<link rel="stylesheet" href="https://at.alicdn.com/t/font_679578_dishi1yoavm.css" media="all">
 	<link rel='stylesheet' id='siren-css'  href='${theme_base!}/style.min.css?ver=2.0.6.170420' type='text/css' media='all' />
+	<link rel="stylesheet" href="https://at.alicdn.com/t/font_2010950_hzxxpauv5wv.css" media="all">
 	<link href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation@0.3.0/dist/font-awesome-animation.min.css" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" rel="stylesheet">
 	<link href="https://cdn.jsdelivr.net/npm/baguettebox.js@1.11.1/dist/baguetteBox.min.css" rel="stylesheet">
--- a/inc/decorate.ftl
+++ b/inc/decorate.ftl
@ -97,5 +97,48 @@
    .masonry-gallery .gallery-item {
 	    margin-bottom: ${(settings.photos_gutter)!10}px
    }
+    /** 日志 */
+    .journals-line>li:nth-child(odd) .journal-label:after {
+        border-right-color: ${(settings.journal_color_bg_1)!'#E6E6FA'};
+    }
+
+    .at_button {
+        background-color: ${(settings.journal_color_bg_1)!'#E6E6FA'};
+        color: ${(settings.journal_color_font_1)!'block'};
+    }
+
+    .at_button:hover {
+        background: ${(settings.journal_color_bg_2)!'#F0FFFF'};
+        color: ${(settings.journal_color_font_2)!'block'};
+    }
+
+    <#if settings.journal_bg??>
+        .journals-line>li:nth-child(odd) .journal-label {
+            <#if settings.journal_bg_blur!true>
+            background: linear-gradient(60deg,rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) 95%) 0% 0% / cover, url(${settings.journal_bg}) 0% 0% / cover;
+            <#else>
+            background: url(${settings.journal_bg}) 0% 0% / cover;
+            </#if>
+            color: ${(settings.journal_color_font_1)!'block'};
+        }
+        .journals-line>li .journal-label {
+            <#if settings.journal_bg_blur!true>
+            background: linear-gradient(60deg,rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) 95%) 0% 0% / cover, url(${settings.journal_bg}) 0% 0% / cover;
+            <#else>
+            background: url(${settings.journal_bg}) 0% 0% / cover;
+            </#if>
+            color: ${(settings.journal_color_font_2)!'block'};
+        }
+    <#else>
+    .journals-line>li:nth-child(odd) .journal-label {
+        background: ${(settings.journal_color_bg_1)!'#E6E6FA'};
+        color: ${(settings.journal_color_font_1)!'block'};
+    }
+
+    .journals-line>li .journal-label {
+        background: ${(settings.journal_color_bg_2)!'#F0FFFF'};
+        color: ${(settings.journal_color_font_2)!'block'};
+    }
+    </#if>
 </style>
 </@compress>
--- a/journals.ftl
+++ b/journals.ftl
@ -0,0 +1,61 @@
+<#--
+    日志页面
+-->
+<#include "header.ftl">
+<@header title="${options.journals_title?default('日志')} - ${blog_title!}">
+    <#if (settings.patternimg!true) && (settings.journals_patternimg?? && settings.journals_patternimg!='')>
+        <div class="pattern-center-blank"></div>
+        <div class="pattern-center">
+            <div class="pattern-attachment-img">
+                <img data-src="${settings.journals_patternimg!}" src="https://cdn.jsdelivr.net/gh/LIlGG/cdn@1.0.2/img/svg/loader/orange.progress-bar-stripe-loader.svg"  class="lazyload" onerror="imgError(this, IMG_Type.DEFAULT)">
+            </div>
+            <header class="pattern-header">
+                <h1 class="entry-title">${options.journals_title?default('日志')}</h1>
+            </header>
+        </div>
+    <#else>
+        <div class="blank"></div>
+        <header class="entry-header">
+            <h1 class="entry-title">${options.journals_title?default('日志')}</h1>
+        </header>
+        <style>
+            .toc-container {
+                top: 210px;
+            }
+		</style>
+    </#if>
+</@header>
+<div class="journals-content">
+  <#if (journals.content?size>0) >
+    <ul id="main" class="journals-line" role="main">
+      <#list journals.content as journal>
+        <li id="journal-${journal.id?c}" class="journal">
+          <span class="journal-author-img">
+            <img class="lazyload avatar" data-src="${user.avatar!}" alt="${user.nickname!}"  width="48" height="48" src="https://cdn.jsdelivr.net/gh/LIlGG/cdn@1.0.2/img/svg/loader/trans.ajax-spinner-preloader.svg" onerror="imgError(this, IMG_Type.DEFAULT)">
+          <span class="journal-label">${journal.content!}
+            <p class="journal-time">
+              <span> ${journal.createTime?string('yyyy-MM-dd HH:mm:ss')}</span>
+              <#-- TODO 由于接口功能的原因，点赞功能暂时不设置 -->
+              <#--  <span style="float: right">
+                <span><i class="iconfont icon-dz"></i></span>
+                <span style="font-size: 15px;">${journal.likes!}</span>
+              </span>  -->
+            </p>
+          </span>
+        </li>
+      </#list>
+    </ul>
+    <#if journals.totalPages gt 1>
+      <@paginationTag method="journals" page="${journals.number}" total="${journals.totalPages}" display="3">
+        <center id="journals-pagination">
+          <#if pagination.hasNext>
+            <a href="${pagination.nextPageFullPath!}" class="at_button" style="margin-bottom: 15px;">加载更多...</a></#if>
+        </center>
+      </@paginationTag>
+    </#if>
+    <#else>
+        博主太懒了，这里还什么都没有呢！！！
+    </#if>
+</div>
+<#include "footer.ftl">
+<@footer />
--- a/js/app.js
+++ b/js/app.js
@ -1,10 +1,4 @@
-/*
- * Siren application js
- * @author Louie
- * @url http://i94.me
- * @date 2016.11.19
- */
-/**
+/**
 * Sakura halo分支主题, 基于Siren制作
 * @author LIlGG
 * @url https://lixingyong.com
@ -575,6 +569,51 @@ var LIlGGAttachContext = {
                justify();
            }
        }
+    },
+    // 日志
+    SS: function() {
+        /**
+         * 根据日期时间，获取对应的图标
+         * @param {*} time 
+         */
+        var getTimeIcon = function(time) {
+            var ICON_DAY = "kaiqitaiyangguangshezhi",
+                ICON_MORN = "gengzaotubiao_tianqi-qingchen",
+                ICON_NIGHT = "yueliang";
+            var date = new Date(time);
+            var hours = date.getHours();
+            if(isNaN(hours)) {
+                return ICON_DAY;
+            }
+
+            if(5 <= hours && hours < 12) {
+                return ICON_MORN;
+            } else if(12 <= hours && hours < 18) {
+                return ICON_DAY;
+            } else {
+                return ICON_NIGHT;
+            }
+        }
+        
+        return () => {
+            // 日志
+            if($(".journal").length > 0) {
+                $(".journal").each(function() {
+                    // 为日志设置时间图标
+                    var $firstSpan = $(this).find(".journal-time>span").first();
+                    if($firstSpan.find("i").length == 0) {
+                        $firstSpan.prepend('<i class="iconfont icon-'+ getTimeIcon($firstSpan.text()) +'"></i> ');
+                    }
+                    // 为所有图片增加box
+                    var $imgs = $(this).find(".journal-label img");
+                    $imgs.each(function() {
+                        if(!$(this).hasClass("journal-img")) {
+                            $(this).addClass("journal-img").wrap('<a data-fancybox="gallery" href="'+ $(this).attr("src") + '">');
+                        }
+                    })
+                })
+            }
+        }
    }
 }

@ -846,7 +885,6 @@ var baguetteBox = function () {

 var home = location.href,
    Siren = {
-
        // 移动端菜单
        MN: function () {
            $('.iconflat').on('click', function () {
@ -920,6 +958,8 @@ var home = location.href,
            if($(".entry-content").children("table").length > 0) {
                $(".entry-content").children("table").wrap("<div class='table-wrapper'></div>")
            }
+            // 日志所需渲染方法
+            LIlGGAttachContext.SS()();
        },

        // 点击事件
@ -1008,7 +1048,7 @@ var home = location.href,
            });
        },

-        // Ajax加载文章
+        // Ajax加载文章/说说
        XLS: function () {
            $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
            $('body').on('click', '#pagination a', function () {
@ -1036,6 +1076,33 @@ var home = location.href,
                });
                return false;
            });
+            /**
+             * 说说
+             */
+            $('body').on('click', '#journals-pagination a', function () {
+                $(this).addClass("loading").text("");
+                $.ajax({
+                    type: "GET",
+                    url: $(this).attr("href") + "#main",
+                    success: function (data) {
+                        result = $(data).find("#main .journal");
+                        nextHref = $(data).find("#journals-pagination a").attr("href");
+                        // 添加新的内容
+                        $("#main").append(result.fadeIn(500));
+                        $("#journals-pagination a").removeClass("loading").text("加载更多...");
+                        lazyload(undefined, {
+                            rootMargin: "150px",
+                        });
+                        LIlGGAttachContext.SS()();
+                        if (nextHref != undefined) {
+                            $("#journals-pagination a").attr("href", nextHref);
+                        } else {
+                            $("#journals-pagination a").remove();
+                        }
+                    }
+                });
+                return false;
+            });
        },

        // 输入框特效
--- a/settings.yaml
+++ b/settings.yaml
@ -17,38 +17,6 @@ general:
          label: 开启
        - value: false
          label: 关闭
-    patternimg:
-      name: patternimg
-      label: 头部装饰图
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-      description: '文章或部分页面的head图片'
-    archives_patternimg:
-      name: archives_patternimg
-      label: 归档页装饰图
-      type: attachment
-      description: '归档页面头部装饰图'
-    links_patternimg:
-      name: links_patternimg
-      label: 友链页装饰图
-      type: attachment
-      description: '友情链接页面头部装饰图'
-    searh_patternimg:
-      name: searh_patternimg
-      label: 搜索页装饰图
-      type: attachment
-      description: '搜索页面头部装饰图'
-    tag_patternimg:
-      name: tag_patternimg
-      label: 标签页默认装饰图
-      type: attachment
-      description: '标签下文章页面默认头部装饰图'
    tag_cloud:
      name: tag_cloud
      label: 开启标签云
@ -74,16 +42,6 @@ general:
      data-type: double
      default: 1
      description: '标签随机颜色最大值,值越高越偏暖色调，取值范围在0-1之间，需要大于最小值'
-    category_patternimg:
-      name: category_patternimg
-      label: 分类页默认装饰图
-      type: attachment
-      description: '分类下文章页面默认头部装饰图'
-    photos_patternimg:
-      name: photos_patternimg
-      label: 图库页默认装饰图
-      type: attachment
-      description: '图库页头部装饰图'
    top_search:
      name: top_search
      label: 搜索按钮
@ -132,7 +90,49 @@ general:
      name: site_custom_style
      label: 自定义CSS样式
      type: textarea
-
+patternimg:
+  label: 头部装饰图
+  items:
+    patternimg:
+      name: patternimg
+      label: 头部装饰图
+      type: radio
+      data-type: bool
+      default: true
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+      description: '文章或部分页面的head图片'
+    archives_patternimg:
+      name: archives_patternimg
+      label: 归档页装饰图
+      type: attachment
+    photos_patternimg:
+      name: photos_patternimg
+      label: 图库页装饰图
+      type: attachment
+    journals_patternimg:
+      name: journals_patternimg
+      label: 日志页装饰图
+      type: attachment
+    links_patternimg:
+      name: links_patternimg
+      label: 友链页装饰图
+      type: attachment
+    searh_patternimg:
+      name: searh_patternimg
+      label: 搜索页装饰图
+      type: attachment
+    tag_patternimg:
+      name: tag_patternimg
+      label: 标签页默认装饰图
+      type: attachment
+    category_patternimg:
+      name: category_patternimg
+      label: 分类页默认装饰图
+      type: attachment
 mainScreen:
  label: 第一屏
  items:
@ -191,22 +191,6 @@ mainScreen:
      name: focus_img_1
      label: 背景图
      type: attachment
-#    focus_img_2:
-#      name: focus_img_2
-#      label: 背景图 - 2
-#      type: attachment
-#    focus_img_3:
-#      name: focus_img_3
-#      label: 背景图 - 3
-#      type: attachment
-#    focus_img_4:
-#      name: focus_img_4
-#      label: 背景图 - 4
-#      type: attachment
-#    focus_img_5:
-#      name: focus_img_5
-#      label: 背景图 - 5
-#      type: attachment
    focus_img_filter:
      name: focus_img_filter
      label: 背景图滤镜
@ -249,214 +233,6 @@ mainScreen:
      label: 视频id
      type: text
      description: 'B站视频可选择AV/BV号，目前只支持B站视频'
-post:
-  label: 文章页
-  items:
-#    post_like:
-#      name: post_like
-#      label: 文章点赞
-#      type: radio
-#      data-type: bool
-#      default: true
-#      options:
-#        - value: true
-#          label: 开启
-#        - value: false
-#          label: 关闭
-    post_share:
-      name: post_share
-      label: 文章分享
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    post_toc:
-      name: post_toc
-      label: 文章目录
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    toc_depth:
-      name: toc_depth
-      label: 目录标题展开级别
-      type: select
-      data-type: long
-      default: 0
-      options:
-        - value: 0
-          label: 不展开
-        - value: 1
-          label: 展开一级标题
-        - value: 2
-          label: 展开二级标题
-        - value: 3
-          label: 展开三级标题
-        - value: 4
-          label: 展开四级标题
-        - value: 5
-          label: 全部展开
-    post_nepre:
-      name: post_nepre
-      label: 上一篇下一篇
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    author_profile:
-      name: author_profile
-      label: 博主信息
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    alipay_code:
-      name: alipay_code
-      label: 支付宝打赏
-      type: attachment
-    wechat_code:
-      name: wechat_code
-      label: 微信打赏
-      type: attachment
-    code_line:
-      name: code_line
-      label: 开启代码行号
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    code_pretty:
-      name: code_pretty
-      label: 文章代码高亮主题
-      type: select
-      default: Dracula
-      options:
-        - value: AndroidStudio
-          label: AndroidStudio
-        - value: Dark
-          label: Dark
-        - value: Docco
-          label: Docco
-        - value: Dracula
-          label: Dracula
-        - value: Far
-          label: Far
-        - value: Github
-          label: Github
-        - value: Tomorrow Night
-          label: Tomorrow Night
-photos:
-  label: 相册页
-  items:
-    photos_style:
-      name: photos_style
-      label: 相册布局风格
-      type: select
-      default: justify
-      options:
-        - value: justify
-          label: 合理布局
-        - value: masonry
-          label: 瀑布流布局
-        - value: packery
-          label: 填充式瀑布流布局（实验性）
-    is_thumbnail:
-      name: is_thumbnail
-      label: 列表使用缩略图
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    photos_gutter:
-      name: photos_gutter
-      label: 图像之间的间距
-      type: text
-      data-type: long
-      default: 10
-    masonry_column:
-      name: masonry_column
-      label: 瀑布流列数(移动端始终为1)
-      type: select
-      default: 3
-      options:
-        - value: 2
-          label: 2
-        - value: 3
-          label: 3
-        - value: 4
-          label: 4
-        - value: 5
-          label: 5
-        - value: 6
-          label: 6
-        - value: 7
-          label: 7
-        - value: 8
-          label: 8
-    masonry_changer_min:
-      name: masonry_changer_min
-      label: 瀑布流切换功能最小列数
-      type: select
-      default: 3
-      options:
-        - value: 2
-          label: 2
-        - value: 3
-          label: 3
-        - value: 4
-          label: 4
-        - value: 5
-          label: 5
-        - value: 6
-          label: 6
-        - value: 7
-          label: 7
-        - value: 8
-          label: 8
-    masonry_changer_max:
-      name: masonry_changer_max
-      label: 瀑布流切换功能最大列数
-      type: select
-      default: 5
-      options:
-        - value: 2
-          label: 2
-        - value: 3
-          label: 3
-        - value: 4
-          label: 4
-        - value: 5
-          label: 5
-        - value: 6
-          label: 6
-        - value: 7
-          label: 7
-        - value: 8
-          label: 8
 sns:
  label: 社交网络
  items:
@ -602,6 +378,271 @@ focus:
      label: 聚焦图三链接
      type: text
      default: '#'
+post:
+  label: 文章页
+  items:
+    post_share:
+      name: post_share
+      label: 文章分享
+      type: radio
+      data-type: bool
+      default: true
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+    post_toc:
+      name: post_toc
+      label: 文章目录
+      type: radio
+      data-type: bool
+      default: true
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+    toc_depth:
+      name: toc_depth
+      label: 目录标题展开级别
+      type: select
+      data-type: long
+      default: 0
+      options:
+        - value: 0
+          label: 不展开
+        - value: 1
+          label: 展开一级标题
+        - value: 2
+          label: 展开二级标题
+        - value: 3
+          label: 展开三级标题
+        - value: 4
+          label: 展开四级标题
+        - value: 5
+          label: 全部展开
+    post_nepre:
+      name: post_nepre
+      label: 上一篇下一篇
+      type: radio
+      data-type: bool
+      default: true
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+    author_profile:
+      name: author_profile
+      label: 博主信息
+      type: radio
+      data-type: bool
+      default: true
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+    alipay_code:
+      name: alipay_code
+      label: 支付宝打赏
+      type: attachment
+    wechat_code:
+      name: wechat_code
+      label: 微信打赏
+      type: attachment
+    code_line:
+      name: code_line
+      label: 开启代码行号
+      type: radio
+      data-type: bool
+      default: true
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+    code_pretty:
+      name: code_pretty
+      label: 文章代码高亮主题
+      type: select
+      default: Dracula
+      options:
+        - value: AndroidStudio
+          label: AndroidStudio
+        - value: Dark
+          label: Dark
+        - value: Docco
+          label: Docco
+        - value: Dracula
+          label: Dracula
+        - value: Far
+          label: Far
+        - value: Github
+          label: Github
+        - value: Tomorrow Night
+          label: Tomorrow Night
+journal:
+  label: 日志页
+  items:
+    journal_color_bg_1:
+      name: journal_color_bg_1
+      label: 日志背景颜色1&按钮颜色1
+      type: color
+      default: '#E6E6FA'
+      description: '日志单数卡片的背景色以及按钮的默认颜色'
+    journal_color_font_1:
+      name: journal_color_font_1
+      label: 日志字体颜色1
+      type: color
+      default: '#000000'
+      description: '日志单数卡片的字体颜色'
+    journal_color_bg_2:
+      name: journal_color_bg_2
+      label: 日志背景颜色2&按钮颜色2
+      type: color
+      default: '#F0FFFF'
+      description: '日志双数卡片的背景色以及按钮的默认颜色'
+    journal_color_font_2:
+      name: journal_color_font_2
+      label: 日志字体颜色2
+      type: color
+      default: '#000000'
+      description: '日志双数卡片的字体颜色'
+    journal_bg:
+      name: journal_bg
+      label: 日志背景图片
+      type: text
+      description: '使用图片作为日志背景，如果设置了此项，则背景颜色1&背景颜色2均会被覆盖'
+    journal_bg_blur:
+      name: journal_bg_blur
+      label: 日志背景图片虚化
+      type: radio
+      data-type: bool
+      default: false
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+      description: '只针对于使用图片作为日志背景的情况下'
+    # journal_likes:
+    #   name: journal_likes
+    #   label: 日志点赞
+    #   type: radio
+    #   data-type: bool
+    #   default: false
+    #   options:
+    #     - value: true
+    #       label: 开启
+    #     - value: false
+    #       label: 关闭
+    #   description: '由于接口问题，目前该功能还不能使用'
+    # journal_comment:
+    #   name: journal_comment
+    #   label: 日志评论
+    #   type: radio
+    #   data-type: bool
+    #   default: false
+    #   options:
+    #     - value: true
+    #       label: 开启
+    #     - value: false
+    #       label: 关闭
+    #   description: '需要评论模块支持，之后增加' 
+photos:
+  label: 相册页
+  items:
+    photos_style:
+      name: photos_style
+      label: 相册布局风格
+      type: select
+      default: justify
+      options:
+        - value: justify
+          label: 合理布局
+        - value: masonry
+          label: 瀑布流布局
+        - value: packery
+          label: 填充式瀑布流布局（实验性）
+    is_thumbnail:
+      name: is_thumbnail
+      label: 列表使用缩略图
+      type: radio
+      data-type: bool
+      default: true
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+    photos_gutter:
+      name: photos_gutter
+      label: 图像之间的间距
+      type: text
+      data-type: long
+      default: 10
+    masonry_column:
+      name: masonry_column
+      label: 瀑布流列数(移动端始终为1)
+      type: select
+      default: 3
+      options:
+        - value: 2
+          label: 2
+        - value: 3
+          label: 3
+        - value: 4
+          label: 4
+        - value: 5
+          label: 5
+        - value: 6
+          label: 6
+        - value: 7
+          label: 7
+        - value: 8
+          label: 8
+    masonry_changer_min:
+      name: masonry_changer_min
+      label: 瀑布流切换功能最小列数
+      type: select
+      default: 3
+      options:
+        - value: 2
+          label: 2
+        - value: 3
+          label: 3
+        - value: 4
+          label: 4
+        - value: 5
+          label: 5
+        - value: 6
+          label: 6
+        - value: 7
+          label: 7
+        - value: 8
+          label: 8
+    masonry_changer_max:
+      name: masonry_changer_max
+      label: 瀑布流切换功能最大列数
+      type: select
+      default: 5
+      options:
+        - value: 2
+          label: 2
+        - value: 3
+          label: 3
+        - value: 4
+          label: 4
+        - value: 5
+          label: 5
+        - value: 6
+          label: 6
+        - value: 7
+          label: 7
+        - value: 8
+          label: 8
 theme:
  label: 主题切换
  items:
@ -1565,6 +1606,80 @@ live2d:
      data-type: string
      default: ""
      description: '额外CSS，请注意，最好最外层使用.takagi 以免污染其他css'
+additional:
+  label: 背景音乐
+  items:
+    aplayer_float:
+      name: aplayer_float
+      label: 开启左下方音乐浮动（需要同时开启Aplayer插件）
+      type: radio
+      data-type: bool
+      default: false
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+    aplayer_server:
+      name: aplayer_server
+      label: 音乐类别
+      type: select
+      default: netease
+      options:
+        - value: netease
+          label: 网易云音乐
+    aplayer_id:
+      name: aplayer_id
+      label: 音乐id/歌单id
+      type: text
+      default: 2345868969
+    aplayer_type:
+      name: aplayer_type
+      label: 类别
+      type: select
+      default: playlist
+      options:
+        - value: playlist
+          label: 歌单
+    aplayer_preload:
+      name: aplayer_preload
+      label: 预加载
+      type: select
+      default: none
+      options:
+        - value: none
+          label: none
+        - value: metadata
+          label: metadata
+        - value: auto
+          label: auto
+    aplayer_autoplay:
+      name: aplayer_autoplay
+      label: 自动播放
+      type: radio
+      data-type: bool
+      default: false
+      options:
+        - value: true
+          label: 开启
+        - value: false
+          label: 关闭
+      description: 由于浏览器限制，此功能可能无法生效！（也建议不要开启，会产生噪音，影响用户体验）
+    aplayer_order:
+      name: aplayer_order
+      label: 循环顺序
+      type: select
+      default: random
+      options:
+        - value: list
+          label: list
+        - value: random
+          label: random
+    aplayer_theme:
+      name: aplayer_theme
+      label: 主题色
+      type: color
+      default: '#FFA500'
 toast:
  label: 提示及监听
  items:
@ -1687,80 +1802,6 @@ others:
      label: 公告内容
      type: textarea
      placeholder: '公告内容，文字超出142个字节将会被滚动显示（移动端无效），一个汉字 = 3字节，一个字母 = 1字节，自己计算吧'
-additional:
-  label: 背景音乐
-  items:
-    aplayer_float:
-      name: aplayer_float
-      label: 开启左下方音乐浮动（需要同时开启Aplayer插件）
-      type: radio
-      data-type: bool
-      default: false
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    aplayer_server:
-      name: aplayer_server
-      label: 音乐类别
-      type: select
-      default: netease
-      options:
-        - value: netease
-          label: 网易云音乐
-    aplayer_id:
-      name: aplayer_id
-      label: 音乐id/歌单id
-      type: text
-      default: 2345868969
-    aplayer_type:
-      name: aplayer_type
-      label: 类别
-      type: select
-      default: playlist
-      options:
-        - value: playlist
-          label: 歌单
-    aplayer_preload:
-      name: aplayer_preload
-      label: 预加载
-      type: select
-      default: none
-      options:
-        - value: none
-          label: none
-        - value: metadata
-          label: metadata
-        - value: auto
-          label: auto
-    aplayer_autoplay:
-      name: aplayer_autoplay
-      label: 自动播放
-      type: radio
-      data-type: bool
-      default: false
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-      description: 由于浏览器限制，此功能可能无法生效！（也建议不要开启，会产生噪音，影响用户体验）
-    aplayer_order:
-      name: aplayer_order
-      label: 循环顺序
-      type: select
-      default: random
-      options:
-        - value: list
-          label: list
-        - value: random
-          label: random
-    aplayer_theme:
-      name: aplayer_theme
-      label: 主题色
-      type: color
-      default: '#FFA500'
 plugin:
  label: 插件功能
  items:
--- a/style.css
+++ b/style.css
@ -1,9 +1,5 @@
@charset "utf-8";
 /*
-Theme Name: halo-theme-sakura
-Theme URI: http://i94.me
-Author: Louie
-Author URI: http://i94.me
 Description: Halo版本的Sakura主题（原版地址 https://github.com/mashirozx/Sakura）
 Version: 1.0.0
 License: GNU General Public License v2 or later
@ -35,6 +31,7 @@ Tags: LIlGG
 ## Captions
 ## Galleries
 # gallery
+# journals
 --------------------------------------------------------------*/
 #content {
 	animation: main 1s;
@ -8781,12 +8778,6 @@ img[src*="#in-center"] {
 	position: relative;
 }

-#gallery-filter ul li a:hover {
-}
-
-#gallery-filter ul li a.active {
-}
-
 #gallery-filter ul li a::after {
 	content: "";
 	display: block;
@ -8877,6 +8868,150 @@ img[src*="#in-center"] {
 	fill: #222;
 }

+/** journal */
+/** avatar */
+.journal-author-img .avatar {
+	border: 1px solid #ddd;
+    padding: 2px;
+    float: left;
+    border-radius: 64px;
+	transition: all 1.0s;
+}
+
+.journal-author-img .avatar {
+	border-radius:100%;
+	-moz-border-radius:100%;
+	box-shadow:inset 0 -1px 0 3333sf;
+	-webkit-box-shadow:inset 0 -1px 0 3333sf;
+	-webkit-transition:0.4s;
+	-webkit-transition:-webkit-transform 0.4s ease-out;
+	transition:transform 0.4s ease-out;
+	-moz-transition:-moz-transform 0.4s ease-out;
+}
+.journal-author-img .avatar:hover {
+	-webkit-transform:rotateZ(360deg);
+	-moz-transform:rotateZ(360deg);
+	-o-transform:rotateZ(360deg);
+	-ms-transform:rotateZ(360deg);
+	transform:rotateZ(360deg);
+}
+
+.journals-content {
+	padding: 10px;
+}
+
+ul.journals-line {
+	padding: 0;
+	margin: 30px 0 0 0;
+    list-style: none;
+    display: inline;
+    position: relative;
+}
+
+.journal-label:hover {
+	/* transform:scale(1.05);*/
+	transform:translateY(-3px);
+	z-index:1;
+	box-shadow:0 15px 32px rgba(0,0,0,0.15) !important
+}
+
+.journals-line>li:nth-child(odd) .journal-label {
+    background: #E6E6FA;
+	color: black;
+}
+
+.journals-line>li:nth-child(odd) .journal-label:after {
+    border-right-color: #E6E6FA;
+	color: black;
+}
+
+.journals-line>li .journal-label {
+	margin: 0 0 45px 65px;
+    z-index: 1;
+    background: #F0FFFF;
+    color: black;
+    padding: .8em 1.2em .4em 1.2em;
+    font-size: 1.2em;
+    font-weight: 300;
+    line-height: 1.4;
+    position: relative;
+    border-radius: 5px;
+    transition: all 0.3s ease 0s;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+    display: block;
+}
+
+.journals-line>li .journal-label:after {
+    right: 100%;
+    border: solid transparent;
+    z-index: -1;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-right-color: #F0FFFF;
+    border-width: 10px;
+    top: 4px;
+}
+
+.journal-time {
+	margin-top: 10px;
+    border-top: 1px dashed #fff;
+    padding-top: 5px;
+    font-size: 12px;
+}
+
+.journal-time .icon-dz{
+	cursor: pointer;
+}
+
+/** button */
+.at_button {
+	background-color: #E6E6FA;
+	border:none;
+	margin-left:5px;
+	color: block;
+	padding:8px 16px;
+	text-align:center;
+	text-decoration:none;
+	height:auto;
+	line-height:20px;
+	display:inline-block;
+	font-size:12px;
+	border-radius:12px;
+	outline:none;
+	cursor:pointer;
+}
+.at_button:hover {
+	background-color: #F0FFFF;
+	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.24),0 8px 16px 0 rgba(0,0,0,0.19);
+}
+
+/** context */
+span.journal-label>p {
+	overflow: unset;
+}
+
+.journal-label>p, h1, h2, h3, h4, h5, h6, em {
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+.journal-label img {
+    cursor: pointer;
+    transition: all 1s;
+	z-index: 2;
+	width: 20%;
+}
+
+.journal-label img:hover {
+    transform: scale(3.5);
+}
+
+/** journal end */
+
 /*iconfont **/
@font-face {
 	font-family: "iconfont";
--- a/style.min.css
+++ b/style.min.css