├── page_end
    ├── footer.js
    ├── main.js
    ├── header.js
    ├── posts.js
    ├── page.js
    └── post.js
├── .gitignore
├── .jsdoc
├── .github
    └── workflows
    │   └── dist.yml
├── page_begin
    ├── main.html
    ├── header.html
    ├── page.html
    ├── footer.html
    ├── posts.html
    └── post.html
├── .merge
├── layout_begin.html
├── LICENSE
├── layout.css
├── README.md
└── layout_end.html


/page_end/footer.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | .tmp/


--------------------------------------------------------------------------------
/.jsdoc:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | 
3 | jsdoc2md page_end/*.js  page_begin/*.js  > API.md 


--------------------------------------------------------------------------------
/.github/workflows/dist.yml:
--------------------------------------------------------------------------------
 1 | name: dist
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - master
 7 | 
 8 | jobs:
 9 |   check-dist:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - uses: actions/checkout@v2
14 | 
15 |       - run: bash .merge
16 | 
17 |       - uses: actions/upload-artifact@v3
18 |         with:
19 |           name: dist
20 |           path: dist/
21 |           retention-days: 1


--------------------------------------------------------------------------------
/page_end/main.js:
--------------------------------------------------------------------------------
 1 | // LoadMain 根据页面内容 加载main容器 
 2 | // 目前支持 layout: post posts
 3 | function LoadMain() {
 4 |     if (vm.metadata.querySelector('#post_detail')) {
 5 |         LoadPost()
 6 |         LoadReadProcess()
 7 |         LoadComments()
 8 |     }
 9 |     else if (vm.metadata.querySelectorAll('.postTitle, .postTitl2, .entrylistPosttitle').length !== 0) {
10 |         LoadPosts()
11 |         LoadPage()
12 |     }
13 | }


--------------------------------------------------------------------------------
/page_begin/main.html:
--------------------------------------------------------------------------------
 1 | <!-- main -->
 2 | <template id="blogure-main">
 3 |     <template v-if="vm.layout === 'post'">
 4 |         <article class="article" v-scope="Post()"></article>
 5 |     </template>
 6 |     <template v-if="vm.layout === 'posts'">
 7 |         <div v-scope="Posts()"></div>
 8 |         <div v-scope="Page()"></div>
 9 |     </template>
10 | </template>
11 | <script>
12 |     function Main() {
13 |         return {
14 |             $template: '#blogure-main',
15 |         }
16 |     }
17 | </script>


--------------------------------------------------------------------------------
/.merge:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | mkdir .tmp
 4 | echo '<!-- DO NOT EDIT -->' > .tmp/DONOTEDIT
 5 | echo '<script>' > .tmp/SCRIPT
 6 | echo '</script>' > .tmp/SCRIPTEND
 7 | wget https://unpkg.com/@picocss/pico@1.5.5/css/pico.min.css -O .tmp/pico.min.css
 8 | 
 9 | mkdir dist
10 | cat .tmp/DONOTEDIT layout_begin.html page_begin/*.html > dist/page_begin.html
11 | cat .tmp/DONOTEDIT layout_end.html .tmp/SCRIPT page_end/*.js .tmp/SCRIPTEND > dist/page_end.html
12 | cat .tmp/pico.min.css layout.css >  dist/custom.css
13 | rm -rf .tmp


--------------------------------------------------------------------------------
/layout_begin.html:
--------------------------------------------------------------------------------
 1 | <!-- 主题页面结构 -->
 2 | <header v-scope="Header()" class="container"></header>
 3 | <main v-scope="Main()" class="container"></main>
 4 | <footer v-scope="Footer()" class="container"></footer>
 5 | 
 6 | <script>
 7 |     // stub 假桩 markdown_highlight写在博客园的脚本中, 不受主题控制但是会修改dom元素, 朴素的想法就是先替换为空函数
 8 |     // 等挂载后再主动调用这个函数 切换函数见 reset
 9 |     function markdown_highlight_swap() { }
10 | 
11 |     function stub() {
12 |         [markdown_highlight, markdown_highlight_swap] = [markdown_highlight_swap, markdown_highlight]
13 |     }
14 |     stub()
15 | </script>


--------------------------------------------------------------------------------
/page_begin/header.html:
--------------------------------------------------------------------------------
 1 | <!-- header -->
 2 | <template id="blogure-header">
 3 |     <nav style="align-items:center;">
 4 |         <hgroup style="margin-bottom:0;">
 5 |             <h3><a :href="vm.header.url">{{ vm.header.title }}</a></h3>
 6 |             <h4>{{ vm.header.subtitle }}</h4>
 7 |         </hgroup>
 8 |         <details role="list" style="margin-bottom:0;margin-left:var(--nav-element-spacing-horizontal);">
 9 |             <summary aria-haspopup="listbox" role="link">更多</summary>
10 |             <ul role="listbox" id="navList" style="z-index: 0;" v-html="vm.header.navlist"></ul>
11 |         </details>
12 |     </nav>
13 | </template>
14 | <script>
15 |     function Header() {
16 |         return {
17 |             $template: '#blogure-header',
18 |         }
19 |     }
20 | </script>


--------------------------------------------------------------------------------
/page_begin/page.html:
--------------------------------------------------------------------------------
 1 | <!-- page -->
 2 | <template id="blogure-page">
 3 |     <ul :aria-busy="!(vm.page.async.pages ?? true)" style="display:flex;padding-left:0;justify-content:center;">
 4 |         <li v-for="(p, index) in vm.page.pages ?? []"
 5 |             style="margin-right:var(--nav-element-spacing-horizontal);list-style:none;">
 6 |             <kbd v-if="p.url == ''" style="background-color:var(--code-kbd-color);">
 7 |                 <span style="color: var(--code-kbd-background-color);">{{ p.desc }}</span></kbd>
 8 |             <kbd v-else><a :href="p.url" style="color:var(--code-kbd-color);">{{ p.desc }}</a></kbd>
 9 |         </li>
10 |     </ul>
11 | </template>
12 | <script>
13 |     function Page() {
14 |         return {
15 |             $template: '#blogure-page',
16 |         }
17 |     }
18 | </script>


--------------------------------------------------------------------------------
/page_end/header.js:
--------------------------------------------------------------------------------
 1 | // header 博客头部
 2 | // header = {
 3 | //     "url": "https://www.cnblogs.com/blogure/", // 博客园主页url
 4 | //     "title": "blogure", // 博客园标题
 5 | //     "subtitle": "又一个博客园主题", // 博客园副标题
 6 | //     "navlist": "...管理" // 导航栏dom
 7 | // }
 8 | 
 9 | // LoadHeader 头部数据初始化
10 | function LoadHeader() {
11 |     const vm = window.vm
12 |     const header = (vm.header = {})
13 |     const headerdom = vm.metadata.querySelector('#header')
14 |     // 博客标题 博客子标题
15 |     const h1dom = headerdom.querySelector('h1 a')
16 |     header.url = h1dom.href.trim()
17 |     header.title = h1dom.innerText.trim()
18 |     const h2dom = headerdom.querySelector('h2')
19 |     header.subtitle = h2dom.innerText.trim()
20 |     // 导航栏控件
21 |     header.navlist = ''
22 |     const navlistdoms = headerdom.querySelectorAll('#navList li')
23 |     navlistdoms.forEach(nav => { // 这里解析仅对空值过滤
24 |         if (nav.innerText.trim()) {
25 |             header.navlist += nav.outerHTML
26 |         }
27 |     })
28 |     console.debug(`header${header} loaded`)
29 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 zidft
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/page_end/posts.js:
--------------------------------------------------------------------------------
 1 | // posts 文章数组
 2 | 
 3 | // LoadPosts 文章列表初始化
 4 | function LoadPosts() {
 5 |     // 设置页面布局与初始化文章数组
 6 |     const vm = window.vm
 7 |     vm.layout = 'posts'
 8 |     vm.posts = []
 9 |     // 获取页面全部文章链接
10 |     const postlistdoms = vm.metadata.querySelectorAll('.postTitle, .postTitl2, .entrylistPosttitle')
11 |     const descsdoms = vm.metadata.querySelectorAll('.postDesc, .postDesc2, .entrylistItemPostDesc')
12 |     const l = Math.min(postlistdoms.length, descsdoms.length)
13 |     for (let index = 0; index < l; index++) {
14 |         // 初始化文章进行预加载
15 |         const post = { async: {} }
16 |         const adom = postlistdoms[index].querySelector('a')
17 |         post.title = adom.innerText.trim()
18 |         post.url = adom.href.trim()
19 |         post.async.preview = false
20 |         vm.posts.push(post)
21 |         Get(post.url).then(((idx) => {
22 |             return (r) => {
23 |                 const tempdom = document.createElement('div')
24 |                 tempdom.innerHTML = r.responseText.trim()
25 |                 FillPost(vm.posts[idx], tempdom)
26 |                 vm.posts[idx].async.preview = true
27 |             }
28 |         })(index))
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/layout.css:
--------------------------------------------------------------------------------
 1 | /* custom */
 2 | kbd {
 3 |     --font-family: "sans-serif";
 4 | }
 5 | 
 6 | body {
 7 |     visibility: hidden;
 8 | }
 9 | 
