快速提示：为在线发布者设置受限制的内容的样式

最新推荐文章于 2024-09-25 23:39:39 发布

daique1908

最新推荐文章于 2024-09-25 23:39:39 发布

阅读量73

点赞数

文章标签： css js html java github ViewUI

许多流行的在线报纸（例如《华尔街日报》，《费加罗报》，《电讯报》）提供了一些免费内容，但是如果用户想要无限阅读，则要求他们购买订阅。

在许多人期望互联网上的内容免费的世界中，对于在线发布者来说，找到最合适的付款方式是一项持续的挑战。

“新闻业最重要的历史挑战之一是其经济可持续性。” – AurelijaGackaitė

以《华尔街日报》上的帖子为例，该文章允许用户免费摘录文章，但需要订阅才能获得全文：

在这个简短的教程中，我们将使用JavaScript来模仿这种行为。首先，我们将创建一个内容受限制的帖子，并用渐变遮盖，然后让订阅的用户显示完整的帖子。

这是我们的演示：

1.从页面标记开始

我们将从使用article元素代表典型的博客文章或报纸文章开始。我们还将其包装在.container以设置最大页面宽度。

这是相关的标记：

<div class="container">  
  <article class="post">
    <header>
      <h1 class="post-title">...</h1>
      <div class="post-meta">...</div>
    </header>
    <div class="post-content">...</div>
    <div class="actions">
      <p>...</p>
      <div class="links">...</div>
    </div>
  </article>    
</div>

2.添加CSS

默认情况下，我们将一个not-member类添加到html元素中（这里我们使用的是CodePen提供的“添加类”工具：

这样可以确保最初只有一小部分帖子对读者可见：

更具体地说，我们将仅显示标题，前两段以及号召性用语链接。（我们通过使用“一般兄弟组合子”，选择一切之后的第二款做到这一点p:nth-child(2) ~ * ）其中.not-member存在：

.not-member .post-content p:nth-child(2) ~ * {
  display: none;
}

.not-member .actions {
  display: block;
}

接下来，我们将在最后一个可见的段落（第二个）中添加一些样式。我们将逐渐隐藏其内容，并在其顶部添加一个挂锁图标。这些样式将使读者知道访问仅限于整篇文章。

这是此位所需CSS：

.not-member .post-content p:nth-child(2) {
  position: relative;
}

.not-member .post-content p:nth-child(2)::before,
.not-member .post-content p:nth-child(2)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.not-member .post-content p:nth-child(2)::before {
  background: url(padlock.svg) no-repeat center;
  z-index: 1;
  height: 24px;
}

.not-member .post-content p:nth-child(2)::after {
  background: linear-gradient(rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.36) 36%, rgba(255,255,255,0.54) 54%, rgba(255,255,255,0.72) 72%, rgba(255,255,255,0.9) 90%);
  height: 100%;
}

为了完善这些基本的样式规则，我们将对号召性用语进行样式设置：

.not-member .actions {
  font-weight: bold;
  text-align: center;
  margin-top: 2rem;
}

.not-member .links {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1rem;
}

.not-member .links a {
  background: firebrick;
  color: white;
  padding: 0.5rem 0;
  transition: background 0.3s;
}

.not-member .links a:hover {
  background: #9d1e1e;
}

3.解锁高级内容

出于简单演示的目的，我们假设读者每次点击号召性用语时都会成为高级会员。

在我们的例子中，此时not-member类已从html元素中删除，完整的帖子内容变为可见。

这是负责该功能JavaScript代码：

const links = document.querySelectorAll(".not-member .links a");

for(const link of links) {
  link.addEventListener("click", e => {
    e.preventDefault();
    document.documentElement.classList.remove("not-member"); 
  });
}

待整篇文章发表时，您无需再对第二段进行样式设置以及显示最初的号召性用语。因此，我们将其全部隐藏：

.post-content p:nth-child(2)::before,
.post-content p:nth-child(2)::after,
.actions {
  display: none;
}

最后，我们可以单击帖子内容底部的“ 取消订阅/退出”链接来重新启动订阅/取消订阅过程：

这是必需JavaScript代码：

const unsubscribe = document.querySelector(".unsubscribe");

 unsubscribe.addEventListener("click", e => {
    e.preventDefault();
    document.documentElement.classList.add("not-member"); 
  });