使用Laravel的Blade Templates相当好用，用久了还满习惯的，
但有一点就是当创建了很多的blade时，
搞的自己似乎不太好找，在这里提供了我最近的原创作法，
如果雷同纯属巧合了。

先来看我弄了什么:
如果您直接开启下方的连结，因为网址后有带了?border的参数，您就能看到我贴的标签，label的名称是blade 的view名称。
https://www.ccc.tc/article/tag-my-laravel-blade-view?border

别外也补了drag的功能 ，但发觉用途好像不大，本来想法是，如果Label卡一起时可以拖开，
但发觉就不能拷贝文本了@@，能拷贝文本贴到VSCode开档才是我主要的诉求..:p
https://www.ccc.tc/article/tag-my-laravel-blade-view?border&drag

本文中的进程码可能无法完全适合您的网站，我只是提供一种想法跟参考的。
 

我的作法如下:

在自己的layout的head tag内加了border_component

@if(isset($_GET['border']))
    @include("partials.border_component")
@endif

我的border_component的内容如下:

<style>
    .root {
        position: relative;
        border: 2px solid red;
    }
    .root>label{
        border-radius: 3px;
        position: absolute;
        display: block !important;
        top: 0.2em;
        left: 10ex;
        z-index: 9999999;
        max-width:220px;
        white-space: pre-wrap;
        color:white;
        border: 2px solid black;
        background-color: rgba(2,2,2,0.55);
        padding-right:2ex;
        padding-left: 2ex;
    }
</style>
<script>
    var randomColor = function(){
                        var colors = [ '#58508d', '#bc5090,#ff6361', 
                        '#ffa600', '#485cab','#d7e6f7',
                        '#19274b', '#869bfc','#140f07',
                        ];
                        return colors[Math.floor(Math.random() * colors.length)];
    }

    document.addEventListener("DOMContentLoaded", () => {

            document.querySelectorAll(".root>label").forEach(function(elm){
                if(elm.tagName=="LABEL"){
                    random_color = randomColor();
                    elm.style.borderColor = random_color;
                    elm.left="300px";
                    var rootElm = elm.closest('.root');
                    if(rootElm){
                        rootElm.style.borderColor = random_color;
                        //elm.style.left='0px';
                        @if(isset($_GET['drag']))
                            dragElement(elm);
                        @endif
                    }
                }
            });
                Livewire.hook('element.initialized', (el, component) => {
                    if(el.tagName=="LABEL"){
                        random_color = randomColor();
                        el.style.borderColor = random_color;

                        var rootElm = el.closest('.root');
                        if(rootElm){
                            rootElm.style.borderColor = random_color;
                        }
                        @if(isset($_GET['drag']))
                            el.style.cursor = "grab";
                            dragElement(el);
                        @endif
                    }
                });

    });
    

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

注: 上方的class会抓root后的第一个label。

然后在您自己的ViewServiceProvider创建一个view_name出来。

我目前这个网站使用的Laravel为9.40.1，如果您使用旧版本，请自行Google相关语法。
为何下方要把.换成斜线，因为拷贝贴到VSCode时，开档方便 。

关於ViewServiceProvider及ViewComposer您还不是很了解可到官网查看，或看我之前的文章后半有提到:

https://www.ccc.tc/article/my-browser-trait

View::composer('*', function ($view) {

    #把.换成斜线
    $view_name = str_replace(".","/",$view->name());

    $view->with([
        "view_name"=>$view_name,
    ]);

});

也就是说，所有的$view都能取得$view_name这个变量罗。

最后找到您想贴标签的blade，在最上的TAG补上class="root"
然后紧接一个隐藏label，我是bootstrap环境，所以用class="d-none"就搞定啦。

@if ($paginator->hasPages())
    <div class="d-flex justify-content-center row root">
        <label class="d-none">{{$view_name}}</label>
        <div>
            <nav aria-label="Page navigation example">
                <ul class="pagination pagination-sm m-0 float-right">

所以当URL传入border时，就会加载HTML head中的partials.border_component，该文件的CSS及Javascript就能替每个您觉的重要的View打标签罗。