10 | blockquote {
11 |     border-top: 0;
12 |     border-bottom: 0;
13 | }
14 | 
15 | blockquote p {
16 |     margin-bottom: 0;
17 | }
18 | 
19 | pre>.highlighter-prismjs,
20 | pre>code {
21 |     padding: 0;
22 | }
23 | 
24 | ::-webkit-scrollbar {
25 |     width: calc(var(--spacing)/2);
26 |     height: calc(var(--spacing)/2);
27 | }
28 | 
29 | ::-webkit-scrollbar-thumb {
30 |     background: var(--code-kbd-background-color);
31 | }
32 | 
33 | .is-active-li {
34 |     background: var(--code-kbd-background-color);
35 | }
36 | 
37 | .toc-list {
38 |     padding: 0;
39 | }
40 | 
41 | .toc-list-item a {
42 |     color: var(--code-kbd-background-color);
43 | }
44 | 
45 | .is-active-li a {
46 |     color: var(--code-kbd-color);
47 | }
48 | 
49 | p code {
50 |     padding: calc(var(--spacing) / 4);
51 | }
52 | 
53 | .light:before {
54 |     content: "🌝";
55 | }
56 | 
57 | .dark:before {
58 |     content: "🌚";
59 | }
60 | 
61 | #navList li a {
62 |     display: block !important;
63 | }
64 | 
65 | .is-collapsible {
66 |     overflow: hidden;
67 |     transition: var(--transition)
68 | }
69 | 
70 | .is-collapsed {
71 |     max-height: 0
72 | }


