网站修改记录

倒叙

3 - 2024/1/2 你好 hugo

更换 hugo 博客框架，stcak 主题，纯静态就是快。

2 - ? 年你好 typecho

采用 typecho 博客框架，joe 主题，typecho 还是挺简洁的。

2.1 - joe 主题

2.1.1 - 文章大纲功能

一、joe 主题增加文章大纲功能

https://github.com/HaoOuBa/Joe/issues/84

文章目录功能是通过 AutocJs 来实现的，具体可以看：https://github.com/yaohaixiao/AutocJS

二、配置步骤

首先进入网站后台，点击更换外观，点击全局设置

然后在下方找到自定义增加<head></head>里内容（非必填），填入下面代码

1
2
3
4
5
6
7
8


<style type="text/css">
.outline-outside-modal-opened {
 z-index: 10000 !important;
 left: 0;
 width: 300px !important;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/css/autoc.min.css">

最后在自定义<body></body>末尾位置内容（非必填）中填入下面代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56


<script src="https://fastly.jsdelivr.net/gh/zhx47/autocjs/dist/autoc.min.js"></script>
<script>
// 文章导航
if ($(".joe_detail__article").length > 0) {
    var switcher = document.createElement('div');
    switcher.className = 'joe_action_item custom_switcher';

    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('class', 'custom_switcher');
    svg.setAttribute("viewBox", "0 0 1024 1024");
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    svg.setAttribute("width", "25");
    svg.setAttribute("height", "25");

    var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path1.setAttribute('class', 'custom_switcher');
    path1.setAttribute("d", "M64.67 512c2.03-148.27 27.78-271.04 103.07-344.26C240.96 92.45 363.73 66.7 512 64.67c148.27 2.03 271.04 27.78 344.26 103.07C931.55 240.96 957.3 363.73 959.33 512c-2.03 148.27-27.78 271.04-103.07 344.26C783.04 931.55 660.27 957.3 512 959.33c-148.27-2.03-271.04-27.78-344.26-103.07C92.45 783.04 66.7 660.27 64.67 512z");
    var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path2.setAttribute('class', 'custom_switcher');
    path2.setAttribute("d", "M706.07 405.35H327.44c-18.64 0-33.9-15.25-33.9-33.9 0-18.64 15.25-33.9 33.9-33.9h378.62c18.64 0 33.9 15.25 33.9 33.9 0 18.64-15.25 33.9-33.89 33.9zM706.07 563.37H327.44c-18.64 0-33.9-15.25-33.9-33.9 0-18.64 15.25-33.9 33.9-33.9h378.62c18.64 0 33.9 15.25 33.9 33.9s-15.25 33.9-33.89 33.9zM475.54 721.4h-148.1c-18.64 0-33.9-15.25-33.9-33.9 0-18.64 15.25-33.9 33.9-33.9h148.09c18.64 0 33.9 15.25 33.9 33.9 0.01 18.65-15.25 33.9-33.89 33.9z");
    path2.setAttribute("fill", "#FFFFFF");
    switcher.appendChild(svg);
    svg.appendChild(path1);
    svg.appendChild(path2);
    document.getElementsByClassName('joe_action')[0].appendChild(switcher);
    // 创建 Outline 实例
    let navigation = new AutocJs({
        // 文章正文 DOM 节点的 ID 选择器
        article: '.joe_detail__article',
        // 要收集的标题选择器
        selector: 'h1,h2,h3,h4,h5,h6',
        // 侧边栏导航的标题
        title: '文章导读',
        // 文章导读导航的位置
        // outside - 以侧边栏菜单形式显示（默认值）
        // inside - 在文章正文一开始的地方显示
        position: 'outside',
        // 标题图标链接的 URL 地址
        // （默认）没有设置定制，点击链接页面滚动到标题位置
        // 设置了链接地址，则不会滚动定位
        anchorURL: '',
        // 链接的显示位置
        // front - 在标题最前面（默认值）
        // back - 在标题后面
        anchorAt: 'back',
        // 是否生成文章导读导航
        isGenerateOutline: true,
        // 是否在文章导读导航中显示段落章节编号
        isGenerateOutlineChapterCode: false,
        // 是否在正文的文章标题中显示段落章节编号
        isGenerateHeadingChapterCode: false,
        // 是否在正文的文章标题中创建锚点
        isGenerateHeadingAnchor: false
    });
}
</script>

2.1.2 - 增加侧边栏社交信息

一、添加PC端

打开 Joe/public/aside.php 文件，然后在想要增加的位置添加以下代码

位置:24行到50行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


    <!-- PC侧栏社交信息 -->
    <?php if ($this->options->SocialInfo && (($this->options->SocialSwitch === 'on') || ($this->options->SocialSwitch === 'on2'))) : ?>
        <?php
        $SocialInfo = $this->options->SocialInfo;
        if ($SocialInfo) {
            $SocialInfo_arr = explode("\r\n", $SocialInfo);
            if (count($SocialInfo_arr) > 0) {
                for ($i = 0; $i < count($SocialInfo_arr); $i++) {
                    $SocialTitle = explode("||", $SocialInfo_arr[$i])[0];
                    $SocialIco = explode("||", $SocialInfo_arr[$i])[1];
                    $SocialUrl = explode("||", $SocialInfo_arr[$i])[2];
                    $SocialInfos[] = array("SocialTitle" => trim($SocialTitle), "SocialIco" => trim($SocialIco), "SocialUrl" => trim($SocialUrl));
                }
            }
        }
        ?>
        <section class="top-social">
            <?php foreach ($SocialInfos as $item) : ?>
                <li class="<?php echo $item['SocialTitle']; ?>">
                    <a class="<?php echo $item['SocialTitle']; ?>A" href="<?php echo $item['SocialUrl']; ?>" target="_blank" title="<?php echo $item['SocialTitle']; ?>">
                        <img src="<?php echo $item['SocialIco']; ?>" />
                    </a>
                </li>
            <?php endforeach; ?>
        </section>
    <?php endif; ?>

二、添加PE端

打开 Joe/public/header.php 文件，然后在想要增加的位置添加上面PC的代码 PE端的代码和上面的一样，只需要将<section class="top-social">换成 <section class="top-social pe-social">

位置:404-429行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


	<!-- PC侧栏社交信息 -->
    <?php if ($this->options->SocialInfo && (($this->options->SocialSwitch === 'on') || ($this->options->SocialSwitch === 'on2'))) : ?>
        <?php
        $SocialInfo = $this->options->SocialInfo;
        if ($SocialInfo) {
            $SocialInfo_arr = explode("\r\n", $SocialInfo);
            if (count($SocialInfo_arr) > 0) {
                for ($i = 0; $i < count($SocialInfo_arr); $i++) {
                    $SocialTitle = explode("||", $SocialInfo_arr[$i])[0];
                    $SocialIco = explode("||", $SocialInfo_arr[$i])[1];
                    $SocialUrl = explode("||", $SocialInfo_arr[$i])[2];
                    $SocialInfos[] = array("SocialTitle" => trim($SocialTitle), "SocialIco" => trim($SocialIco), "SocialUrl" => trim($SocialUrl));
                }
            }
        }
        ?>
        <section class="top-social pe-social">
            <?php foreach ($SocialInfos as $item) : ?>
                <li class="<?php echo $item['SocialTitle']; ?>">
                    <a class="<?php echo $item['SocialTitle']; ?>A" href="<?php echo $item['SocialUrl']; ?>" target="_blank" title="<?php echo $item['SocialTitle']; ?>">
                        <img src="<?php echo $item['SocialIco']; ?>" />
                    </a>
                </li>
            <?php endforeach; ?>
        </section>
    <?php endif; ?>

三、添加后台

直接在 Joe/functions.php 添加以下代码

位置:53-81行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


    // 侧栏社交信息开关
    $SocialSwitch = new Typecho_Widget_Helper_Form_Element_Select(
    'SocialSwitch',
    array(
        'off' => '关闭（默认）',
        'on' => '开启PC社交信息',
        'on1' => '开启PE社交信息',
        'on2' => '同时开启PC与PE社交信息',
    ),
    'off',
    '是否启用侧栏社交信息',
    '介绍：开启后，侧栏展示社交信息功能（必须填写下面的侧栏社交信息）'
    );
    $SocialSwitch->setAttribute('class', 'joe_content joe_other'); //没有custom.php就把joe_custom改成joe_other
    $form->addInput($SocialSwitch->multiMode());

    //侧栏社交信息
    $SocialInfo = new Typecho_Widget_Helper_Form_Element_Textarea(
    'SocialInfo',
    NULL,
    NULL,
    '侧栏社交信息',
    '介绍：用于设置侧栏社交信息 <br />
         格式:社交简称(微信必须固定格式WeChat) || 社交图标 || 跳转链接(微信则填二维码链接) <br />
         比如: Bilibili || 图标链接 || id(中间使用两个竖杠分隔) <br />
         其他：其他:一行一个，一行代表一个社交信息 '
    );
    $SocialInfo->setAttribute('class', 'joe_content joe_other'); //没有custom.php就把joe_custom改成joe_other
    $form->addInput($SocialInfo);

四、添加样式

在 Joe/assets/css/joe.global.min.css 里添加以下样式

两种选一个就行

1

.top-social{position:relative;padding:10px 0;width:250px;display:flex;flex-wrap:wrap;background:var(--background);justify-content:space-around;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.top-social li{width:50px;text-align:center;padding:5px 0px}.top-social li img{height:25px}.top-social .wechat{position:relative}.top-social .wechat .wechatInner{display:none;position:absolute;box-shadow:0px 1px 4px 2px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-175px;left:-45px;transform:translate3d(0, 16px, 0);width:140px;height:140px}.top-social .wechat .wechatInner::before{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;display:inline-block;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:#fff;filter:drop-shadow(0px 4px 2px var(--theme))}.top-social .wechat .wechatInner img{border-radius:var(--radius-wrap);width:140px;height:auto;padding:0;background:none}.top-social .wechat:hover .wechatInner{display:block}.pe-social{width:100%}

用的这个目前

1

.top-social{position:relative;padding:5px 0;width:250px;display:flex;flex-wrap:wrap;background:var(--background);justify-content:space-around;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);li{width:50px;text-align:center;padding:5px 0;position:relative;img{height:32px}.WeChatInner{display:none;position:absolute;box-shadow:0 1px 4px 2px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-175px;left:-50px;transform:translate3d(0,16px,0);width:150px;height:150px;z-index:2;&::before{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;display:inline-block;width:0;border:18px solid transparent;border-bottom:0;border-top-color:var(--background);filter:drop-shadow(0px 4px 2px var(--theme))}img{border-radius:2px;width:140px;height:auto;margin:5px;background:0}}&:hover .WeChatInner{display:block}}}.pe-social{width:100%}

五、添加JS

实际没加这个,也是能用的.

可以直接在 Joe/assets/js/joe.global.min.js 最后添加

~~修改了第45行~~

1

<script src="<?php $this->options->themeUrl('assets/js/custom.min.js'); ?>"></script>

2.1.3 - 取消版权许可

public/copyright.php文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


注释掉
<!--
        <div class="item">
            <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
                <path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#F3B243" />
                <path d="M540.672 323.584a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM540.672 688.128a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM229.376 512a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0z" fill="#FFF" />
                <path d="M341.037 480.37l257.344-175.718 27.713 40.592-257.34 175.718z" fill="#FFF" />
                <path d="M349.053 488.452L601.907 670.56l-28.725 39.887L320.307 528.34z" fill="#FFF" />
            </svg>
            <span>作品采用：</span>
            <span class="text">
                《
                <a class="link" href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener noreferrer nofollow">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a>
                》许可协议授权
            </span>
        </div>
-->

2.2 - 改用 0A-My 主题

这个主题有点卡。

或者可以看下这个主题：https://github.com/happyet/Gplus

1 - 最开始你好 wordpress

第一个域名：sadahalu。来源于银魂里的神乐的狗的名字（定春），域名太长了。

第二个域名就是这个站。

1.1 - memory 主题

https://shawnzeng.com/ 制作的，开源版：https://github.com/ShawnZeng1996/Memory，不更新了。

1.2

wordpress更新的太臃肿了，换typecho博客框架。