ブログテーマ設定ガイド：SimpleMemoryのカスタマイズパラメータ

SimpleMemory設定パラメータの詳細

すべての設定はwindow.cnblogsConfig内に記述する必要があります。

ブログ园の「サイドバーの通知」で設定したコードにwindow.cnblogsConfigを追加することで、独自のカスタマイズが可能です！

※URLパラメータを使用する場合は、HTTPS対応のアドレスを指定してください。

1. 基本情報設定

以下のパラメータを使用できます：

パラメータ名	値	説明
`name`	ユーザー名	表示名を設定
`avatar`	HTTPS URL	プロフィール画像のパス
`startDate`	日付形式文字列: 例`2018-07-29`	入園日を設定
`blogIcon`	HTTPS URL	ブログアイコン

例：

window.cnblogsConfig = {
    info: {
        name: 'GeekerJun',
        avatar: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png',
        startDate: '2018-07-29',
        blogIcon: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png'
    }
}

※URLは事前にオンラインパスを準備しておくことを推奨します。

2. サイドバー設定

sidebarパラメータを使用してサイドバーのカスタマイズが可能です。

以下のパラメータが利用できます： navList（ナビゲーション）、customList（カスタムメニュー）、infoBackground（背景）、titleMsg（タイトルメッセージ）、submenu（展開設定）

navList - ナビゲーション設定

navListパラメータを使用して、リンクを追加できます。

sidebar: { 
    navList: [
        ['名前', 'URL', 'アイコン'],
        ['名前', 'URL', 'アイコン'],
        ......
    ],
  }

パラメータ	説明
`名前`	ナビゲーション名
`URL`	リンク先
`アイコン`	デフォルトは`icon-github`

例：

window.cnblogsConfig = {
    sidebar: { 
        navList: [
            ['CSDN', 'https://blog.csdn.net/windowsxp2018', 'icon-github'],
            ['ブログ園', 'https://www.cnblogs.com/GeekerJun', 'icon-github'],
            ['Weibo', 'https://weibo.com/u/5772827747', 'icon-github']
        ],
    },
}

customList - カスタムメニュー

customListを使用して、カテゴリ分けされたリンクを設定できます。

sidebar: {
    customList: {
        "カテゴリ名": { 
            "data": [ 
                ['リンク名', 'URL'],
                ['リンク名', 'URL'],
                ['リンク名', 'URL'],
            ],
            "icon": "アイコン名"
        }
    }
}

例：

window.cnblogsConfig = {
    info: {
        name: 'GeekerJun',
        avatar: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png',
        startDate: '2018-07-29',
        blogIcon: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png'
    },
    sidebar: { 
        navList: [
            ['CSDN', 'https://blog.csdn.net/windowsxp2018', 'icon-github'],
            ['ブログ園', 'https://www.cnblogs.com/GeekerJun', 'icon-github'],
            ['Weibo', 'https://weibo.com/u/5772827747', 'icon-github']
        ],
        customList: {
            "おすすめ": { 
                "data": [
                    ['正規表現', 'https://www.cnblogs.com/GeekerJun/p/14648069.html'],
                    ['JDBC設定', 'https://www.cnblogs.com/GeekerJun/p/17859798.html']
                ],
                "icon": "icon-brush_fill" 
            },
            "プログラミング": { 
                "data": [ 
                    ['学習法', 'https://www.cnblogs.com/GeekerJun/p/14585746.html'],
                    ['読書', 'https://www.cnblogs.com/GeekerJun/p/15047194.html']
                ],
                "icon": "icon-brush_fill" 
            },
        }
    }, 
}

infoBackground - 背景設定

sidebar: {
    infoBackground: '画像URL'
}

例：

window.cnblogsConfig = {
    sidebar: { 
        infoBackground: 'https://s21.ax1x.com/2024/03/26/pF5lwsP.jpg',
    }, 
}

titleMsg - タイトル設定

sidebar: {
    titleMsg: '表示テキスト',
}

例：

window.cnblogsConfig = {
    sidebar: {
        titleMsg: 'GeekerJunのブログへようこそ！',
    }
}

