Skip to content

Commit

Permalink
Update blog - 2024-11-08 23:54:32
Browse files Browse the repository at this point in the history
  • Loading branch information
@aliceric27
aliceric27 committed Nov 8, 2024
1 parent 22677a9 commit 9a18aed
Show file tree
Hide file tree
Showing 82 changed files with 13,905 additions and 0 deletions.
416 changes: 416 additions & 0 deletions 2023/01/31/2023-01-31-自傳履歷/index.html
View file

Large diffs are not rendered by default.

317 changes: 317 additions & 0 deletions 2024/09/03/2024-09-03-Vue 從模板傳值到 CSS 偽元素 content 內容/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,317 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 7.3.0">

<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.ico">
<link rel="mask-icon" href="/images/favicon.ico" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,300italic,400,400italic,700,700italic%7CGrenze+Gotisch:300,300italic,400,400italic,700,700italic%7CFira+Code:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha256-5eIC48iZUHmSlSUz9XtjRyK2mzQkHScZY1WdMaoz74E=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Mist","darkmode":false,"version":"8.21.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"hide","padding":18,"offset":12},"hljswrap":true,"copycode":{"enable":true,"style":null},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":false,"async":true,"transition":{"menu_item":null,"post_block":null,"post_header":null,"post_body":null,"coll_header":null,"sidebar":null}},"i18n":{"placeholder":"搜尋...","empty":"我們無法找到任何有關 ${query} 的搜索結果","hits_time":"找到 ${hits} 個搜索結果（用時 ${time} 毫秒）","hits":"找到 ${hits} 個搜索結果"}}</script><script src="/js/config.js"></script>

<meta name="description" content="Vue 從模板傳值到 CSS 偽元素 content 內容">
<meta property="og:type" content="article">
<meta property="og:title" content="使用 Vue 設定偽元素 content">
<meta property="og:url" content="http://example.com/2024/09/03/2024-09-03-Vue%20%E5%BE%9E%E6%A8%A1%E6%9D%BF%E5%82%B3%E5%80%BC%E5%88%B0%20CSS%20%E5%81%BD%E5%85%83%E7%B4%A0%20content%20%E5%85%A7%E5%AE%B9/index.html">
<meta property="og:site_name" content="Wei&#39;s Blog">
<meta property="og:description" content="Vue 從模板傳值到 CSS 偽元素 content 內容">
<meta property="og:locale" content="zh_TW">
<meta property="article:published_time" content="2024-09-03T03:49:30.000Z">
<meta property="article:modified_time" content="2024-11-08T14:59:40.870Z">
<meta property="article:author" content="Wei">
<meta property="article:tag" content="Front-end">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/2024/09/03/2024-09-03-Vue%20%E5%BE%9E%E6%A8%A1%E6%9D%BF%E5%82%B3%E5%80%BC%E5%88%B0%20CSS%20%E5%81%BD%E5%85%83%E7%B4%A0%20content%20%E5%85%A7%E5%AE%B9/">


<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-TW","comments":true,"permalink":"http://example.com/2024/09/03/2024-09-03-Vue%20%E5%BE%9E%E6%A8%A1%E6%9D%BF%E5%82%B3%E5%80%BC%E5%88%B0%20CSS%20%E5%81%BD%E5%85%83%E7%B4%A0%20content%20%E5%85%A7%E5%AE%B9/","path":"2024/09/03/2024-09-03-Vue 從模板傳值到 CSS 偽元素 content 內容/","title":"使用 Vue 設定偽元素 content"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>使用 Vue 設定偽元素 content | Wei's Blog</title>









<noscript>
<link rel="stylesheet" href="/css/noscript.css">
</noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage">
<a target="_blank" rel="noopener" href="https://github.com/aliceric27" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 999;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div class="headband"></div>

<main class="main">
<div class="column">
<header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="切換導航欄" role="button">
</div>
</div>

<div class="site-meta">

<a href="/" class="brand" rel="start">
<i class="logo-line"></i>
<p class="site-title">Wei's Blog</p>
<i class="logo-line"></i>
</a>
<p class="site-subtitle" itemprop="description">NaN==Not a Nerd</p>
</div>

<div class="site-nav-right">
<div class="toggle popup-trigger" aria-label="搜尋" role="button">
</div>
</div>
</div>







</header>


<aside class="sidebar">

<div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
<ul class="sidebar-nav">
<li class="sidebar-nav-toc">
文章目錄
</li>
<li class="sidebar-nav-overview">
本站概要
</li>
</ul>

