给Typecho的Joe主题添加侧边栏公告

可能有人觉得Joe主题自带的公告不好用 因为字数多了会... 然后本人复制粘贴改代码写出了侧边栏公告 下图为侧边栏公告样式图

教程开始

1 .将下列代码放入主题目录的functions.php文件里

 // 侧边栏公告
$Notice = new Typecho_Widget_Helper_Form_Element_Textarea(
    'Notice',
    NULL,
    NULL,
    '侧边栏公告 - PC',
    '介绍：侧边栏公告'
  );
$Notice->setAttribute('class', 'joe_content joe_other');
$form->addInput($Notice);

2 .再将下列代码放入主题目录public目录aside.php文件里

  <section class="joe_aside__item hot">
      <div class="joe_aside__item-title">
          <svg t="1703481319577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1547" width="200" height="200"><path d="M770.9 161.9H648.4v-30.4c0-17.4-14.3-31.7-31.7-31.7h-1.8c-17.4 0-31.7 14.3-31.7 31.7v30.4H414.8v-30.4c0-17.4-14.3-31.7-31.7-31.7h-1.8c-17.4 0-31.7 14.3-31.7 31.7v30.4H227.2c-36.6 0-66.3 29.7-66.3 66.3V886c0 36.6 29.7 66.3 66.3 66.3h543.7c36.6 0 66.3-29.7 66.3-66.3V228.2c0-36.6-29.8-66.3-66.3-66.3z m-421.2 65.4v18.3c0 17.4 14.2 31.7 31.7 31.7h1.8c17.4 0 31.7-14.3 31.7-31.7v-18.1l168.4 0.3v17.8c0 17.4 14.2 31.7 31.7 31.7h1.8c17.4 0 31.7-14.3 31.7-31.7V228l123.6 0.3v112.4H227l0.2-113.5 122.5 0.1z m421.2 659.8L226 886l0.8-480.2H772V886c0 0.6-0.5 1.1-1.1 1.1z" fill="#4A5FE2" p-id="1548"></path><path d="M630.7 532.7H367.3c-17.9 0-32.6 14.7-32.6 32.6s14.7 32.6 32.6 32.6h263.4c17.9 0 32.6-14.7 32.6-32.6s-14.7-32.6-32.6-32.6zM630.7 654.9H367.3c-17.9 0-32.6 14.7-32.6 32.6 0 17.9 14.7 32.6 32.6 32.6h263.4c17.9 0 32.6-14.7 32.6-32.6 0-17.9-14.7-32.6-32.6-32.6z" fill="#A1AFFF" p-id="1549"></path></svg>
          <span class="text">公告</span>
      </div>
  <?php $this->options->Notice() ?>
</section>

3 .在Typecho后台→外观→Joe后台→其他设置 修改公告内容

<div class="card-widget card-announcement" style="padding: 20px 15px;color: var(--routine);">
测试
</div>

缺点：公告无文字时 侧边栏公告不会消失 如下图

解决缺点方法点我