diff --git a/assets/css/joe.index.css b/assets/css/joe.index.css index 36fe01a..b806394 100644 --- a/assets/css/joe.index.css +++ b/assets/css/joe.index.css @@ -1 +1 @@ -.joe_index{border-radius:var(--radius-wrap);padding:0 15px;background:var(--background);box-shadow:var(--box-shadow)}.joe_index__banner{padding-top:15px;display:flex}.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:var(--radius-inner);overflow:hidden}.joe_index__banner-recommend .item:last-child{margin-bottom:0}.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%;transition:opacity 0.35s}.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_index__banner-recommend .item .thumbnail:hover{opacity:0.85}.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));color:#fff;line-height:20px}.joe_index__banner-recommend .item .information_type{background-image:linear-gradient(to right, #fc712a, #f84c39);background-color:#f84c39;padding:0 5px;height:20px;border-radius:2px;margin-right:5px;font-size:12px}.joe_index__banner-recommend .item .information_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:14px}.joe_index__hot{padding-top:15px}.joe_index__hot-list{display:flex;margin:0 -5px}.joe_index__hot-list .item{width:25%;padding:0 5px}.joe_index__hot-list .item .link{display:block}.joe_index__hot-list .item .link .inner{position:relative}.joe_index__hot-list .item .link .inner:hover .image{opacity:0.85}.joe_index__hot-list .item .link .inner:hover .title{background:var(--classC)}.joe_index__hot-list .item .link .inner .image{width:100%;height:125px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner) var(--radius-inner) 0 0;transition:opacity 0.35s}.joe_index__hot-list .item .link .inner .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:0 8px;line-height:32px;color:var(--minor);background:var(--classD);border-radius:0 0 5px 5px;transition:background 0.35s}.joe_index__hot-list .item .link .inner .views{display:flex;align-items:center;position:absolute;z-index:1;top:5px;right:5px;background-image:linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);color:#fff;font-size:12px;height:18px;padding:0 8px;border-radius:2px;white-space:nowrap}.joe_index__ad{padding-top:15px}.joe_index__ad-link{display:block;position:relative}.joe_index__ad-link .image{width:100%;height:200px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_index__ad-link .image:hover{opacity:0.85}.joe_index__ad-link .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}.joe_index__title{display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_index__title-title{position:relative;display:flex;align-items:center;color:var(--routine);font-weight:500;height:40px;line-height:40px}.joe_index__title-title .item{cursor:pointer;margin-right:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color 0.35s}.joe_index__title-title .item.active{color:var(--theme)}.joe_index__title-title .line{position:absolute;bottom:-1px;left:0;height:2px;border-radius:1px;background:var(--theme);transition:left 0.35s, width 0.35s}.joe_index__title-notice{display:flex;align-items:center;margin-left:auto;height:40px}.joe_index__title-notice svg{min-width:20px;min-height:20px;width:20px;height:20px;margin-right:5px}.joe_index__title-notice a{color:var(--minor);line-height:20px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.35s}.joe_index__title-notice a:hover{color:var(--theme)}.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color: #fff;border-radius:var(--radius-inner)}.swiper-container .item{display:block;height:335px;border-radius:var(--radius-inner)}.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s}.swiper-container .item .thumbnail:hover{opacity:0.85}.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:normal}.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:0.5}.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px} +.joe_index{border-radius:var(--radius-wrap);padding:0 15px;background:var(--background);box-shadow:var(--box-shadow)}.joe_index__banner{padding-top:15px;display:flex}.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:var(--radius-inner);overflow:hidden}.joe_index__banner-recommend .item:last-child{margin-bottom:0}.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%;transition:opacity 0.35s}.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_index__banner-recommend .item .thumbnail:hover{opacity:0.85}.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));color:#fff;line-height:20px}.joe_index__banner-recommend .item .information_type{background-image:linear-gradient(to right, #fc712a, #f84c39);background-color:#f84c39;padding:0 5px;height:20px;border-radius:2px;margin-right:5px;font-size:12px}.joe_index__banner-recommend .item .information_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:14px}.joe_index__hot{padding-top:15px}.joe_index__hot-list{display:flex;margin:0 -5px}.joe_index__hot-list .item{width:25%;padding:0 5px}.joe_index__hot-list .item .link{display:block}.joe_index__hot-list .item .link .inner{position:relative}.joe_index__hot-list .item .link .inner:hover .image{opacity:0.85}.joe_index__hot-list .item .link .inner:hover .title{background:var(--classC)}.joe_index__hot-list .item .link .inner .image{width:100%;height:125px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner) var(--radius-inner) 0 0;transition:opacity 0.35s}.joe_index__hot-list .item .link .inner .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:0 8px;line-height:32px;color:var(--minor);background:var(--classD);border-radius:0 0 5px 5px;transition:background 0.35s}.joe_index__hot-list .item .link .inner .views{display:flex;align-items:center;position:absolute;z-index:1;top:5px;right:5px;background-image:linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);color:#fff;font-size:12px;height:18px;padding:0 8px;border-radius:2px;white-space:nowrap}.joe_index__ad{padding-top:15px}.joe_index__ad-link{display:block;position:relative}.joe_index__ad-link .image{width:100%;height:200px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_index__ad-link .image:hover{opacity:0.85}.joe_index__ad-link .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}.joe_index__title{display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_index__title-title{position:relative;display:flex;align-items:center;color:var(--routine);font-weight:500;height:40px;line-height:40px}.joe_index__title-title .item{cursor:pointer;margin-right:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color 0.35s}.joe_index__title-title .item.active{color:var(--theme)}.joe_index__title-title .line{position:absolute;bottom:-1px;left:0;height:2px;border-radius:1px;background:var(--theme);transition:left 0.35s, width 0.35s}.joe_index__title-notice{display:flex;align-items:center;margin-left:auto;height:40px}.joe_index__title-notice svg{min-width:20px;min-height:20px;width:20px;height:20px;margin-right:5px}.joe_index__title-notice a{color:var(--minor);line-height:20px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.35s}.joe_index__title-notice a:hover{color:var(--theme)}.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color: #fff;border-radius:var(--radius-inner)}.swiper-container .item{display:block;height:335px;border-radius:var(--radius-inner)}.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s}.swiper-container .item .thumbnail:hover{opacity:0.85}.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:normal}.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:0.5}.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px}.swiper-container.swiper-container-vertical .swiper-button-next,.swiper-container.swiper-container-vertical .swiper-button-prev{display:none}.swiper-container .swiper-button-next,.swiper-container .swiper-button-prev{background:rgba(0,0,0,0.1);transition:background 0.35s, right 0.35s, left 0.35s;border-radius:2px}.swiper-container .swiper-button-next:hover,.swiper-container .swiper-button-prev:hover{background:rgba(0,0,0,0.25)}.swiper-container .swiper-button-next::after,.swiper-container .swiper-button-prev::after{font-size:20px}.swiper-container .swiper-button-next{right:-27px}.swiper-container .swiper-button-prev{left:-27px}.swiper-container:hover .swiper-button-next{right:10px}.swiper-container:hover .swiper-button-prev{left:10px} diff --git a/assets/css/joe.index.scss b/assets/css/joe.index.scss index 82d07ae..1356565 100644 --- a/assets/css/joe.index.scss +++ b/assets/css/joe.index.scss @@ -283,4 +283,36 @@ top: 10px; } } + &.swiper-container-vertical { + .swiper-button-next, + .swiper-button-prev { + display: none; + } + } + .swiper-button-next, + .swiper-button-prev { + background: rgba(0, 0, 0, 0.1); + transition: background 0.35s, right 0.35s, left 0.35s; + border-radius: 2px; + &:hover { + background: rgba(0, 0, 0, 0.25); + } + &::after { + font-size: 20px; + } + } + .swiper-button-next { + right: -27px; + } + .swiper-button-prev { + left: -27px; + } + &:hover { + .swiper-button-next { + right: 10px; + } + .swiper-button-prev { + left: 10px; + } + } } diff --git a/assets/js/joe.global.js b/assets/js/joe.global.js index 913c3ac..42a7755 100644 --- a/assets/js/joe.global.js +++ b/assets/js/joe.global.js @@ -317,6 +317,20 @@ document.addEventListener('DOMContentLoaded', () => { }); } + /* 切换标签显示不同的标题 */ + { + if (Joe.DOCUMENT_TITLE) { + const TITLE = document.title; + document.addEventListener('visibilitychange', () => { + if (document.visibilityState === 'hidden') { + document.title = Joe.DOCUMENT_TITLE; + } else { + document.title = TITLE; + } + }); + } + } + /* 懒加载 */ new LazyLoad('.lazyload'); diff --git a/assets/js/joe.index.js b/assets/js/joe.index.js index b38410d..5c58cee 100644 --- a/assets/js/joe.index.js +++ b/assets/js/joe.index.js @@ -1,42 +1,53 @@ /* 首页需要用到的JS */ -console.time("Index.js执行时长") +console.time('Index.js执行时长'); document.addEventListener('DOMContentLoaded', () => { - /* 激活轮播图功能 */ - { - if ($('.joe_index__banner .swiper-container').length !== 0) { - let direction = 'horizontal' - if (!Joe.IS_MOBILE && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical' - new Swiper('.swiper-container', { keyboard: true, direction, loop: true, autoplay: true, mousewheel: true, pagination: { el: '.swiper-pagination' } }) - } - } + /* 激活轮播图功能 */ + { + if ($('.joe_index__banner .swiper-container').length !== 0) { + let direction = 'horizontal'; + if (!Joe.IS_MOBILE && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical'; + new Swiper('.swiper-container', { + keyboard: true, + direction, + loop: true, + autoplay: true, + mousewheel: true, + pagination: { el: '.swiper-pagination' }, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev' + } + }); + } + } - /* 初始化首页列表功能 */ - { - let queryData = { page: 1, pageSize: 12, type: 'created' } - const initDom = () => { - $('.joe_index__list .joe_list').html('') - let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]') - let activeLine = $('.joe_index__title-title .line') - activeItem.addClass('active').siblings().removeClass('active') - activeLine.css({ left: activeItem.position().left, width: activeItem.width() }) - } - const pushDom = () => { - return new Promise((reslove, reject) => { - $('.joe_load').attr('loading', true) - $('.joe_load').html('加载中') - $('.joe_index__list .joe_list__loading').show() - $.ajax({ - url: Joe.BASE_API, - type: 'POST', - data: { routeType: 'publish_list', page: queryData.page, pageSize: queryData.pageSize, type: queryData.type }, - success(res) { - if (res.data.length === 0) { - $('.joe_load').remove() - $('.joe_index__list .joe_list__loading').hide() - return - } - res.data.forEach(_ => { - $('.joe_index__list .joe_list').append(` + /* 初始化首页列表功能 */ + { + let queryData = { page: 1, pageSize: 12, type: 'created' }; + const initDom = () => { + $('.joe_index__list .joe_list').html(''); + let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]'); + let activeLine = $('.joe_index__title-title .line'); + activeItem.addClass('active').siblings().removeClass('active'); + activeLine.css({ left: activeItem.position().left, width: activeItem.width() }); + }; + const pushDom = () => { + return new Promise((reslove, reject) => { + $('.joe_load').attr('loading', true); + $('.joe_load').html('加载中'); + $('.joe_index__list .joe_list__loading').show(); + $.ajax({ + url: Joe.BASE_API, + type: 'POST', + data: { routeType: 'publish_list', page: queryData.page, pageSize: queryData.pageSize, type: queryData.type }, + success(res) { + if (res.data.length === 0) { + $('.joe_load').remove(); + $('.joe_index__list .joe_list__loading').hide(); + return; + } + res.data.forEach(_ => { + $('.joe_index__list .joe_list').append(`
  • @@ -49,6 +60,7 @@ document.addEventListener('DOMContentLoaded', () => {
    + 置顶
    ${_.title}
    ${_.abstract} @@ -68,41 +80,41 @@ document.addEventListener('DOMContentLoaded', () => {
  • - `) - }) - $('.joe_load').removeAttr('loading') - $('.joe_load').html('查看更多') - $('.joe_index__list .joe_list__loading').hide() - new LazyLoad('.list_lazyload') - reslove(res.data.length > 0 ? res.data.length - 1 : 0) - } - }) - }) - } - initDom() - pushDom() - $('.joe_index__title-title .item').on('click', async function () { - if ($(this).attr('data-type') === queryData.type) return - queryData = { page: 1, pageSize: 12, type: $(this).attr('data-type') } - initDom() - pushDom() - }) - $('.joe_load').on('click', async function () { - if ($(this).attr('loading')) return - queryData.page++ - let length = await pushDom() - length = $('.joe_index__list .joe_list .joe_list__item').length - length - const queryElement = `.joe_index__list .joe_list .joe_list__item:nth-child(${length})` - const offset = $(queryElement).offset().top - $('.joe_header').height() - window.scrollTo({ top: offset - 15, behavior: 'smooth' }) - }) - } + `); + }); + $('.joe_load').removeAttr('loading'); + $('.joe_load').html('查看更多'); + $('.joe_index__list .joe_list__loading').hide(); + new LazyLoad('.list_lazyload'); + reslove(res.data.length > 0 ? res.data.length - 1 : 0); + } + }); + }); + }; + initDom(); + pushDom(); + $('.joe_index__title-title .item').on('click', async function () { + if ($(this).attr('data-type') === queryData.type) return; + queryData = { page: 1, pageSize: 12, type: $(this).attr('data-type') }; + initDom(); + pushDom(); + }); + $('.joe_load').on('click', async function () { + if ($(this).attr('loading')) return; + queryData.page++; + let length = await pushDom(); + length = $('.joe_index__list .joe_list .joe_list__item').length - length; + const queryElement = `.joe_index__list .joe_list .joe_list__item:nth-child(${length})`; + const offset = $(queryElement).offset().top - $('.joe_header').height(); + window.scrollTo({ top: offset - 15, behavior: 'smooth' }); + }); + } - /* 激活列表特效 */ - { - const wow = $('.joe_index__list').attr('data-wow') - if (wow !== 'off' && wow) new WOW({ boxClass: 'wow', animateClass: `animated ${wow}`, offset: 0, mobile: true, live: true, scrollContainer: null }).init() - } + /* 激活列表特效 */ + { + const wow = $('.joe_index__list').attr('data-wow'); + if (wow !== 'off' && wow) new WOW({ boxClass: 'wow', animateClass: `animated ${wow}`, offset: 0, mobile: true, live: true, scrollContainer: null }).init(); + } - console.timeEnd("Index.js执行时长") -}) + console.timeEnd('Index.js执行时长'); +}); diff --git a/core/api.php b/core/api.php index ac766b2..e2ff271 100644 --- a/core/api.php +++ b/core/api.php @@ -32,6 +32,28 @@ function _getPost($self) $pageSize = $self->request->pageSize; $type = $self->request->type; $result = []; + /* 增加置顶文章功能,通过JS判断(如果你想添加其他标签的话,请先看置顶如何实现的) */ + $sticky_text = Helper::options()->JIndexSticky; + if ($sticky_text && $page == 1) { + $sticky_arr = explode("||", $sticky_text); + foreach ($sticky_arr as $cid) { + $self->widget('Widget_Archive@' . $cid, 'pageSize=1&type=post', 'cid=' . $cid)->to($item); + $result[] = array( + "image" => _getThumbnail($item, false), + "time" => date('Y-m-d', $item->created), + "created" => date('Y年m月d日', $item->created), + "title" => $item->title, + "abstract" => _getAbstract($item, false), + "category" => $item->categories, + "views" => _getViews($item, false), + "commentsNum" => number_format($item->commentsNum), + "agree" => _getAgree($item, false), + "permalink" => $item->permalink, + "lazyload" => _getLazyload(false), + "type" => "sticky" + ); + } + } $self->widget('Widget_Contents_Sort', 'page=' . $page . '&pageSize=' . $pageSize . '&type=' . $type)->to($item); while ($item->next()) { $result[] = array( @@ -45,7 +67,8 @@ function _getPost($self) "commentsNum" => number_format($item->commentsNum), "agree" => _getAgree($item, false), "permalink" => $item->permalink, - "lazyload" => _getLazyload(false) + "lazyload" => _getLazyload(false), + "type" => "normal" ); }; $self->response->throwJson(array("data" => $result)); @@ -145,4 +168,3 @@ function _pushRecord($self) $result = curl_exec($ch); $self->response->throwJson(json_decode($result)); } - diff --git a/functions.php b/functions.php index f53efa5..c73b442 100644 --- a/functions.php +++ b/functions.php @@ -204,7 +204,6 @@ function themeConfig($form) $JFooter_Right->setAttribute('class', 'joe_content joe_global'); $form->addInput($JFooter_Right); - /* Live2d */ $JLive2d = new Typecho_Widget_Helper_Form_Element_Select( 'JLive2d', array( @@ -244,6 +243,16 @@ function themeConfig($form) $JLive2d->setAttribute('class', 'joe_content joe_global'); $form->addInput($JLive2d->multiMode()); + $JDocumentTitle = new Typecho_Widget_Helper_Form_Element_Text( + 'JDocumentTitle', + NULL, + NULL, + '网页被隐藏时显示的标题', + '介绍:在PC端切换网页标签时,网站标题显示的内容。如果不填写,则默认不开启' + ); + $JDocumentTitle->setAttribute('class', 'joe_content joe_global'); + $form->addInput($JDocumentTitle); + $JAside = new Typecho_Widget_Helper_Form_Element_Checkbox( 'JAside', array( @@ -536,7 +545,7 @@ function themeConfig($form) $JIndex_Carousel->setAttribute('class', 'joe_content joe_index'); $form->addInput($JIndex_Carousel); - $JIndex_Recommend = new Typecho_Widget_Helper_Form_Element_Textarea( + $JIndex_Recommend = new Typecho_Widget_Helper_Form_Element_Text( 'JIndex_Recommend', NULL, NULL, @@ -549,6 +558,18 @@ function themeConfig($form) $JIndex_Recommend->setAttribute('class', 'joe_content joe_index'); $form->addInput($JIndex_Recommend); + $JIndexSticky = new Typecho_Widget_Helper_Form_Element_Text( + 'JIndexSticky', + NULL, + NULL, + '首页置顶文章(非必填)', + '介绍:请务必填写正确的格式
    + 格式:文章的ID || 文章的ID || 文章的ID (中间使用两个竖杠分隔)
    + 例如:1 || 2 || 3' + ); + $JIndexSticky->setAttribute('class', 'joe_content joe_index'); + $form->addInput($JIndexSticky); + $JIndex_Hot = new Typecho_Widget_Helper_Form_Element_Radio( 'JIndex_Hot', array('off' => '关闭(默认)', 'on' => '开启'), diff --git a/index.php b/index.php index b59dbd9..388447d 100644 --- a/index.php +++ b/index.php @@ -64,6 +64,8 @@
    +
    +
    diff --git a/public/include.php b/public/include.php index 9422d6c..5f73789 100644 --- a/public/include.php +++ b/public/include.php @@ -8,6 +8,7 @@ WALLPAPER_BACKGROUND_PC: 'options->JWallpaper_Background_PC() ?>', IS_MOBILE: /windows phone|iphone|android/gi.test(window.navigator.userAgent), BAIDU_PUSH: options->JBaiduToken ? 'true' : 'false' ?>, + DOCUMENT_TITLE: 'options->JDocumentTitle() ?>', encryption: str => window.btoa(unescape(encodeURIComponent(str))), decrypt: str => decodeURIComponent(escape(window.atob(str))), changeURLArg: function(url, arg, arg_val) {