update
This commit is contained in:
toom1996
159
src/components/GuessYouLike.astro
Normal file
159
src/components/GuessYouLike.astro
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
---
|
||||||
|
import { Image } from "astro:assets";
|
||||||
|
const {data} = Astro.props
|
||||||
|
---
|
||||||
|
<div class="slide-container" style="padding-top:unset">
|
||||||
|
<div class="widget widget-tie divPrevious">
|
||||||
|
<h3>猜你喜欢</h3>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
data?.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<li class={`previous-${index + 1}`}>
|
||||||
|
<div class="previous-one-img">
|
||||||
|
<a
|
||||||
|
href={`/news/${item.id}`}
|
||||||
|
title={item.title}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
loading="eager"
|
||||||
|
src={item.cover}
|
||||||
|
alt={item.title}
|
||||||
|
height={100}
|
||||||
|
width={100}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="previous-recent-title">
|
||||||
|
<h4 class="title" style="margin-top: 0px;">
|
||||||
|
<a
|
||||||
|
href={`/news/${item.id}`}
|
||||||
|
title={item.title}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
<span class="info">{item.created_at}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.sidebar {
|
||||||
|
float: left;
|
||||||
|
margin-left: -360px;
|
||||||
|
width: 360px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.widget {
|
||||||
|
height: fit-content;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 15px 20px 10px 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.widget-tie h3 {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin-bottom: 21px;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
font-size: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.widget-tie h3:after {
|
||||||
|
content: "";
|
||||||
|
width: 70px;
|
||||||
|
height: 1px;
|
||||||
|
background: #e94c3d;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: -1px;
|
||||||
|
}
|
||||||
|
.widget ul {
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.following {
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
.following2 {
|
||||||
|
position: fixed;
|
||||||
|
_position: absolute;
|
||||||
|
top: 65px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
/*divPrevious*/
|
||||||
|
.divPrevious li {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-recent-title {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
padding: 5px 15px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-one-img {
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
max-height: initial;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-one-img img {
|
||||||
|
width: 320px;
|
||||||
|
height: 180px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-recent-title h4 {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-recent-title h4 a {
|
||||||
|
color: #e4e4e4;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-recent-title span {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-one-img {
|
||||||
|
float: left;
|
||||||
|
width: 75px;
|
||||||
|
height: auto;
|
||||||
|
max-height: 75px;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-one-img img {
|
||||||
|
width: 75px;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-recent-title {
|
||||||
|
margin-left: 85px;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-recent-title h4 {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-recent-title span {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #9a9a9a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -4,8 +4,7 @@ import { getConfig } from "../../utils/config";
|
|||||||
import { newsIndex } from "../../utils/rpc";
|
import { newsIndex } from "../../utils/rpc";
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
const config = getConfig(Astro);
|
const config = getConfig(Astro);
|
||||||
const { code, data, guess } = await newsIndex(config.id, 3, 1);
|
const { code, data, guess } = await newsIndex(config.id, 20, 1);
|
||||||
console.log(data)
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
@ -215,40 +214,89 @@ console.log(data)
|
|||||||
</div>
|
</div>
|
||||||
<div class="news">
|
<div class="news">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section_title_wrapper mb-60 text-center">
|
<div class="team-head text-center">
|
||||||
<h2 class="section-title team_title_h3">最新资讯</h2>
|
<h3>最新资讯</h3>
|
||||||
|
<p style="width:unset;margin-bottom:1rem">
|
||||||
|
霍尔果斯飞驰广告有限公司专注于提供从基础到进阶的SEO优化策略、广告投放方案、内容运营实战技巧以及网站转化率提升解决方案。同时，我们也持续分享最新的科技动态、财经洞察、软件评测等多类型优质资讯，助力用户在数字时代高效获取价值信息。
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
{
|
<div class="xznews-container width-1200">
|
||||||
data.map((item) => {
|
<div class="xznews-box">
|
||||||
return (
|
<div class="xznews-box-f xznews-box-width news-box">
|
||||||
<div class="col-xl-4 col-lg-4 col-md-6">
|
<div class="xznews-f-pitem">
|
||||||
<div class="blog">
|
{
|
||||||
<a title={item.title} href={`/news/${item.id}`}>
|
data?.slice(0, 2).map((e, index) => (
|
||||||
<div class="blog__image">
|
<a title={e.title} class="pitem-item" target="_blank" href={`/news/${e.id}`}>
|
||||||
<Image
|
<div class="item-img-wrapper">
|
||||||
class="blog-image"
|
<Image src={e.cover} alt={e.title} class="item-img" height={100} width={100} />
|
||||||
width={100}
|
</div>
|
||||||
height={100}
|
<div class="item-title">{e.title}</div>
|
||||||
alt={item.title}
|
</a>
|
||||||
src={item.cover}
|
))
|
||||||
/>
|
}
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
data?.slice(2, 3).map((e, index) => (
|
||||||
|
<div style="padding:.5rem">
|
||||||
|
<a title={e.title} class="xznews-f-fitem" target="_blank" href={`/news/${e.id}`}>
|
||||||
|
<Image src={e.cover} alt={e.title} class="f-item-img" height={100} width={100} />
|
||||||
|
<div class="fitem-tip">{e.title}</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="blog__meta">
|
))
|
||||||
<span>{item.created_at}</span>
|
}
|
||||||
<div>
|
</div>
|
||||||
<h3 class="title">
|
<div class="xznews-box-s xznews-box-width2 news-box">
|
||||||
{item.title}
|
<div class="xznews-s-list spc-list">
|
||||||
</h3>
|
{
|
||||||
|
data?.slice(3, 10).map((e, index) => (
|
||||||
|
<div class="es">
|
||||||
|
<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))
|
||||||
<a title={`${item.column_tag}`} href={item.column_tag_url}><span class="label label-success">{item.column_tag}</span></a>
|
}
|
||||||
</a>
|
</div>
|
||||||
|
<div class="xznews-s-list">
|
||||||
|
{
|
||||||
|
data?.slice(10, 17).map((e, index) => (
|
||||||
|
<div class="es">
|
||||||
|
<a title={e.title} class={index > 0 ? ' s-list-item' : 's-list-item spc-item'} target="_blank" href={`/news/${e.id}`}>{e.title}</a>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
<div class="xznews-box-t xznews-box-width3 news-box">
|
||||||
})
|
<div class="t-list">
|
||||||
}
|
{
|
||||||
|
data?.slice(18, 20).map((e, index) => (
|
||||||
|
<div>
|
||||||
|
<a class="t-item-spc" target="_blank" title={e.title} href={`/news/${e.id}`}>
|
||||||
|
<div class="item-img-wrapper">
|
||||||
|
<Image src={e.cover} alt={e.title} class="item-img" height={100} width={100} />
|
||||||
|
</div>
|
||||||
|
<div class="t-item-box">
|
||||||
|
<div class="t-item-title">{e.title}</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
{
|
||||||
|
guess?.slice(0, 9).map((e, index) => (
|
||||||
|
<div>
|
||||||
|
<a class="t-item" target="_blank" title={e.title} href={`/news/${e.id}`}>
|
||||||
|
<div class="t-item-tip">{index + 1}. </div>
|
||||||
|
<div class="t-item-title es">{e.title}</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import { newsIndex } from "../../utils/rpc";
|
|||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
import PaginationComponent from "../components/Pagination.astro";
|
import PaginationComponent from "../components/Pagination.astro";
|
||||||
import BreadComponent from "../components/Breadcrumb.astro";
|
import BreadComponent from "../components/Breadcrumb.astro";
|
||||||
|
import GuessYouLike from "../components/GuessYouLike.astro";
|
||||||
const config = getConfig(Astro);
|
const config = getConfig(Astro);
|
||||||
|
|
||||||
// 每页显示多少条
|
// 每页显示多少条
|
||||||
@ -157,46 +158,7 @@ if (data.length == 0 || code !== 0) {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide-container" style="padding-top:unset">
|
<GuessYouLike data={guess} />
|
||||||
<div class="widget widget-tie divPrevious">
|
|
||||||
<h3>猜你喜欢</h3>
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
guess?.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<li class={`previous-${index + 1}`}>
|
|
||||||
<div class="previous-one-img">
|
|
||||||
<a
|
|
||||||
href={`/news/${item.id}`}
|
|
||||||
title={item.title}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
loading="eager"
|
|
||||||
src={item.cover}
|
|
||||||
alt={item.title}
|
|
||||||
height={100}
|
|
||||||
width={100}
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="previous-recent-title">
|
|
||||||
<h4 class="title">
|
|
||||||
<a
|
|
||||||
href={`/news/${item.id}`}
|
|
||||||
title={item.title}
|
|
||||||
>
|
|
||||||
{item.title}
|
|
||||||
</a>
|
|
||||||
</h4>
|
|
||||||
<span class="info">{item.created_at}</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||||||
import { getConfig } from "../../../utils/config";
|
import { getConfig } from "../../../utils/config";
|
||||||
import { newsDetail, columns as getColumns } from "../../../utils/rpc";
|
import { newsDetail, columns as getColumns } from "../../../utils/rpc";
|
||||||
import Breadcrumb from "../../components/Breadcrumb.astro";
|
import Breadcrumb from "../../components/Breadcrumb.astro";
|
||||||
|
import GuessYouLike from "../../components/GuessYouLike.astro";
|
||||||
import { formatDate } from "../../../utils/date";
|
import { formatDate } from "../../../utils/date";
|
||||||
const { slug } = Astro.params;
|
const { slug } = Astro.params;
|
||||||
const config = getConfig(Astro);
|
const config = getConfig(Astro);
|
||||||
@ -39,7 +40,8 @@ if (!slug) {
|
|||||||
return Astro.rewrite("/404");
|
return Astro.rewrite("/404");
|
||||||
}
|
}
|
||||||
|
|
||||||
var { code, data } = await newsDetail(slug, config);
|
var { code, data, guess } = await newsDetail(slug, config);
|
||||||
|
console.log(guess)
|
||||||
if (!data || code !== 0) {
|
if (!data || code !== 0) {
|
||||||
return Astro.rewrite("/404");
|
return Astro.rewrite("/404");
|
||||||
}
|
}
|
||||||
@ -142,6 +144,7 @@ const bytedanceData = formatDate(data.created_at)
|
|||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<GuessYouLike data={guess} />
|
||||||
</aside>
|
</aside>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
Reference in New Issue
Block a user