基于林木木开发Memobbs，感谢林木木为Memos开发这款颜值在线的“哔哔广场”！

哔哔广场

前言

一直想给博客添加一个Memos页面，在此之前是使用Html在独立页面中直接引用我的Memos站点，既不美观且多设备上的交互也不便捷。

某一日在网上冲浪时看到有站点将Memos页面融入到自己的博客中，遂再次开始研究如何实现这个想法，在网络上检索一番后找到了Memobbs，几番操作成功实现！

展示页面:https://www.lniaen.com/memos.html

添加页面

在站点主题根目录下新建*.php并为该文件添加以下代码。

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit;
/**
 * immmmm的Memos模板
 *
 * @package custom
 */
?>

<!DOCTYPE html>
    <?php $this->need('header.php'); ?>
    <body>
        <link rel="stylesheet" href="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/animate.css/4.1.1/animate.min.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/artalk/2.7.3/ArtalkLite.css">
        <link rel="stylesheet" href="https://memobbs.app/grid.css">
        <link rel="stylesheet" href="https://memobbs.app/memos.css">

        <div id="memos"></div>
        <div id="memo-list"></div>

        <script type="text/javascript">
        var memosMyList = [
            {
            "creatorName" : "lniaen", //你的MemosUSERNAME
            "website" : "https://lniaen.com", //你的博客站点链接
            "link" : "https://memos.lniaen.com", //你的Memos站点链接
            "creatorId" : "1", //MemosID 新版本为1 旧版本为101
            "avatar" : "https://gravatar.com/avatar/c590733231e0c474eec6fdedafdbb48d" //头像链接
            },
            {
            "creatorName" : "koobai",
            "website" : "https://koobai.com",
            "link" : "https://memos.koobai.com",
            "creatorId" : "1",
            "avatar" : "https://cravatar.cn/avatar/3b3d336a7d389b7ae8531cbe177ae9b7?s=80",
            "artalk" : "https://c.koobai.com",
            "artSite" : "空白唠叨"
            },{
            "creatorName": "Elizen",
            "website" : "https://elizen.me",
            "link" : "https://memos.elizen.me",
            "creatorId" : "101",
            "twikoo" : "https://pl.elizen.me",
            "avatar": "https://cravatar.cn/avatar/f65df4d87240feb1cb247857a621a48f?s=80"
            }
        ]
        </script>

        <script src="https://cdn.staticfile.org/twikoo/1.6.29/twikoo.min.js"></script>
        <script src="https://cdn.staticfile.org/artalk/2.7.3/ArtalkLite.js"></script>
        <script src="https://cdn.staticfile.org/marked/7.0.5/marked.min.js"></script>
        <script src="https://cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js"></script>

        <script>
        var meting_api='https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r';
        </script>

        <script src="https://cdn.staticfile.org/meting/2.0.1/Meting.min.js"></script>
        <script src="https://cdn.staticfile.org/lozad.js/1.16.0/lozad.min.js"></script>
        <script src="https://memobbs.app/memos.js"></script>
    </body>
    <?php $this->need('footer.php'); ?>
</html>

文件创建完成后记得修改该文件权限，接下来在Typecho的独立页面中新建页面并选择该页面模板即可生效。

加入广场

在Github中PR memos.json 这个文件即可。

折腾说明

若已加入 memos.json ，则会自动查询当前页面的主域名，如 https://elizen.me 匹配上主页直接就是展示 Elizen 的 Memos 信息；否，则展示作者林木木的信息。


客制化该页面

在memobbs仓库打包下载，编辑memos.js文件并上传到你的服务器本地即可。

记得在模板文件中修改引用链接。

相关链接

哔哔广场.app
MemoBBS
https://github.com/lmm214/memobbs