标签 css 下的文章 - 老姚日记--随心记录,胡乱折腾

2021-05-19

伪3D文本 HTML<div class="loading">Loading</div>CSS@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap"); @function float-text-3d($shadow-color: #bbb, $depth: 10, $floating: false) { $shadows: (); // When dropped, it will shrink like a spring. When floating, it grows into its shape. @for $i from 1 to $depth { @if ($floating == false and $i > $depth / 2) { $shadow-color: transparent; } $shadows: append($shadows, 0 ($i * 1px) $shadow-color, comma); } // When dropped, the shadow reveals. When floating, the shadow fades. @if ($floating == false) { $shadows: append($shadows, 0 10px 10px rgba(0, 0, 0, 0.4), comma); } @else { $shadows: append($shadows, 0 50px 25px rgba(0, 0, 0, 0.2), comma); } @return $shadows; } body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #2980b9; } .loading { display: flex; color: white; font-size: 5em; font-family: "Baloo Bhaijaan", cursive; text-transform: uppercase; span { text-shadow: float-text-3d($floating: false); transform: translateY(20px); animation: bounce 0.3s ease infinite alternate; } } @keyframes bounce { to { text-shadow: float-text-3d($floating: true); transform: translateY(-20px); } }JSlet loading = document.querySelector(".loading"); let letters = loading.textContent.split(""); loading.textContent = ""; letters.forEach((letter, i) => { let span = document.createElement("span"); span.textContent = letter; span.style.animationDelay = `${i / 10}s`; loading.append(span); });

2021年05月19日
853 阅读
0 评论
4 点赞

2021-01-04

2021年01月04日
12,779 阅读
0 评论
9 点赞

2021-01-04

主题添加author page 1.在joe主题同级目录下添加一个author.php<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?> <?php if (empty($this->uid)) { $str = $_SERVER["REQUEST_URI"]; if (preg_match('/\d+/', $str, $arr)) { $id = $arr[0]; if ($this->user->hasLogin() && $this->user->uid == $id) { $lock = 0; } else { $lock = 1; } $info = userok($id); $this->user->uid = $id; $this->user->screenName = $info['screenName']; $this->user->mail = $info['mail']; $this->user->group = $info['group']; } } ?> <!DOCTYPE html> <html lang="en"> <head> <?php $this->need('public/head.php'); ?> </head> <body> <?php $this->options->JCustomBodyStart() ?> <section id="joe">  <?php $this->need('public/header.php'); ?>  <section class="container j-index j-author"> <section class="j-adaption"> <div class="col-md-12">  <header class="page-header"> <div class="author-header-meta"> <?php $email = $this->user->mail; $imgUrl = ParseAvatar($email, 1); echo '<img src="' . $imgUrl . '" class="avatar avatar-120 photo" height="50" width="50">'; ?> <div class="name"><?php $this->user->screenName(); ?></div> <div class="desc"><?php autvip($this->user->mail); ?></div> <div class="desc"> <svg t="1608204283958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3189" width="1em" height="1em"><path d="M826.46929 339.76682s19.698076 58.094327-94.090811 133.586954c0 0 55.19461-291.571526-302.170491-473.353774 0 0 99.090323 228.177717-108.089445 377.063177 0 0-78.792305-102.390001-226.677863-117.488526 0 0 61.394004 95.290694 56.394492 188.081633s-80.292159 196.880773-38.896201 328.567913c34.19666 108.789376 116.588614 214.879016 274.373206 247.775803-21.597891-54.894639-32.396836-112.589005 5.399472-261.774436 0 0 1.399863 123.587931 226.177913 255.275071 216.978811-57.494385 447.656284-264.574163 207.579728-677.733815z" p-id="3190" fill="#7a7b7c"></path></svg> <?php echo allviewnum($this->user->uid); ?> </div> </div> </header> </div> <section class="main <?php $this->options->JListType() ?>"> <div class="row author-page"> <div class="col-md-12">  <section class="j-index-article article">  <?php $this->need('component/index.list.php'); ?> </section> </div> </section> </section> </section>  <?php $this->need('public/footer.php'); ?> </section>  <?php $this->need('public/config.php'); ?> </body> </html>functions.php 或者 core.php // 会员页判断是否会员id function userok($id){ $db = Typecho_Db::get(); $userinfo=$db->fetchRow($db->select()->from ('table.users')->where ('table.users.uid=?',$id)); return $userinfo; } /**输出作者人气*/ function allviewnum($id){ $db = Typecho_Db::get(); $postnum=$db->fetchRow($db->select(array('Sum(views)'=>'allviewnum'))->from ('table.contents')->where ('table.contents.authorId=?',$id)->where('table.contents.type=?', 'post')); $postnum = $postnum['allviewnum']; if($postnum=='0') { return '暂无访问'; } elseif ($postnum>=10000) { return ' 1万+访问'; } elseif ($postnum<10000 && $postnum>5000) { return ' 5K+访问'; } else{ return ' '.$postnum.' °c 访问'; } }3. 添加一点样式 .j-author{ .author-header-meta{ text-align: center; margin: 50px 0; .avatar { border-radius: 100%; margin-top: -10px; margin-bottom: 10px; position: relative; } .name { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .desc { color: var(--routine); font-size: 14px; margin-bottom: 10px; } } }

2021年01月04日
14,770 阅读
1 评论
13 点赞

2020-10-18

2020年10月18日
5,039 阅读
7 评论
9 点赞

2020-10-08

给Typecho编辑文章页添加标签tags选择表 typecho的文章编辑页面常用的标签tags选择界面没有系统现有标签tags选择列表，应用中很是麻烦，需要记忆或者切换到标签管理界面查看。所以就研究一下怎么实现可选择的标签tags列表。貌似willin有了相关代码实现：看看效果：下面来看看这么实现Typecho撰写文章或文章编辑时的已有标签tags选择列表：打开typecho/admin目录，找到write-post.php文件(这个文件就是typecho文章编辑页面)，打开并进行编辑，在其中找到代码<?php $post->tags(',', false); ?>在该代码下插入以下代码：<p style="background:#E8EFD1;display:block;margin:6px 0;padding:6px 10px"> <?php $stack = Typecho_Widget::widget('Widget_Metas_Tag_Cloud')->stack; $i = 0; while (isset($stack[$i])) { echo "<a style=\"cursor:pointer\" onclick=\"t=document.getElementById('tags').value;c=t?',':''; document.getElementById('tags').value=t+c+'", $stack[$i]['name'], "'\">", $stack[$i]['name'], "</a>"; $i++; if (isset($stack[$i])) echo ", "; } ?> </p>插入后保存即可使用。

2020年10月08日
2,437 阅读
2 评论
3 点赞

2020-07-14

通过prism.js实现Typecho代码语法高亮实现方法进入prism.js官网的下载页面，Compression level一般选Minified version；Themes根据自己喜好选择；Languages选要用的就好了；全选的话js文件有320KB+，比较大；Plugins按需选择，全选的多个50KB左右。都选好了就可以下载js和css文件了。可以将下载好的js和css文件上传到Typecho的主题目录，即“usr/themes/主题名”目录下，然后登陆进入Typecho的后台，“控制台" --> “外观” --> "编辑当前外观",编辑header.php文件，在标签内插入如下代码：<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css');?>" /> <script src="<?php $this->options->themeUrl('prism.js');?>"></script>保存文件即可生效。在使用Markdown写文章时，只要在代码块标记`标记后面添加你的代码的语言名，如php、html、python等，就可以实现代码高亮展示。

2020年07月14日
1,608 阅读
0 评论
2 点赞