submenu - 展開設定

window.cnblogsConfig = {
    sidebar: {
        submenu: {
            pointsRank: false,
            latestPosts: false,
            myTags: false,
            postsClassify: false,
            articleClassify: false,
            readRank: false,
            recommendRank: false,
            postsArchive: false,
            articleArchive: false,
            customList: false,
            latestComment: false,
        },
    },
}

例：

window.cnblogsConfig = {
    sidebar: {
        submenu: {
            pointsRank: true,
            latestPosts: true,
            myTags: true,
        },
    },
}

3. バナー設定

ブログのトップページと記事ページの背景画像やタイトルを設定できます。

home - トップページ設定

banner: {
    home: {
        background: [
            "画像URL1",
            "画像URL2",
            ...
        ],
        title: 'タイトル',
        titleSource: 'jinrishici'
    },
}

例：

banner: {
    home: {
        background: [
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412014641936-347097934.jpg",
            ...
        ],
        title: '一人の価値とは、能力があるときの行動に在于る！',
        titleSource: 'one'
    },
},

article - 記事ページ設定

banner: {
    article: {
        background: [
            "画像URL1",
            "画像URL2",
            ...
        ],
    },
}

例：

window.cnblogsConfig = {
    banner: {
        article: {
            background: [
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051045157-2083404034.jpg",
                ...
            ],
        },
    },
}

4. ローディング設定

window.cnblogsConfig = {
    loading: {
        rebound: {
           tension: 16,
           friction: 5,
        },
        spinner: {
           id: 'spinner',
           radius: 90,
           sides: 3,
           depth: 4,
           colors: {
               background: '#000000',
               stroke: '#008000',
               base: null,
               child: '#ff0000',
           },
           alwaysForward: true,
           restAt: 0.3,
           renderBase: false,
        }
    },
}

5. フォントアイコン拡張

window.cnblogsConfig = {
    fontIconExtend: "CSSパス",
}

例：

window.cnblogsConfig = {
    fontIconExtend: "//at.alicdn.com/t/c/font_4424088_pz7rgb82fxf.css",
}

6. 進捗バー設定

window.cnblogsConfig = {
    progressBar: {
        id: 'top-progress-bar',
        color: '#008000',
        height: '2px',
        duration: 0.2,
    }
}

7. タイトル変更設定

window.cnblogsConfig = {
    title:{
        onblur: '(oﾟvﾟ)ノ Hi',
        onblurTime: 500,
        focus: '(*´∇｀*) ようこそ！',
        focusTime: 1000,
    }
}

8. フッター設定

window.cnblogsConfig = {
    footer: {
        style: 1,
        text: {
            left: '学習',
            right:'成長',
            iconFont: {
                icon:  "icon-shujuzhanshi",
                color: "green",
                fontSize: "36px"
            }
        },
    },
}

9. 音楽プレーヤー設定

aplayer: {
enable: true,
cdn: {
 aplayer: 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js',
 aplayercss: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css',
 meting: 'https://cdn.staticfile.org/meting/2.0.1/Meting.min.js'
},
options: {
   id: '1',
   server: 'netease',
   type: 'playlist',
   auto: 'netease',
   fixed: 'true',
   mini: 'true',
   theme: '#2980b9',
   loop: 'all',
   order: 'random',
   preload: 'auto',
   volume: '0.7',
   mutex: 'true',
   lrcType: '0',
   listFolded: 'true',
   listMaxHeight: '340px',
   storageName: 'cnblogsTheme',
  }
}

10. リンク設定

window.cnblogsConfig = {
    links: {
        footer: [
            ["名前1", 'URL'],
            ["名前2", 'URL'],
            ...
        ],
    },
}

例：

links: {
    footer: [
        ["CSDN", 'https://blog.csdn.net/windowsxp2018'],
        ["Bilibili", 'https://space.bilibili.com/395999414'],
        ...
    ],
},

タグ: ブログカスタマイズ simpleMemory テーマ設定サイドバー

7月25日 21:35 投稿

異端開発室