README

如何使用Region Halland的“RhFindOnPage”插件

以下是如何使用“RhFindOnPage”插件的说明。

应用领域

此插件提取所有h2、h3和h4标题并将它们放置在数组中。如果已安装“Modularity”，则还会从该插件中提取所有标题并将其添加到数组末尾。

注意！您还需要安装和启用Region Halland的插件“RhPrepareTheContent”，以便此插件能正常工作。

许可证模型

此插件使用GPL-3.0许可证模型。您可以通过附带文件了解更多关于此许可证模型的信息。

LICENSE (https://regionhalland.visualstudio.com/public.RhWpPlugIns/_git/RhFindOnPage?path=%2FLICENSE&version=GBmaster)

安装和激活

A) Hämta pluginen via Git eller läs in det med Composer
B) Installera Region Hallands plugin i Wordpress plugin folder
C) Aktivera pluginet inifrån Wordpress admin

通过Git获取插件

git clone https://regionhalland.visualstudio.com/public.RhWpPlugIns/_git/RhFindOnPage

通过composer导入插件

注意！确保您获取的是最新版本。

"require": {
  "regionhalland/region-halland-plugin-find-on-page": "1.0.0"
},

通过“Blade”在页面上显示“find-on-page”

@if(function_exists('get_region_halland_find_on_page'))
  @php($myNavs = get_region_halland_find_on_page())
    @if(isset($myNavs) && count($myNavs) > 0)
      @php($id = uniqid())
        <div id="content-nav-placeholder"></div>
        <nav class="content-nav-container rh-get-sticky" id="content-nav-container">
            <div>
                <h4 id="{{ $id }}">Hitta på sidan</h4>
                <ul>
                @foreach ($myNavs as $myNav)
                    <li>
                    <a href="#{{ $myNav['slug'] }}" data-pointstoid="{{ $myNav['slug'] }}">
                        {!! $myNav['content'] !!}
                    </a>
                    <meta itemprop="position" content="{{ $loop->iteration }}" />
                    </li>
                @endforeach
                </ul>
            </div>
        </nav>
    @endif
@endif

数组可能的样子示例

array (size=2)
  0 =>
    array (size=3)
      'class' => string 'content-nav__item-level--2' (length=26)
      'tag' => string 'h2' (length=2)
      'slug' => string 'lorem-ipsum-1' (length=11)
      'content' => string 'Lorem ipsum' (length=11)
  1 =>
    array (size=3)
      'class' => string 'content-nav__item-level--2' (length=26)
      'tag' => string 'h2' (length=2)
      'slug' => string 'lorem-ipsum-dolares-2' (length=19)
      'content' => string 'Lorem ipsum dolares' (length=19)

带有固定属性的CSS + 突出显示

.rh-get-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 15px;
}

.rh-get-fixed-sticky {
    position: fixed;
    top: 15px;
}

.content-highlight {
  -webkit-animation-name: content-hightlight-animation;
       -o-animation-name: content-hightlight-animation;
          animation-name: content-hightlight-animation;
  -webkit-animation-duration: 1.5s;
       -o-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
       -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-iteration-count: 1;
       -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
}

Jquery find-on-pgae滚动功能

$('a[href^="#"]').on( "click", function() {
var target = $(this.hash);
    if (target.length) {

        // Animate target
        $('html,body').animate({scrollTop: target.offset().top}, 1000);

        // Add class for highlight the text
        $(target).addClass("content-highlight");

        // Wait 1.5 s and then remove the highlight class
        setTimeout(function(){
            $(target).removeClass("content-highlight");
        }, 1500);

        return false;
    }
});

Jquery用于修复IE中的固定位置

if ($("body.page-template-default")[0]){
    $(window).scroll(function() {
        var myContentPosition = Math.round($('#content-nav-placeholder').offset().top);
        var myPosition = Math.round($('#content-nav-placeholder').offset().top - $(window).scrollTop());
        if (myPosition < 30) {
            $("#content-nav-container").addClass("rh-get-fixed-sticky");
        } else {
            $("#content-nav-container").removeClass("rh-get-fixed-sticky");
        }
    });
}

版本历史

2.10.0

在function htmlentities中添加了默认值

2.9.0

ACF字段现在在WP-JSON REST API中显示

2.8.0

为页面级别的“查找页面”添加ACF字段以隐藏
删除H3和H4标签

2.7.0

从slug中删除“ ”
由于Gutenberg，用preg_split替换PHP_EOUL

2.6.0

从slug中删除“,”和“.”
删除空标签
从标签中删除html

2.5.1

更新了readme文件

2.5.0

更新了pipelinen

2.4.0

将composer名称从“region-halland-find-on-page”更改为“region-halland-plugin-find-on-page”

2.3.0

重新构建了整个链接列表的获取过程

2.2.0

将链接列表添加到findonpage-array中

2.1.0

用""替换“,”和“/”

2.0.0

在slug中添加序号
移除了对Modularity的所有支持

1.2.0

更新了关于许可证模型的信息
附加了许可证模型文件

1.1.0

添加了带有标签的类名

1.0.1

改进了readme文件

1.0.0

第一个版本

regionhalland / region-halland-plugin-find-on-page

维护者

详细信息