Show one randomly selected article advertisement per page visit

config/advertising.php

@@ -1,6 +1,8 @@
 <?php
 
 return [
+    'dpl' => ['enabled' => env('DPL_AD_ENABLED', true), 'url' => env('DPL_AD_URL', 'https://dp-link.net/')],
+    'fuc' => ['enabled' => env('FUC_AD_ENABLED', true), 'url' => env('FUC_AD_URL', 'https://xn--123-9i9dj97q.com/')],
     'hn' => [
         'enabled' => env('HN_AD_ENABLED', true),
         'url' => env('HN_AD_URL', 'https://hardnerd.net/'),

public/css/random-article-ad.css

@@ -0,0 +1,5 @@
+.random-article-ad { position: relative; min-width: 0; aspect-ratio: 2.45; margin: 20px 0; overflow: hidden; border-radius: 12px; background: #181b1e; }
+.random-article-ad[hidden] { display: none !important; }
+.random-article-ad > a { display: block; position: absolute; inset: 0; }
+.random-article-ad img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.random-article-ad > a:focus-visible { outline: 3px solid #8ab4ff; outline-offset: -4px; }

public/js/random-article-ad.js

@@ -0,0 +1,18 @@
+(() => {
+    const slots = [];
+    function choose(slot, choices) {
+        const selected = choices[Math.floor(Math.random() * choices.length)];
+        slot.replaceChildren(selected.content.cloneNode(true));
+        slot.dataset.adSelected = selected.dataset.adChoice;
+        slot.hidden = false;
+    }
+    document.querySelectorAll('[data-random-article-ad]').forEach(slot => {
+        const choices = Array.from(slot.querySelectorAll('template[data-ad-choice]'));
+        if (!choices.length) return;
+        slots.push({ slot, choices });
+        choose(slot, choices);
+    });
+    window.addEventListener('pageshow', event => {
+        if (event.persisted) slots.forEach(({ slot, choices }) => choose(slot, choices));
+    });
+})();

resources/views/components/article-ads.blade.php

@@ -0,0 +1,36 @@
+@php
+    $adChoices = collect([
+        ['key' => 'dpl', 'file' => 'dpl-ad-site-style-20261028.png', 'width' => 1962, 'height' => 801, 'alt' => 'DPL：畅连全球网络。日常访问、远程办公、在线娱乐，查看套餐。'],
+        ['key' => 'hn', 'file' => 'hn-ad-refined-20261031.png', 'width' => 1964, 'height' => 801, 'alt' => 'Hardnerd：硬核架构，品质专线，全球网络畅通无阻。'],
+        ['key' => 'fuc', 'file' => 'fuc-ad-site-style-20261028.png', 'width' => 1962, 'height' => 801, 'alt' => '福云：全球网络中继服务。随时随处，尽情使用。了解福云。'],
+    ])->filter(fn ($ad) => config('advertising.'.$ad['key'].'.enabled')
+        && config('advertising.'.$ad['key'].'.url')
+        && is_file(public_path('images/ads/'.$ad['file'])))->values();
+@endphp
+@if ($adChoices->isNotEmpty())
+    @once
+        @push('styles')
+            <link rel="stylesheet" href="/css/random-article-ad.css?v={{ filemtime(public_path('css/random-article-ad.css')) }}">
+        @endpush
+    @endonce
+    <aside class="random-article-ad" data-random-article-ad aria-label="网络服务广告" hidden>
+        @foreach ($adChoices as $ad)
+            <template data-ad-choice="{{ $ad['key'] }}">
+                <a href="{{ config('advertising.'.$ad['key'].'.url') }}" target="_blank" rel="sponsored noopener noreferrer" aria-label="广告：{{ $ad['alt'] }}（新窗口打开）">
+                    <img src="/images/ads/{{ $ad['file'] }}?v={{ filemtime(public_path('images/ads/'.$ad['file'])) }}" alt="{{ $ad['alt'] }}" width="{{ $ad['width'] }}" height="{{ $ad['height'] }}" decoding="async">
+                </a>
+            </template>
+        @endforeach
+    </aside>
+    <noscript>
+        @php($ad = $adChoices->first())
+        <aside class="random-article-ad" aria-label="网络服务广告">
+            <a href="{{ config('advertising.'.$ad['key'].'.url') }}" target="_blank" rel="sponsored noopener noreferrer">
+                <img src="/images/ads/{{ $ad['file'] }}?v={{ filemtime(public_path('images/ads/'.$ad['file'])) }}" alt="{{ $ad['alt'] }}" width="{{ $ad['width'] }}" height="{{ $ad['height'] }}">
+            </a>
+        </aside>
+    </noscript>
+    @once
+        <script>{!! file_get_contents(public_path('js/random-article-ad.js')) !!}</script>
+    @endonce
+@endif

resources/views/pages/articles/default/show.blade.php

@@ -76,7 +76,7 @@
                   </div>
 
 
-                  @include('components.hn-article-ad')
+                  @include('components.article-ads')
 
                   <div class="post-tags mt-3 mt-md-4">
                       <div class="">