--------------------------------------------------------------------------------
/page_begin/footer.html:
--------------------------------------------------------------------------------
 1 | <!-- footer -->
 2 | <template id="blogure-footer">
 3 |     <small>Built with <a href="https://www.cnblogs.com/">cnblogs</a> •
 4 |         <a href="https://github.com/xnuc/cnblogs-theme-blogure">source</a></small>
 5 |     <label for="switch">
 6 |         <input type="checkbox" style="position:fixed;bottom:var(--spacing);left:var(--spacing);" id="dark-switch"
 7 |             :class="vm.theme" role="switch" @click="darkSwitcher($el)"
 8 |             :checked="localStorage.getItem('data-theme') === 'dark' ?? false">
 9 |     </label>
10 |     <template v-if="vm.layout === 'post'">
11 |         <label for="switch">
12 |             <input type="checkbox"
13 |                 style="position:fixed;bottom:var(--spacing);right:var(--spacing);z-index:3;transform:rotate(180deg);"
14 |                 id="toc-switch" role="switch" @click="tocSwitcher($el)">
15 |         </label>
16 |         <aside id="toc"
17 |             style="transition:var(--transition);transform:translate(calc(var(--spacing)*15));width:calc(var(--spacing)*15);height:100%;position:fixed;top:0;right:0;z-index:2;background-color:var(--code-kbd-color);">
18 |         </aside>
19 |     </template>
20 | </template>
21 | <script>
22 |     function Footer() {
23 |         return {
24 |             $template: '#blogure-footer',
25 |         }
26 |     }
27 | </script>


--------------------------------------------------------------------------------
/page_begin/posts.html:
--------------------------------------------------------------------------------
 1 | <!-- post -->
 2 | <template id="blogure-posts">
 3 |     <article class="article" v-for="(post, index) in vm.posts ?? []">
 4 |         <!-- 标题 -->
 5 |         <h2
 6 |             style="position:relative;top:calc(var(--block-spacing-horizontal)*-3);height:var(--block-spacing-horizontal);margin-bottom:0;text-align:center;">
 7 |             <kbd style="box-shadow:var(--card-box-shadow);">
 8 |                 <a :href="post.url" style="text-align:center;color:var(--code-kbd-color);">{{ post.title }}</a>
 9 |             </kbd>
10 |         </h2>
11 |         <!-- 发布时间 观看人数 评论数 -->
12 |         <template v-if="!post.async.preview">
13 |             <div aria-busy="true"></div>
14 |         </template>
15 |         <template v-if="post.async.preview">
16 |             <div style="opacity:50%;text-align:center;">
17 |                 📅 {{ post.desc.date }}
18 |                 👁️ {{ post.desc.viewCount }}
19 |                 💬 {{ post.desc.commentCount }}
20 |             </div>
21 |             <div v-html="post.preview" v-effect="markdown_highlight('.article');;mermaidRender.render();"></div>
22 |         </template>
23 |         <!-- 更多按钮 -->
24 |         <a :href="post.url"
25 |             style="display:inline-block;margin-bottom:var(--spacing);text-decoration:underline;color:var(--code-kbd-background-color);">阅读更多</a>
26 |         <!-- 标签 -->
27 |         <ul :aria-busy="!post.async.tags" style="display:flex;padding-left:0;margin-bottom:0;">
28 |             <li v-for="(tag, index) in post.tags ?? []"
29 |                 style="margin-right:var(--nav-element-spacing-horizontal);list-style:none;">
30 |                 <kbd><a :href="tag.url" style="color:var(--code-kbd-color);">{{ tag.desc }}</a></kbd>
31 |             </li>
32 |         </ul>
33 |     </article>
34 | </template>
35 | <script>
36 |     function Posts() {
37 |         return {
38 |             $template: '#blogure-posts',
39 |         }
40 |     }
41 | </script>


--------------------------------------------------------------------------------
/page_end/page.js:
--------------------------------------------------------------------------------
 1 | // page 分页
 2 | // page = {
 3 | //     "pages": [
 4 | //         { "desc": "1", "url": "" }, // 当前页
 5 | //         { "desc": "2", "url": "https://www.cnblogs.com/blogure/?page=2" }, // 其他页
 6 | //         { "desc": "下一页", "url": "https://www.cnblogs.com/blogure/?page=2" }
 7 | //     ],
 8 | //     "async": {
 9 | //         "pages": true // 分页异步标志
10 | //     }
11 | // }
12 | 
13 | function LoadPage() {
14 |     const vm = window.vm
15 |     const page = (vm.page = {})
16 |     const originBody = vm.metadata
17 |     page.pages = []
18 |     page.async = {}
19 |     if (!((originBody.querySelector('.Pager, .pager') || originBody.querySelector('#nav_next_page a')))) {
20 |         return page
21 |     }
22 |     const pagerdom = originBody.querySelector('.Pager') ? originBody.querySelector('.Pager') : originBody.querySelector('.pager')
23 |     if (pagerdom) {
24 |         const pagenodes = pagerdom.childNodes
25 |         for (let index = 0; index < pagenodes.length; index++) {
26 |             const pagenode = pagenodes[index]
27 |             if (pagenode.textContent.trim() == '') continue
28 |             const p = {}
29 |             p.desc = pagenode.textContent.trim()
30 |             p.url = pagenode.href ? pagenode.href.trim() : ''
31 |             page.pages.push(p)
32 |         }
33 |         return page
34 |     }
35 |     page.async.pages = false
36 |     Get(originBody.querySelector('#nav_next_page a').href.trim()).then(((page) => {
37 |         return (r) => {
38 |             const tempdom = document.createElement('html')
39 |             tempdom.innerHTML = r.responseText
40 |             const pagenodes = tempdom.querySelector('.Pager, .pager').childNodes
41 |             for (let index = 0; index < pagenodes.length; index++) {
42 |                 const pagenode = pagenodes[index]
43 |                 if (pagenode.textContent.trim() == '') continue
44 |                 const p = {}
45 |                 p.desc = pagenode.textContent.trim()
46 |                 p.url = pagenode.href ? pagenode.href.trim() : ''
47 |                 page.pages.push(p)
48 |             }
49 |             page.pages.shift() // const('上一页')
50 |             if (page.pages.length == 2) page.pages.push({ 'desc': '下一页', url: r.responseURL })
51 |             [page.pages[0], page.pages[1]] = [page.pages[1], page.pages[2]]
52 |             page.pages[0].desc = '1'
53 |             page.pages[0].url = ''
54 |             page.pages[1].desc = '2'
55 |             page.pages[1].url = r.responseURL
56 |             page.async.pages = true
57 |         }
58 |     })(vm.page))
59 | }


