Skip to content

希望提供灵活自定义封面内容的能力 #507

Closed
@Lizhooh

Description

@Lizhooh

我发现,封面只能从 markdown 里读取,不能做到一个灵活的自定义内容(包括样式等)。

现在我只能这样做来实现灵活的自定义封面的内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Description">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://cdn.bootcss.com/docsify/4.6.10/themes/vue.css" rel="stylesheet">
    <style>
        .cover {
            display: none !important;
        }
    </style>
</head>
<body>
    <!-- 自定义内容 -->
    <template id="index_temp">
        <div style="text-align: center">
            <h2>Hello</h2>
            <a href="/#/readme">开始</a>
        </div>
    </template>
    <div id="index_view"></div>
    <div id="app"></div>
    <script>
        function renderIndexView() {
            var $ = document.querySelector.bind(document);
            if (window.location.hash === '#/') {
                $('#index_view').innerHTML = $('#index_temp').innerHTML;
            }
            else {
                $('#index_view').innerHTML = '';
            }
        }
        window.addEventListener('hashchange', renderIndexView);
        renderIndexView();

        window.$docsify = {
            name: 'Hello',
            repo: '',
            loadSidebar: true,
            coverpage: true,
            onlyCover: true,
        };
    </script>
    <script src="https://cdn.bootcss.com/docsify/4.6.10/docsify.min.js"></script>
    <script src="https://cdn.bootcss.com/docsify/4.6.10/plugins/zoom-image.min.js"></script>
</body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions