Skip to content

Commit

Permalink
0.592
Browse files Browse the repository at this point in the history
  • Loading branch information
@solstice23
solstice23 committed Dec 13, 2019
1 parent e4f6056 commit 9ba242e
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 9 deletions.
8 changes: 8 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,14 @@ Argon - 一个轻盈、简洁、美观的 WordPress 主题

# 更新日志

## 20191214 v0.592
+ 加入博客设置功能
+ 位于浮动操作按钮栏
+ 设置选项：夜间模式、字体（衬线/无衬线）、页面滤镜
+ 默认关闭浮动操作按钮栏的夜间模式切换按钮（与设置菜单中重复），可以在 Argon 设置中手动开启
+ 微调 CSS
+ 其他小改动

## 20191204 v0.591
+ 增加进入文章过渡动画选项（测试）

Expand Down
47 changes: 47 additions & 0 deletions argontheme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
let $backToTopBtn = $('#fab_back_to_top');
let $toggleSidesBtn = $('#fab_toggle_sides');
let $toggleDarkmode = $('#fab_toggle_darkmode');
let $toggleBlogSettings = $('#fab_toggle_blog_settings_popup');

let $readingProgressBar = $('#fab_reading_progress_bar');
let $readingProgressDetails = $('#fab_reading_progress_details');
Expand All @@ -88,9 +89,11 @@
$("html").toggleClass("darkmode");
if ($("html").hasClass("darkmode")){
$('#fab_toggle_darkmode .btn-inner--icon').html("<i class='fa fa-lightbulb-o'></i>");
$("#blog_setting_darkmode_switch")[0].checked = true;
localStorage['Argon_Enable_Dark_Mode'] = "true";
}else{
$('#fab_toggle_darkmode .btn-inner--icon').html("<i class='fa fa-moon-o'></i>");
$("#blog_setting_darkmode_switch")[0].checked = false;
localStorage['Argon_Enable_Dark_Mode'] = "false";
}
$(window).trigger("scroll");
Expand All @@ -117,6 +120,50 @@
$fabs.removeClass("fabs-unloaded");
} , 300);
});
//博客设置
$toggleBlogSettings.on("click" , function(){
$("#float_action_buttons").toggleClass("blog_settings_opened");
});
$("#close_blog_settings").on("click" , function(){
$("#float_action_buttons").removeClass("blog_settings_opened");
});
$("#blog_setting_darkmode_switch").on("input" , function(){
toggleDarkmode();
});

$("#blog_setting_font_sans_serif").on("click" , function(){
$("html").removeClass("use-serif");
localStorage['Argon_Use_Serif'] = "false";
});
$("#blog_setting_font_serif").on("click" , function(){
$("html").addClass("use-serif");
localStorage['Argon_Use_Serif'] = "true";
});
if (localStorage['Argon_Use_Serif'] == "true"){
$("html").addClass("use-serif");
}else{
$("html").removeClass("use-serif");
}
//滤镜
function setBlogFilter(name){
if (name == undefined || name == ""){
name = "off";
}
if (!$("html").hasClass("filter-" + name)){
$("html").removeClass("filter-sunset filter-darkness filter-grayscale");
if (name != "off"){
$("html").addClass("filter-" + name);
}
}
$("#blog_setting_filters .blog-setting-filter-btn").removeClass("active");
$("#blog_setting_filters .blog-setting-filter-btn[filter-name='" + name + "']").addClass("active");
localStorage['Argon_Filter'] = name;
}
setBlogFilter(localStorage['Argon_Filter']);
$(".blog-setting-filter-btn").on("click" , function(){
setBlogFilter(this.getAttribute("filter-name"));
});