--------------------------------------------------------------------------------
/page_begin/post.html:
--------------------------------------------------------------------------------
 1 | <!-- post -->
 2 | <template id="blogure-post">
 3 |     <!-- 阅读进度 -->
 4 |     <progress :value="vm.post.process.val" :max="vm.post.process.max"
 5 |         style="position: fixed;top: 0;left: 0;border-radius: 0;z-index: 1;"></progress>
 6 |     <!-- 标题 -->
 7 |     <h2
 8 |         style="position:relative;top:calc(var(--block-spacing-horizontal)*-3);height:var(--block-spacing-horizontal);margin-bottom:0;text-align:center;">
 9 |         <kbd style="box-shadow:var(--card-box-shadow);">
10 |             <a :href="vm.post.url" style="text-align:center;color:var(--code-kbd-color);">{{ vm.post.title }}</a>
11 |         </kbd>
12 |     </h2>
13 |     <!-- 发布时间 观看人数 评论数 -->
14 |     <div style="opacity:50%;text-align:center;">
15 |         📅 {{vm.post.desc.date}}
16 |         👁️ {{vm.post.desc.viewCount}}
17 |         💬 {{vm.post.desc.commentCount}}
18 |     </div>
19 |     <div v-html="vm.post.content" v-effect="markdown_highlight('.article');mermaidRender.render();"></div>
20 |     <!-- 标签 -->
21 |     <ul :aria-busy="!(vm.post.async.tags ?? true)" style="display:flex;padding-left:0;margin-bottom:0;">
22 |         <li v-for="(tag, index) in vm.post.tags ?? []"
23 |             style="margin-right:var(--nav-element-spacing-horizontal);list-style:none;">
24 |             <kbd><a :href="tag.url" style="color:var(--code-kbd-color);">{{ tag.desc }}</a></kbd>
25 |         </li>
26 |     </ul>
27 |     <!-- 评论框 -->
28 |     <template v-if="!((vm.post.async.commentForm ?? true) && (vm.mention ?? true))">
29 |         <div aria-busy="true"></div>
30 |     </template>
31 |     <template v-if="(vm.post.async.commentForm ?? true) && (vm.mention ?? true) && (vm.logined ?? false)">
32 |         <div v-html="vm.post.commentForm ?? ''"
33 |             v-effect="window.commentEditor=initCommentEditor('tbCommentBody');commentManager.renderComments(0);">
34 |         </div>
35 |     </template>
36 |     <!-- 评论 -->
37 |     <template v-if="(vm.logined ?? false)">
38 |         <ul :aria-busy="!(vm.post.async.comments ?? true)" style="padding:0;">
39 |             <li v-for="(comment, index) in vm.post.comments ?? []" style="list-style:none;display:flex;width:100%;">
40 |                 <div>
41 |                     <img :src="comment.user.avatar" :alt="comment.user.avatar"
42 |                         style="border-radius:50%;margin-right:var(--spacing);">
43 |                 </div>
44 |                 <div style="flex-grow:1;">
45 |                     <div v-html="comment.user.info ?? ''"></div>
46 |                     <div v-html="comment.content ?? ''"></div>
47 |                 </div>
48 |                 <div style="display:flex;flex-direction:column;white-space:nowrap;" v-html="comment.actions ?? ''">
49 |                 </div>
50 |             </li>
51 |         </ul>
52 |     </template>
53 |     <template v-if="!(vm.logined ?? false)">
54 |         <div>登录后才能查看或发表评论, 立即 <a rel="nofollow" href="javascript:void(0);" class="underline"
55 |                 onclick="return account.login('!comments');">登录</a></div>
56 |     </template>
57 | </template>
58 | <script>
59 |     function Post() {
60 |         return {
61 |             $template: '#blogure-post',
62 |         }
63 |     }
64 | </script>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # cnblogs-theme-blogure
 2 | 
 3 | > cnblogs-theme-blogure - 又一个博客园主题，它使用 *PetiteVue* 和 *PicoCSS*。
 4 | 
 5 | 喜欢的话可以帮个点[⭐Star](https://github.com/zidft/cnblogs-theme-blogure)，万分感谢。
 6 | 
 7 | ## 🚀 快速开始
 8 | 
 9 | > 确保博客园有JS权限，没有可以申请[博客园 JS 权限](https://i.cnblogs.com/settings)
10 | 
11 | 1. 基本设置 -> 博客皮肤 -> SimpleMemory
12 | 1. 代码高亮 -> prismjs[完全支持]
13 | 1. 页面定制 CSS 代码 -> ☑️禁用模板默认CSS -> [source](https://github.com/zidft/cnblogs-theme-blogure/releases/download/v0.0.8/custom.css)
14 | 1. 页首 HTML 代码 -> [source](https://github.com/zidft/cnblogs-theme-blogure/releases/download/v0.0.8/page_begin.html)
15 | 1. 页脚 HTML 代码 -> [source](https://github.com/zidft/cnblogs-theme-blogure/releases/download/v0.0.8/page_end.html)
16 | 
17 | <span class="more"></span>
18 | 
19 | <div style="text-align:center">
20 | <img src="https://img2023.cnblogs.com/blog/2555898/202301/2555898-20230125091544737-873550203.png" style="zoom:50%">
21 | </div>
22 | 
23 | ## ✨ 功能特性
24 | 
25 | ### 正文预览
26 | 
27 | 没有预览的摘要将变得难以理解，像下面这样。
28 | 
29 | <img src="https://camo.githubusercontent.com/9a9abef741d354c2d145e05e16698c66eb2450c512d6a5f67967ef02ec78f07f/68747470733a2f2f696d67323032332e636e626c6f67732e636f6d2f626c6f672f323535353839382f3230323330312f323535353839382d32303233303132353039313534343733372d3837333535303230332e706e67" style="zoom:50%">
30 | 
31 | Blogure支持将正文的一部分作为摘要展示在首页。
32 | 
33 | <img src="https://camo.githubusercontent.com/55031a35b55972cfc15c5f709a76ba62f830983683372f4bfdb7b0ec52ecce89/68747470733a2f2f696d67323032332e636e626c6f67732e636f6d2f626c6f672f323535353839382f3230323330312f323535353839382d32303233303132353038353832333732352d35383030373939382e706e67" style="zoom:50%">
34 | 
35 | 使用它很简单，使用HTML元素`<* class="more"></*>`作为摘要，推荐使用单标签`<br class="more">`。
36 | 
37 | <img src="https://camo.githubusercontent.com/e313f24138ff4e895c99e7c9d0bf6b342545f6317bae1f3158b64004fc0bb325/68747470733a2f2f696d67323032332e636e626c6f67732e636f6d2f626c6f672f323535353839382f3230323330312f323535353839382d32303233303132353039303734383231372d3733313037323233322e706e67" style="zoom:50%">
38 | 
39 | ### 暗黑模式
40 | 
41 | 基于picocss，很方便可以调整主题风格为暗黑模式。
42 | 
43 | <img src="https://camo.githubusercontent.com/709f00f3a6d6c16069e3050d4bb5f559f0845228cbe26dffb746f6cf89974398/68747470733a2f2f696d67323032332e636e626c6f67732e636f6d2f626c6f672f323535353839382f3230323330312f323535353839382d32303233303132353039313135333836382d313539353635323636352e706e67" style="zoom:50%">
44 | 
45 | ### 实时目录 | 阅读进度
46 | 
47 | 基于 tocbot，很方便可以实时定位文章的目录，同时对文章页面加入了顶部实时进度。
48 | 
49 | <img src="https://camo.githubusercontent.com/b511cec2e03d6eff46f0ce1d4746d83e46debae0e348ee99127e94d5e9c8f571/68747470733a2f2f696d67323032332e636e626c6f67732e636f6d2f626c6f672f323535353839382f3230323330312f323535353839382d32303233303132353039313334373332352d313031343434393330332e706e67" style="zoom:50%">
50 | 
51 | ### 代码高亮
52 | 
53 | 博客园原生高亮`prismjs`支持。
54 | 
55 | <img src="https://camo.githubusercontent.com/832aadf63b65fc9af25b4721185b5d75b695bacb00381480c1abce0beab3ef42/68747470733a2f2f696d67323032332e636e626c6f67732e636f6d2f626c6f672f323535353839382f3230323330312f323535353839382d32303233303132353039313435313330342d313133353136313937322e706e67" style="zoom:50%">
56 | 
57 | ## 📦 项目依赖
58 | 
59 | + [PetiteVue ~6kb](https://github.com/vuejs/petite-vue)
60 | + [PicoCSS ~30kb](https://picocss.com/)
61 | 
62 | ## 🔨 构建流程
63 | 
64 | ### Linux
65 | 
66 | ```sh
67 | bash .merge
68 | ```
69 | 
70 | ### Windows
71 | 
72 | 自行`wsl`，按照`Linux`操作。
73 | 
74 | ## 🎹 参与共建 | 二次开发
75 | 
76 | 参与共建，可以在[github-issues](https://github.com/zidft/cnblogs-theme-blogure/issues)中找到`help wanted`标签，发起[PR](https://github.com/zidft/cnblogs-theme-blogure/compare)。
77 | 
78 | 自行[fork](https://github.com/zidft/cnblogs-theme-blogure/fork)。
79 | 
80 | ## 📝 反馈
81 | 
82 | 通过[github-issues](https://github.com/zidft/cnblogs-theme-blogure/issues)。
83 | 


--------------------------------------------------------------------------------
/layout_end.html:
--------------------------------------------------------------------------------
  1 | <script onload="vmLoaded(this)" src="https://blog-static.cnblogs.com/files/blogs/707675/petite-vue@0.4.1.js"
  2 |     defer></script>
  3 | <script onload="tocbotLoaded(this)" src="https://blog-static.cnblogs.com/files/blogs/707675/tocbot@4.11.1.js"
  4 |     defer></script>
  5 | <script onload="window.vm.mention = true" src="https://mention.cnblogs.com/bundles/mention.min.js" defer></script>
  6 | 
  7 | <script>
  8 |     // vm 响应式容器
  9 |     // vm = {
 10 |     //     "metadata": htmldom, // 原始页面dom
 11 |     //     "theme": "light", // 主题
 12 |     //     "logined": true, // 登录标志
 13 |     //     "enableCodeLine": false, // 代码行号标志
 14 |     //     "header": object, // 头部数据 
 15 |     //     "layout": "posts | post", // 文章布局
 16 |     //     "post": object, // 文章列表
 17 |     //     "posts": [object], // 文章列表
 18 |     //     "page": object, // 分页数据
 19 |     //     "mention": true // mention标志
 20 |     // }
 21 | 
 22 |     // vmLoaded 主题入口 https://github.com/vuejs/petite-vue
 23 |     function vmLoaded(dom) {
 24 |         if (!(!dom.readyState || dom.readyState === 'loaded' || dom.readyState === 'complete')) return
 25 |         // 创建 vm 对象
 26 |         const vm = (window.vm = PetiteVue.reactive({}))
 27 |         // 页面原始数据 
 28 |         vm.metadata = document.createElement('html')
 29 |         vm.metadata.innerHTML = document.body.innerHTML
 30 |         // 页面样式删除
 31 |         document.body.classList.remove('skin-simplememory')
 32 |         document.body.classList.remove('has-navbar')
 33 |         document.body.classList.remove('mathjax2')
 34 |         document.body.classList.remove('no-navbar')
 35 |         // 原始数据替换为主题页面并设置可见
 36 |         document.body.innerHTML = vm.metadata.querySelector('#page_begin_html').innerHTML
 37 |         document.body.style.visibility = 'visible'
 38 |         // token用于评论
 39 |         const tokendom = vm.metadata.querySelector('#antiforgery_token')
 40 |         document.body.appendChild(tokendom)
 41 |         // 设置数据
 42 |         vm.theme = localStorage.getItem('data-theme') ?? 'light'
 43 |         // 博客园数据
 44 |         vm.logined = isLogined
 45 |         vm.enableCodeLine = enableCodeLineNumber
 46 |         // 页面结构数据
 47 |         LoadHeader()
 48 |         LoadMain()
 49 | 
 50 |         PetiteVue.createApp({ vm, Header, Main, Post, Posts, Footer, Page }).mount()
 51 |     }
 52 | 
 53 |     // tocbotLoaded https://tscanlin.github.io/tocbot/
 54 |     function tocbotLoaded(dom) {
 55 |         if (!(!dom.readyState || dom.readyState === 'loaded' || dom.readyState === 'complete')) return
 56 |         tocbot.init({
 57 |             tocSelector: '#toc',
 58 |             contentSelector: '.article',
 59 |             headingSelector: 'h1, h2, h3',
 60 |             hasInnerContainers: true,
 61 |         })
 62 |     }
 63 | 
 64 |     // reset 替换假桩 执行v-effect需要主动调用
 65 |     function reset() {
 66 |         [markdown_highlight, markdown_highlight_swap] = [markdown_highlight_swap, markdown_highlight]
 67 |     }
 68 |     reset()
 69 | 
 70 |     // initDataTheme 主题初始化
 71 |     function initDataTheme() {
 72 |         if (window.localStorage && localStorage.getItem('data-theme')) document.querySelector('html').setAttribute('data-theme', localStorage.getItem('data-theme'))
 73 |         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
 74 |             if (event.matches) document.querySelector('#dark-switch').checked = true
 75 |             else document.querySelector('#dark-switch').checked = false
 76 |             darkSwitcher(document.querySelector('#dark-switch'))
 77 |         })
 78 |     }
 79 |     initDataTheme()
 80 | 
 81 |     // darkSwitcherWithStorage 亮色暗色状态存储到WindowLocalStorage
 82 |     function darkSwitcherWithStorage(dom) {
 83 |         if (!window.localStorage) return
 84 |         if (dom.checked) localStorage.setItem('data-theme', 'dark')
 85 |         if (!dom.checked) localStorage.setItem('data-theme', 'light')
 86 |     }
 87 | 
 88 |     // darkSwitcher 更改的亮色暗色状态
 89 |     function darkSwitcher(dom) {
 90 |         darkSwitcherWithStorage(dom)
 91 |         if (dom.checked) document.querySelector('html').setAttribute('data-theme', 'dark')
 92 |         if (!dom.checked) document.querySelector('html').setAttribute('data-theme', 'light')
 93 |         window.vm.theme = document.querySelector('html').getAttribute('data-theme')
 94 |     }
 95 | 
 96 |     // highlightNumber 行号渲染
 97 |     function highlightNumber(dom) {
 98 |         if (!vm.enableCodeLine) return
 99 |         dom.querySelectorAll('pre code').forEach(codedom => {
100 |             codedom.parentElement.classList.add('line-numbers', 'keep-initial-line-feed')
101 |         })
102 |     }
103 | 
104 |     // Get 包裹promise的原生xhr
105 |     function Get(url) {
106 |         console.debug(url)
107 |         const xhr = new XMLHttpRequest()
108 |         xhr.open('GET', url, true)
109 |         xhr.send()
110 |         return new Promise(r => {
111 |             xhr.onreadystatechange = _ => {
112 |                 if (xhr.readyState !== 4) return
113 |                 r(xhr)
114 |             }
115 |         })
116 |     }
117 | </script>


--------------------------------------------------------------------------------
/page_end/post.js:
--------------------------------------------------------------------------------
  1 | // comment 评论
  2 | // comment = {
  3 | //     "actions": "...修改 删除 回复", // 评论行为dom
  4 | //     "user": {
  5 | //         "info": "...#1楼 [楼主] 2022-09-17 08:53 blogure", // 用户信息dom
  6 | //         "avatar": "https://pic.cnblogs.com/face/2555898/20230117114245.png" // 头像url
  7 | //     },
  8 | //     "content": "...这里可以一起讨论主题哦!" // 评论内容dom
  9 | // }
 10 | 
 11 | // comments 评论数组
 12 | 
 13 | // tag 标签
 14 | // tag = {
 15 | //     "desc": "主题", // 标签文字
 16 | //     "url": "https://www.cnblogs.com/blogure/tag/%E4%B8%BB%E9%A2%98/" // 标签url
 17 | // }
 18 | 
 19 | // tags 标签数组
 20 | 
 21 | // post 文章
 22 | // post = {
 23 | //     "async": {
 24 | //         "tags": true, // 标签异步标志
 25 | //         "comments": true, // 评论异步标志 
 26 | //         "commentForm": true, // 评论框异步标志
 27 | //     },
 28 | //     "url": "https://www.cnblogs.com/blogure/p/cnblogs-theme-blogure.html", // 文章url
 29 | //     "title": "博客园 Blogure 主题 🎨", // 文章标题
 30 | //     "content": "...又一个博客园主题", // 文章内容
 31 | //     "preview": "...又一个博客园主题", // 文章预览
 32 | //     "desc": {
 33 | //         "date": "2021-09-29 09:30", // 发布时间
 34 | //         "viewCount": "494", // 浏览量
 35 | //         "commentCount": "6" // 评论数
 36 | //     },
 37 | //     "postid": "15322331", // 文章id
 38 | //     "comments": [object], // 评论数组
 39 | //     "process": {
 40 | //         "val": 6350, // 当前阅读进度
 41 | //         "max": 6809, // 最大阅读进度
 42 | //     },
 43 | //     "commentForm": "...", // 评论框dom
 44 | //     "tags": [object], // 标签数组
 45 | // }
 46 | 
 47 | // LoadReadProcess 进度条初始化与事件监听
 48 | function LoadReadProcess() {
 49 |     const vm = window.vm
 50 |     vm.post.process = { val: window.scrollY, max: document.documentElement.scrollHeight - window.innerHeight }
 51 |     document.addEventListener('scroll', () => {
 52 |         vm.post.process.max = document.documentElement.scrollHeight - window.innerHeight
 53 |         vm.post.process.val = window.scrollY
 54 |     })
 55 | }
 56 | 
 57 | // LoadComments 评论变动事件监听, 触发重新渲染
 58 | function LoadComments() {
 59 |     $(document).ajaxComplete((_e, _x, settings) => {
 60 |         if (settings.url.indexOf('PostComment/Add.aspx') < 0 && settings.url.indexOf('PostComment/Update.aspx') < 0 && settings.url.indexOf('comment/DeleteComment.aspx') < 0) return
 61 |         window.vm.post.async.comments = false
 62 |         Get(getAjaxBaseUrl() + `GetComments.aspx?postId=${cb_entryId}&pageIndex=0`).then((r) => {
 63 |             comments = []
 64 |             const tempdom = document.createElement('div')
 65 |             tempdom.innerHTML = r.responseText.trim()
 66 |             const commentsdoms = tempdom.querySelectorAll('.feedbackItem')
 67 |             for (let index = 0; index < commentsdoms.length; index++) {
 68 |                 const commentdom = commentsdoms[index]
 69 |                 const comment = {}
 70 |                 comment.actions = commentdom.querySelector('.comment_actions').innerHTML
 71 |                 commentdom.querySelector('.comment_actions').innerHTML = ''
 72 |                 commentdom.querySelector('.feedbackManage').style.display = 'none'
 73 |                 const userdom = commentdom.querySelector('.feedbackListSubtitle')
 74 |                 comment.user = { info: userdom.innerHTML.trim() }
 75 |                 comment.content = commentdom.querySelectorAll('.feedbackCon div')[0].innerHTML.trim()
 76 |                 const spandoms = commentdom.querySelectorAll('.feedbackCon span')
 77 |                 const avatardom = spandoms[spandoms.length - 1]
 78 |                 comment.user.avatar = avatardom.innerText.trim()
 79 |                 comments.push(comment)
 80 |             }
 81 |             window.vm.post.comments = comments
 82 |             window.vm.post.async.comments = true
 83 |         })
 84 |     })
 85 | }
 86 | 
 87 | // tocSwitcher 控制目录打开和关闭
 88 | function tocSwitcher(dom) {
 89 |     if (dom.checked) {
 90 |         document.querySelector('#toc').style.transform = 'translate(0)'
 91 |         document.querySelector('#toc').style.boxShadow = 'var(--card-box-shadow)'
 92 |     }
 93 |     if (!dom.checked) {
 94 |         document.querySelector('#toc').style.transform = 'translate(calc(var(--spacing)*15))'
 95 |         document.querySelector('#toc').style.boxShadow = ''
 96 |     }
 97 | }
 98 | 
 99 | // LoadPost 文章初始化
100 | function LoadPost() {
101 |     // 设置页面布局与初始化文章
102 |     const vm = window.vm
103 |     vm.layout = 'post'
104 |     vm.post = { async: {} }
105 |     // fill
106 |     FillPost(vm.post, vm.metadata)
107 |     if (!vm.logined) return
108 |     // 评论列表
109 |     vm.post.async.comments = false
110 |     vm.post.comments = []
111 |     Get(getAjaxBaseUrl() + `GetComments.aspx?postId=${cb_entryId}&pageIndex=0`).then(((post) => {
112 |         return (r) => {
113 |             const tempdom = document.createElement('div')
114 |             tempdom.innerHTML = r.responseText.trim()
115 |             const commentsdoms = tempdom.querySelectorAll('.feedbackItem')
116 |             for (let index = 0; index < commentsdoms.length; index++) {
117 |                 const commentdom = commentsdoms[index]
118 |                 const comment = {}
119 |                 comment.actions = commentdom.querySelector('.comment_actions').innerHTML
120 |                 commentdom.querySelector('.comment_actions').innerHTML = ''
121 |                 commentdom.querySelector('.feedbackManage').style.display = 'none'
122 |                 const userdom = commentdom.querySelector('.feedbackListSubtitle')
123 |                 comment.user = { info: userdom.innerHTML.trim() }
124 |                 comment.content = commentdom.querySelectorAll('.feedbackCon div')[0].innerHTML.trim()
125 |                 const spandoms = commentdom.querySelectorAll('.feedbackCon span')
126 |                 const avatardom = spandoms[spandoms.length - 1]
127 |                 comment.user.avatar = avatardom.innerText.trim()
128 |                 post.comments.push(comment)
129 |             }
130 |             post.async.comments = true
131 |         }
132 |     })(vm.post))
133 |     // 评论框
134 |     vm.post.async.commentForm = false
135 |     Get(getAjaxBaseUrl() + `CommentForm.aspx?postId=${cb_entryId}`).then(((post) => {
136 |         return (r) => {
137 |             const tempdom = document.createElement('div')
138 |             tempdom.innerHTML = r.responseText.trim()
139 |             tempdom.querySelector('.commentbox_main').style.width = '100%'
140 |             tempdom.querySelector('#tbCommentBody').style.maxWidth = '100%'
141 |             tempdom.querySelector('#tbCommentBody').style.minWidth = '100%'
142 |             tempdom.querySelector('#commentform_title').style.padding = '0'
143 |             tempdom.querySelector('#commentform_title').style.backgroundImage = 'none'
144 | 
145 |             post.commentForm = ''
146 |             for (let index = 0; index < tempdom.children.length; index++) {
147 |                 const formdom = tempdom.children[index]
148 |                 if (formdom.tagName !== 'SCRIPT') post.commentForm += formdom.outerHTML
149 |             }
150 |             post.async.commentForm = true
151 |         }
152 |     })(vm.post))
153 | }
154 | 
155 | // FillPost 文章和文章列表共用逻辑
156 | function FillPost(post, dom) {
157 |     const detaildom = dom.querySelector('#post_detail')
158 |     // title url
159 |     const titledom = detaildom.querySelector('.postTitle a')
160 |     if (!post.url)
161 |         post.url = titledom.href.trim()
162 |     if (!post.title)
163 |         post.title = titledom.innerText.trim()
164 |     // content
165 |     const bodydom = detaildom.querySelector('#cnblogs_post_body')
166 |     highlightNumber(bodydom)
167 |     post.content = bodydom.innerHTML.trim()
168 |     // preview
169 |     if (!bodydom.querySelector('.more')) post.preview = post.content
170 |     else post.preview = ''
171 |     for (let index = 0; index < bodydom.children.length && bodydom.querySelector('.more'); index++) {
172 |         const childdom = bodydom.children[index]
173 |         if (childdom == bodydom.querySelector('.more') || childdom.querySelector('.more')) break
174 |         post.preview += childdom.outerHTML
175 |     }
176 |     // desc
177 |     const descdom = detaildom.querySelector('.postDesc')
178 |     post.desc = {}
179 |     post.desc.date = descdom.querySelector('#post-date').innerText
180 |     post.desc.viewCount = descdom.querySelector('#post_view_count').innerText
181 |     post.desc.commentCount = descdom.querySelector('#post_comment_count').innerText
182 |     // postid
183 |     const bdoms = descdom.querySelectorAll('a')
184 |     bdoms.forEach(e => {
185 |         if (e.innerText === '编辑') post.postid = new URL(e.href).searchParams.get('postid')
186 |     })
187 |     // tags(async)
188 |     if (!post.postid) { post.async.tags = true; return }
189 |     post.async.tags = false
190 |     Get(getAjaxBaseUrl() + `CategoriesTags.aspx?blogId=${currentBlogId}&postId=${post.postid}`).then(((post) => {
191 |         return (r) => {
192 |             const tempdom = document.createElement('div')
193 |             tempdom.innerHTML = r.responseText.trim()
194 |             const tagsdoms = tempdom.querySelectorAll('a')
195 |             const tags = []
196 |             for (let index = 0; index < tagsdoms.length; index++) {
197 |                 const tagdom = tagsdoms[index]
198 |                 const tag = {}
199 |                 tag.desc = tagdom.innerText.trim()
200 |                 tag.url = tagdom.href.trim()
201 |                 tags.push(tag)
202 |             }
203 |             post.tags = tags
204 |             post.async.tags = true
205 |             console.debug(`tags${post.tags} loaded`)
206 |         }
207 |     })(post))
208 |     console.debug(`post${post} loaded`)
209 | }


--------------------------------------------------------------------------------