<div class="sidebar-panel-container">
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
<div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-Attr"><span class="nav-number">1.</span> <span class="nav-text">使用 Attr()</span></a></li></ol></div>
</div>
<!--/noindex-->

<div class="site-overview-wrap sidebar-panel">
<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
<p class="site-author-name" itemprop="name">Wei</p>
<div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap animated">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">9</span>
<span class="site-state-item-name">文章</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/">
<span class="site-state-item-count">4</span>
<span class="site-state-item-name">分類</span></a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags/">
<span class="site-state-item-count">4</span>
<span class="site-state-item-name">標籤</span></a>
</div>
</nav>
</div>
<div class="links-of-author animated">
<span class="links-of-author-item">
<a href="https://github.com/aliceric27" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;aliceric27" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
</span>
</div>

</div>
</div>
</div>


</aside>


</div>

<div class="main-inner post posts-expand">






<div class="post-block">




<article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-TW">
<link itemprop="mainEntityOfPage" href="http://example.com/2024/09/03/2024-09-03-Vue%20%E5%BE%9E%E6%A8%A1%E6%9D%BF%E5%82%B3%E5%80%BC%E5%88%B0%20CSS%20%E5%81%BD%E5%85%83%E7%B4%A0%20content%20%E5%85%A7%E5%AE%B9/">

<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="Wei">
</span>

<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Wei's Blog">
<meta itemprop="description" content="">
</span>

<span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
<meta itemprop="name" content="使用 Vue 設定偽元素 content | Wei's Blog">
<meta itemprop="description" content="">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
使用 Vue 設定偽元素 content
</h1>

<div class="post-meta-container">
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">發表於</span>

<time title="創建時間：2024-09-03 11:49:30" itemprop="dateCreated datePublished" datetime="2024-09-03T11:49:30+08:00">2024-09-03</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">更新於</span>
<time title="修改時間：2024-11-08 22:59:40" itemprop="dateModified" datetime="2024-11-08T22:59:40+08:00">2024-11-08</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-folder"></i>
</span>
<span class="post-meta-item-text">分類於</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Front-end/" itemprop="url" rel="index"><span itemprop="name">Front-end</span></a>
</span>
</span>


</div>

</div>
</header>




<div class="post-body" itemprop="articleBody"><p>Vue 從模板傳值到 CSS 偽元素 content 內容</p>
<span id="more"></span>
<hr>
<h2 id="使用-Attr"><a href="#使用-Attr" class="headerlink" title="使用 Attr()"></a>使用 Attr()</h2><p>首先在模板定義<code>data-*</code>參數，並使用 Vue 模板傳入對應值</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;dh-header&quot;</span> <span class="attr">:data-title</span>=<span class="string">&quot;data.title&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>然後在 CSS 中使用<code>attr()</code>引入自訂的變數</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.dh-header</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line"> <span class="attribute">content</span>:<span class="built_in">attr</span>(data-title);</span><br><span class="line"> <span class="attribute">display</span>:block;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<hr>
<p><a target="_blank" rel="noopener" href="https://pjchender.dev/html/html-data-attribute/">什麼是 HTML 5 中的資料屬性（data-* attribute）</a></p>

</div>





<footer class="post-footer">
<div class="post-tags">
<a href="/tags/Front-end/" rel="tag"># Front-end</a>
</div>



<div class="post-nav">
<div class="post-nav-item">
<a href="/2023/01/31/2023-01-31-%E8%87%AA%E5%82%B3%E5%B1%A5%E6%AD%B7/" rel="prev" title="自傳履歷">
<i class="fa fa-angle-left"></i> 自傳履歷
</a>
</div>
<div class="post-nav-item">
<a href="/2024/09/10/2024-09-10-js-event-loop/" rel="next" title="JS 的 Even Loop 是什麼？">
JS 的 Even Loop 是什麼？ <i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</footer>
</article>
</div>







</div>
</main>

<footer class="footer">
<div class="footer-inner">

<div class="powered-by"><a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/mist/" rel="noopener" target="_blank">NexT.Mist</a>
</div>

</div>
</footer>


<div class="toggle sidebar-toggle" role="button">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</div>
<div class="sidebar-dimmer"></div>
<div class="back-to-top" role="button" aria-label="回到頂端">
<i class="fa fa-arrow-up fa-lg"></i>
<span>0%</span>
</div>

<noscript>
<div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>



<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/sidebar.js"></script><script src="/js/next-boot.js"></script>














</body>
</html>
Loading

0 comments on commit 9a18aed

Please sign in to comment.