function changeFabDisplayStatus(){
//阅读进度
let readingProgress = $(window).scrollTop() / ($(document).height() - $(window).height());
Expand Down
16 changes: 14 additions & 2 deletions functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1070,6 +1070,18 @@ function themeoptions_page(){
<p class="description">显示在左侧栏顶部，留空则不显示，支持 HTML 标签</p>
</td>
</tr>
<tr><th class="subtitle"><h2>浮动操作按钮</h2></th></tr>
<tr>
<th><label>显示夜间模式切换按钮</label></th>
<td>
<select name="argon_fab_show_darkmode_button">
<?php $argon_fab_show_darkmode_button = get_option('argon_fab_show_darkmode_button'); ?>
<option value="false" <?php if ($argon_fab_show_darkmode_button=='false'){echo 'selected';} ?>>不显示</option>
<option value="true" <?php if ($argon_fab_show_darkmode_button=='true'){echo 'selected';} ?>>显示</option>
</select>
<p class="description">浮动操作按钮位于页面右下角（或左下角）</br><strong>夜间模式选项在设置按钮中已经存在</strong>，此选项可以控制其是否在浮动操作按钮栏中直接显示</p>
</td>
</tr>
<tr><th class="subtitle"><h2>文章 Meta 信息</h2></th></tr>
<tr>
<th><label>显示字数和预计阅读时间</label></th>
Expand Down Expand Up @@ -1294,7 +1306,7 @@ function themeoptions_page(){
<option value="false" <?php if ($argon_enable_into_article_animation=='false'){echo 'selected';} ?>>不启用</option>
<option value="true" <?php if ($argon_enable_into_article_animation=='true'){echo 'selected';} ?>>启用</option>
</select>
<p class="description">从首页或分类目录进入文章时，使用平滑过渡（性能可能较差）</p>
<p class="description">从首页或分类目录进入文章时，使用平滑过渡（可能影响加载文章时的性能）</p>
</td>
</tr>
<tr><th class="subtitle"><h2>其他</h2></th></tr>
Expand Down Expand Up @@ -1375,7 +1387,7 @@ function themeoptions_page(){
update_option('argon_show_thumbnail_in_banner_in_content_page', $_POST['argon_show_thumbnail_in_banner_in_content_page']);
update_option('argon_update_source', $_POST['argon_update_source']);
update_option('argon_enable_into_article_animation', $_POST['argon_enable_into_article_animation']);

update_option('argon_fab_show_darkmode_button', $_POST['argon_fab_show_darkmode_button']);

//LazyLoad 相关
update_option('argon_enable_lazyload', $_POST['argon_enable_lazyload']);
Expand Down
33 changes: 31 additions & 2 deletions header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<script src="<?php bloginfo('template_url'); ?>/assets/vendor/headroom/headroom.min.js"></script>
<link href="<?php bloginfo('template_url'); ?>/assets/vendor/izitoast/css/iziToast.css" rel="stylesheet">
<script src="<?php bloginfo('template_url'); ?>/assets/vendor/izitoast/js/iziToast.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300&display=swap" rel="stylesheet">

<?php if (get_option('argon_enable_smoothscroll_type') == '2') { /*平滑滚动*/?>
<script src="<?php bloginfo('template_url'); ?>/assets/vendor/smoothscroll/smoothscroll2.js"></script>
Expand Down Expand Up @@ -182,7 +183,7 @@ public function end_el( &$output, $object, $depth = 0, $args = array(), $current
<?php if (get_option('argon_banner_background_url') != '') { ?>
<style>
section.banner{
background-image: url(<?php echo get_banner_background_url();; ?>) !important;
background-image: url(<?php echo get_banner_background_url(); ?>) !important;
}
</style>
<?php } ?>
Expand All @@ -196,9 +197,37 @@ public function end_el( &$output, $object, $depth = 0, $args = array(), $current
<button id="fab_back_to_top" class="btn btn-icon btn-neutral fab shadow-sm" type="button">
<span class="btn-inner--icon"><i class="fa fa-angle-up"></i></span>
</button>
<button id="fab_toggle_darkmode" class="btn btn-icon btn-neutral fab shadow-sm" type="button">
<button id="fab_toggle_darkmode" class="btn btn-icon btn-neutral fab shadow-sm" type="button" <?php if (get_option('argon_fab_show_darkmode_button') != 'true') echo " style='display: none;'";?>>
<span class="btn-inner--icon"><i class="fa fa-moon-o"></i></span>
</button>
<button id="fab_toggle_blog_settings_popup" class="btn btn-icon btn-neutral fab shadow-sm" type="button">
<span class="btn-inner--icon"><i class="fa fa-cog"></i></span>
</button>
<div id="fab_blog_settings_popup" class="card shadow-sm" style="opacity: 0;">
<div id="close_blog_settings"><i class="fa fa-close"></i></div>
<div class="blog-setting-item mt-3">
<div style="flex: 1;transform: translateY(-4px);">夜间模式</div>
<label class="custom-toggle">
<input id="blog_setting_darkmode_switch" type="checkbox">
<span class="custom-toggle-slider rounded-circle"></span>
</label>
</div>
<div class="blog-setting-item mt-3">
<div style="flex: 1;">字体</div>
<div style="display: inline-block;padding-left: 20px;">
<button id="blog_setting_font_sans_serif" type="button" class="blog-setting-font btn btn-outline-primary">Sans Serif</button><button id="blog_setting_font_serif" type="button" class="blog-setting-font btn btn-outline-primary">Serif</button>
</div>
</div>
<div class="blog-setting-item mt-4 mb-3">
<div style="flex: 1;">滤镜</div>
<div id="blog_setting_filters" class="ml-3">
<button id="blog_setting_filter_off" type="button" class="blog-setting-filter-btn ml-0" filter-name="off">关闭</button>
<button id="blog_setting_filter_sunset" type="button" class="blog-setting-filter-btn" filter-name="sunset">日落</button>
<button id="blog_setting_filter_darkness" type="button" class="blog-setting-filter-btn" filter-name="darkness">暗化</button>
<button id="blog_setting_filter_grayscale" type="button" class="blog-setting-filter-btn" filter-name="grayscale">灰度</button>
</div>
</div>
</div>
<button id="fab_open_sidebar" class="btn btn-icon btn-neutral fab shadow-sm" type="button">
<span class="btn-inner--icon"><i class="fa fa-bars"></i></span>
</button>
Expand Down
2 changes: 1 addition & 1 deletion info.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version" : "0.591",
"version" : "0.592",
"details_url" : "https://github.com/abc2237512422/argon-theme/releases",
"download_url" : "https://github.com/abc2237512422/argon-theme/releases/download/v0.591/argon.zip"
}
158 changes: 154 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ Theme Name: argon
Author: abc2237512422
Author URI: https://abc233.site/
Description: 轻盈、简洁、美观的 Wordpress 主题
Version: 0.591
Version: 0.592
License: MIT License
License URI: https://opensource.org/licenses/MIT
Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, 夜间模式, 可自定义
Expand Down Expand Up @@ -168,6 +168,9 @@ article table > thead > tr > th{
*::-webkit-selection{
background-color: #cce2ff;
}
html.use-serif p , html.use-serif span , html.use-serif div{
font-family: 'Noto Serif SC',serif !important;
}
/*页面框架*/
#content{
padding: 0 5px;
Expand Down Expand Up @@ -613,14 +616,157 @@ article table > thead > tr > th{
html.darkmode #float_action_buttons #fab_toggle_darkmode:before{
content: "日间模式";
}
#float_action_buttons #fab_toggle_blog_settings_popup:before{
content: "设置";
}
#float_action_buttons #fab_open_sidebar{
display: none;
}
#sidebar_mask{
display: none;
opacity: 0;
}

#fab_blog_settings_popup {
position: fixed;
right: 85px;
bottom: 35px;
padding: 10px 25px;
opacity: 0;
width: max-content;
width: -moz-max-content;
min-width: 200px;
max-width: calc(100vh - 170px);
max-height: calc(100vh - 70px);
pointer-events: none;
transform: translateX(10px);
transition: all .3s ease;
animation: none !important;
}
#float_action_buttons.fabs-float-left #fab_blog_settings_popup {
left: 85px;
right: unset;
transform: translateX(-10px);
}
.blog_settings_opened #fab_blog_settings_popup {
opacity: 1 !important;
transform: translateX(0);
pointer-events: unset;
}
.blog_settings_opened #fab_toggle_blog_settings_popup{
opacity: 1 !important;
color: #fff !important;
background-color: #5e72e4 !important;
pointer-events: unset !important;
}
.blog_settings_opened .fab {
pointer-events: none;
opacity: .25;
overflow: hidden;
}
.blog_settings_opened #fab_toggle_sides{
opacity: 0 !important;
}
#close_blog_settings {
text-align: right;
font-size: 12px;
margin-right: -12px;
cursor: pointer;
}
.blog-setting-item{
display: flex;
flex-flow: row;
align-items: center;
}
.blog-setting-font{
text-transform: none;
padding: 3px 10px;
}
.blog-setting-font:hover{
color: #5e72e4;
background-color: transparent;
}
#blog_setting_font_sans_serif{
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transform: none !important;
}
#blog_setting_font_serif{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: 0;
transform: none !important;
border-left: 0;
}
html:not(.use-serif) #blog_setting_font_sans_serif{
color: #fff;
background: #5e72e4;
}
html.use-serif #blog_setting_font_serif{
color: #fff;
background: #5e72e4;
}
.blog-setting-filter-btn {
border-radius: 50%;
outline: none !important;
border: none;
height: 50px;
width: 50px;
margin-left: 5px;
cursor: pointer;
font-size: 14px;
transition: all .3s ease;
}
.blog-setting-filter-btn:hover{
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
#blog_setting_filter_off{
background: rgba(94, 114, 228, .05);
color: #5e72e4;
}
#blog_setting_filter_sunset{
background: rgba(255, 255, 200, 1);
color: #6e5a00;
}
#blog_setting_filter_darkness{
background: rgba(80, 80, 80, .7);
color: #eee;
}
#blog_setting_filter_grayscale{
background: rgba(200, 200, 200, .8);
color: #333;
}
#blog_setting_filter_off.active{
border: 1px solid #5e72e4;
}
#blog_setting_filter_sunset.active{
border: 1px solid #6e5a00;
}
#blog_setting_filter_darkness.active{
border: 1px solid #111;
}
#blog_setting_filter_grayscale.active{
border: 1px solid #333;
}
html.filter-sunset{
filter: sepia(30%);
}
html.filter-darkness body:after{
content: '';
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, .4);
z-index: 999999999;
pointer-events: none;
}
html.filter-grayscale{
filter: grayscale(1);
}
/*页码*/
.pagination{
width: max-content;
Expand Down Expand Up @@ -2104,10 +2250,16 @@ html.darkmode .CtxtMenu_Menu {
#main{
padding: 5px;
}
}
@media screen and (max-width:1000px){
.navbar-main{
padding-left: 10px;
padding-right: 10px;
}
.navbar-main .container{
margin: 0;
max-width: 100vw;
}
.navbar-toggler-icon{
width: 20px;
height: 20px;
Expand All @@ -2116,8 +2268,6 @@ html.darkmode .CtxtMenu_Menu {
outline: none !important;
}
}


@media screen and (max-width:900px){
/*TimeLine*/
.argon-timeline {
Expand Down

0 comments on commit 9ba242e

Please sign in to comment.