diff --git a/config/advertising.php b/config/advertising.php index 12a62b03..c79314e0 100644 --- a/config/advertising.php +++ b/config/advertising.php @@ -1,6 +1,8 @@ ['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/'), diff --git a/public/css/random-article-ad.css b/public/css/random-article-ad.css new file mode 100644 index 00000000..60f8c579 --- /dev/null +++ b/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; } diff --git a/public/images/ads/dpl-ad-site-style-20261028.png b/public/images/ads/dpl-ad-site-style-20261028.png new file mode 100644 index 00000000..ec53a6eb Binary files /dev/null and b/public/images/ads/dpl-ad-site-style-20261028.png differ diff --git a/public/images/ads/fuc-ad-site-style-20261028.png b/public/images/ads/fuc-ad-site-style-20261028.png new file mode 100644 index 00000000..5190a6db Binary files /dev/null and b/public/images/ads/fuc-ad-site-style-20261028.png differ diff --git a/public/js/random-article-ad.js b/public/js/random-article-ad.js new file mode 100644 index 00000000..8cb547b3 --- /dev/null +++ b/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)); + }); +})(); diff --git a/resources/views/components/article-ads.blade.php b/resources/views/components/article-ads.blade.php new file mode 100644 index 00000000..34a6f91c --- /dev/null +++ b/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') + + @endpush + @endonce + + + @once + + @endonce +@endif diff --git a/resources/views/pages/articles/default/show.blade.php b/resources/views/pages/articles/default/show.blade.php index 7f77a8a3..7a7f9d8b 100644 --- a/resources/views/pages/articles/default/show.blade.php +++ b/resources/views/pages/articles/default/show.blade.php @@ -76,7 +76,7 @@ - @include('components.hn-article-ad') + @include('components.article-ads')