2021.8.22 博客优化笔记

增加了后台编辑页面的标签选择框

源文章

源文章传送门

实现方法

1、修改 write-post.php 文件（文件路径：admin/），在其中找到如下代码（94 行左右）：

<p><input id="tags" name="tags" type="text" value="<?php $post->tags(',', false); ?>" class="w-100 text" /></p>

在此段代码后新增如下代码：

<div id="exist-tags">
<p style="background: #fff;border: 1px solid #D9D9D6;display: block;padding: 2px 4px;">
<?php
$stack = Typecho_Widget::widget('Widget_Metas_Tag_Cloud')->stack;
$i = 0; 
while (isset($stack[$i])) {
  echo "<a id=\"mydiv$i\" style=\"cursor:pointer;padding: 0px 6px;margin: 2px 0;display: inline-block;\" onclick=\"$('#tags').tokenInput('add',{id:'",$stack[$i]['id'],"',tags:'",$stack[$i]['name'],"'});\">",$stack[$i]['name'], "</a>";
  $i++;
  if (isset($stack[$i])) echo "  ";
}
?>
</p>
</div>

侧边栏互动读者优化（5/4）

　　 添加 读者头像框
　　 优化 背景样式
　　 优化 黑夜模式元素颜色
　　 优化 读者链接颜色
　　 优化 读者信息位置

实现方法

准备工作

1、根据 这篇文章 为博客增加侧边栏的互动读者。

添加 读者头像框

1、修改 custom.css 文件（文件路径：usr/themes/Joe-master/assets/css/），在其中找到如下代码（67 行左右）：

.aside-hunter-authors .item .hunter-avatar .vatar img {
  width: 45px;
  border-radius: 100%;
}

将此段代码替换为如下代码：

.aside-hunter-authors .item .hunter-avatar .vatar img {
  width: 48px;
  border-radius: 50%;
  padding: 3px;
  border: 1px solid var(--classA);
}

优化 背景样式

1、

动态页面添加点赞功能（1/3）

　　 添加 点赞图标
　　 添加 点赞功能
　　 添加 点赞后图标变化效果

实现方法

准备工作

1、根据 这篇文章 为博客增加动态页面。

添加 点赞图标

1、修改 dynamic.php 文件（文件路径：usr/themes/Joe-master/），在其中找到如下代码（114 行左右）：

<div class="action">

在此段代码后新增如下代码：

  <div class="item j-comment-like <?php echo $likes['recording'] ? 'active' : ''; ?>" data-coid="<?php $comments->coid(); ?>">
    <i class="fa fa-heart-o fa-lg"></i>
    <span><?php echo $likes['likes']; ?></span>
  </div>