├── scss ├── components │ ├── _audio.scss │ ├── _widget.scss │ ├── _author.scss │ ├── _footer.scss │ ├── _card.scss │ ├── _relatedPost.scss │ ├── _navigation.scss │ ├── _zoom.scss │ ├── _block.scss │ ├── _header.scss │ └── _comment.scss ├── templates │ ├── _douban.scss │ ├── _archive.scss │ ├── _links.scss │ ├── _map.scss │ ├── _search.scss │ ├── _term.scss │ └── _article.scss ├── base │ ├── _mixins.scss │ ├── _keyframes.scss │ ├── _layout.scss │ ├── _var.scss │ ├── _basic.scss │ ├── _grap.scss │ └── _normalize.scss ├── app.scss ├── utilities │ └── _wp.scss └── setting.scss ├── .github ├── FUNDING.yml └── workflows │ └── main.yml ├── .gitignore ├── languages ├── ja.mo └── zh_CN.mo ├── screenshot.png ├── images ├── default.jpg └── favicon.png ├── .prettierrc.js ├── .postcssrc.js ├── fonts ├── OpenSans-Bold.woff ├── OpenSans-Bold.woff2 ├── OpenSans-Light.woff ├── OpenSans-Light.woff2 ├── OpenSans-Medium.woff ├── OpenSans-Medium.woff2 ├── OpenSans-Regular.woff └── OpenSans-Regular.woff2 ├── .jshintrc ├── .editorconfig ├── style.css ├── template-parts ├── pagination.php ├── author-card.php ├── content-card.php ├── post-navigation.php ├── content-status.php ├── content-archive.php ├── content.php ├── single-related.php └── search-bar.php ├── 404.php ├── taxonomy-post_format-post-format-status.php ├── templates ├── template-douban.php ├── template-links.php ├── template-map.php ├── template-tags.php ├── template-terms.php └── template-archive.php ├── search.php ├── ts ├── modules │ ├── scroll.ts │ ├── comment.ts │ ├── action.ts │ └── zoom.ts ├── setting.ts └── app.ts ├── index.php ├── tag.php ├── package.json ├── category.php ├── category-travel.php ├── author.php ├── archive.php ├── page.php ├── functions.php ├── footer.php ├── README_CN.md ├── comments.php ├── modules ├── update.php ├── article.php ├── scripts.php └── comment.php ├── gulpfile.js ├── README.md ├── header.php └── single.php /scss/components/_audio.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [bigfa] 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | package-lock.json 3 | .DS_Store -------------------------------------------------------------------------------- /languages/ja.mo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/languages/ja.mo -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/screenshot.png -------------------------------------------------------------------------------- /images/default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/images/default.jpg -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/images/favicon.png -------------------------------------------------------------------------------- /languages/zh_CN.mo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/languages/zh_CN.mo -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | semi: true 4 | } -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | }; -------------------------------------------------------------------------------- /fonts/OpenSans-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/fonts/OpenSans-Bold.woff -------------------------------------------------------------------------------- /fonts/OpenSans-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/fonts/OpenSans-Bold.woff2 -------------------------------------------------------------------------------- /fonts/OpenSans-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/fonts/OpenSans-Light.woff -------------------------------------------------------------------------------- /fonts/OpenSans-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/fonts/OpenSans-Light.woff2 -------------------------------------------------------------------------------- /fonts/OpenSans-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/fonts/OpenSans-Medium.woff -------------------------------------------------------------------------------- /fonts/OpenSans-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/fonts/OpenSans-Medium.woff2 -------------------------------------------------------------------------------- /fonts/OpenSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/fonts/OpenSans-Regular.woff -------------------------------------------------------------------------------- /fonts/OpenSans-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bigfa/hera/HEAD/fonts/OpenSans-Regular.woff2 -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "esversion": 9, 3 | "maxerr": 50, 4 | "camelcase": false, 5 | "latedef": false 6 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue,scss,json}] 2 | indent_style = space 3 | indent_size = 4 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Hera 3 | Theme URI: https://github.com/bigfa/hera 4 | Author: bigfa 5 | Author URI: https://github.com/bigfa 6 | Description: theme 2025 7 | Version: 0.3.2 8 | Tags: Minimalism, Responsive 9 | */ 10 | -------------------------------------------------------------------------------- /scss/templates/_douban.scss: -------------------------------------------------------------------------------- 1 | .db--container, 2 | .doulist-item { 3 | --db--text-color: var(--hera-text-color); 4 | --db--text-color-light: var(--hera-text-light); 5 | --db--background-gray: var(--hera-background-gray); 6 | --db-border-color: var(--hera-border-color); 7 | } 8 | -------------------------------------------------------------------------------- /template-parts/pagination.php: -------------------------------------------------------------------------------- 1 | 1, 14 | 'class' => '', 15 | 'prev_next' => false 16 | ) 17 | ); 18 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Bigfa 2 | 3 | on: 4 | push: 5 | branches: 6 | - develop 7 | tags: 8 | - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10 9 | 10 | jobs: 11 | build-deploy: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Notify theme updates 15 | run: | 16 | curl --fail --request GET --header "Authorization: Bearer $SIGN" --url "https://farallon.4398929.workers.dev/update?theme=hera&version=${{ github.ref }}" 17 | env: 18 | SIGN: ${{ secrets.SIGN }} 19 | -------------------------------------------------------------------------------- /scss/components/_widget.scss: -------------------------------------------------------------------------------- 1 | .widget--links { 2 | margin-top: 10px; 3 | padding-bottom: 5px; 4 | 5 | @media (max-width: 720px) { 6 | display: flex; 7 | flex-wrap: nowrap; 8 | margin-top: 0; 9 | padding-bottom: 0px; 10 | } 11 | 12 | .menu-item { 13 | padding: 3px 0; 14 | color: var(--hera-text-light); 15 | 16 | @media (max-width: 720px) { 17 | padding: 5px 8px; 18 | font-size: 12px; 19 | } 20 | 21 | &:hover { 22 | color: var(--hera-text-color); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /404.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 |
15 |

404

16 |
17 |
18 |

19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /scss/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin sns-icons { 2 | a { 3 | margin: 0 0 0 12px; 4 | display: flex; 5 | 6 | &:first-child { 7 | margin-left: 0; 8 | } 9 | } 10 | 11 | svg { 12 | fill: var(--hera-text-color); 13 | width: 20px; 14 | height: 20px; 15 | 16 | &:hover { 17 | fill: var(--hera-hover-color); 18 | } 19 | 20 | &.sns { 21 | fill: none; 22 | stroke: var(--hera-text-color); 23 | 24 | &:hover { 25 | stroke: var(--hera-hover-color); 26 | fill: none; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /taxonomy-post_format-post-format-status.php: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 | 16 |
17 | 20 |
21 | 23 |
24 | -------------------------------------------------------------------------------- /template-parts/author-card.php: -------------------------------------------------------------------------------- 1 | 11 |
12 | 13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 |
21 |
-------------------------------------------------------------------------------- /scss/base/_keyframes.scss: -------------------------------------------------------------------------------- 1 | @keyframes fadeOut-headings { 2 | 0% { 3 | background: var(--block-separator-color); 4 | box-shadow: 0 0 0 7px var(--block-separator-color); 5 | } 6 | 100% { 7 | background: var(--article-target-color); 8 | box-shadow: 0 0 0 7px var(--article-target-color); 9 | } 10 | } 11 | 12 | @keyframes comment--fresh { 13 | 0% { 14 | background-color: var(--hera-comment-fresh-start-color); 15 | } 16 | 17 | 100% { 18 | background-color: var(--hera-comment-fresh-end-color); 19 | } 20 | } 21 | 22 | @keyframes toTop { 23 | 0% { 24 | transform: translateY(0); 25 | } 26 | 27 | 100% { 28 | transform: translateY(-50%); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /templates/template-douban.php: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 11 |
12 |
13 |

14 |
15 |
16 | 17 |
18 |
19 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /templates/template-links.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 17 |
18 |
19 | 20 |
21 |

22 |
23 | 24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /scss/app.scss: -------------------------------------------------------------------------------- 1 | @import 'base/mixins'; 2 | @import 'base/var'; 3 | @import 'base/grap'; 4 | @import 'base/normalize'; 5 | @import 'base/basic'; 6 | @import 'base/layout'; 7 | @import 'base/keyframes'; 8 | 9 | @import 'components/zoom'; 10 | @import 'components/comment'; 11 | @import 'components/footer'; 12 | @import 'components/block'; 13 | @import 'components/card'; 14 | @import 'components/navigation'; 15 | @import 'components/author'; 16 | @import 'components/audio'; 17 | @import 'components/relatedPost'; 18 | @import 'components/widget'; 19 | 20 | @import 'templates/map'; 21 | @import 'templates/term'; 22 | @import 'templates/links'; 23 | @import 'templates/article'; 24 | @import 'templates/search'; 25 | @import 'templates/archive'; 26 | @import 'templates/douban'; 27 | 28 | @import 'utilities/wp'; 29 | @import 'components/header'; 30 | -------------------------------------------------------------------------------- /search.php: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 |
16 |
17 | 18 |
19 | 22 |
23 | 25 |
26 | -------------------------------------------------------------------------------- /templates/template-map.php: -------------------------------------------------------------------------------- 1 | 6 |
7 | 9 |
10 |
11 |

12 |
13 |
14 | 15 |
16 |
17 | 19 |
20 | 21 |
22 |
23 | -------------------------------------------------------------------------------- /ts/modules/scroll.ts: -------------------------------------------------------------------------------- 1 | class heraScroll { 2 | is_single: boolean = false; 3 | constructor() { 4 | //@ts-ignore 5 | this.is_single = obvInit.is_single; 6 | 7 | if (document.querySelector('.hBackTop')) { 8 | const backToTop = document.querySelector('.hBackTop') as HTMLElement; 9 | window.addEventListener('scroll', () => { 10 | const t = window.scrollY || window.pageYOffset; 11 | 12 | t > 200 13 | ? backToTop!.classList.add('is-active') 14 | : backToTop!.classList.remove('is-active'); 15 | }); 16 | 17 | backToTop.addEventListener('click', () => { 18 | window.scrollTo({ top: 0, behavior: 'smooth' }); 19 | }); 20 | } 21 | } 22 | } 23 | 24 | new heraScroll(); 25 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 18 | 19 |
20 | 21 |
22 | 25 |
26 | 28 |
29 | -------------------------------------------------------------------------------- /tag.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 |
17 |
18 |
19 |

20 | ', '
'); ?> 21 |
22 | 23 | 24 |
25 | 28 |
29 | 31 | 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hera", 3 | "version": "0.3.0", 4 | "description": "", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\"" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/core": "^7.5.5", 13 | "@babel/preset-env": "^7.5.5", 14 | "autoprefixer": "^9.6.1", 15 | "del": "^5.1.0", 16 | "gulp": "^4.0.2", 17 | "gulp-babel": "^8.0.0", 18 | "gulp-browserify": "^0.5.1", 19 | "gulp-concat": "^2.6.1", 20 | "gulp-cssnano": "^2.1.3", 21 | "gulp-eslint": "^6.0.0", 22 | "gulp-plumber": "^1.2.1", 23 | "gulp-postcss": "^9.0.1", 24 | "gulp-rename": "^1.4.0", 25 | "gulp-typescript": "^6.0.0-alpha.1", 26 | "gulp-uglify": "^3.0.2", 27 | "husky": "^9.0.11", 28 | "normalize.scss": "^0.1.0", 29 | "sass": "^1.49.9", 30 | "typescript": "^4.7.4" 31 | }, 32 | "dependencies": { 33 | "gulp-sass": "^5.1.0", 34 | "postcss": "^8.4.23", 35 | "postcss-pxtorem": "^6.0.0" 36 | }, 37 | "volta": { 38 | "node": "18.0.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /category.php: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |
16 | 17 | <?php single_term_title('', true); ?> 18 | 19 |
20 |

21 | ', '
'); ?> 22 |
23 | 24 | 25 |
26 | 29 |
30 | 32 | 33 | -------------------------------------------------------------------------------- /category-travel.php: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 |
16 |
17 | 18 | <?php single_term_title('', true); ?> 19 | 20 |
21 |

22 | ', '
'); ?> 23 |
24 | 25 | 26 |
27 | 30 |
31 | 33 | 34 | -------------------------------------------------------------------------------- /scss/components/_author.scss: -------------------------------------------------------------------------------- 1 | .hAuthor { 2 | &--card { 3 | display: flex; 4 | align-items: center; 5 | padding: 30px 0; 6 | border-top: 1px solid var(--hera-border-color); 7 | margin-top: 20px; 8 | 9 | --hera-author-avatar-size: 64px; 10 | --hera-author-name-font-size: 20px; 11 | --hera-author-description-font-size: 14px; 12 | 13 | .avatar { 14 | border-radius: 100%; 15 | margin-right: 20px; 16 | width: var(--hera-author-avatar-size); 17 | height: var(--hera-author-avatar-size); 18 | } 19 | 20 | @media screen and (max-width: 768px) { 21 | --hera-author-avatar-size: 48px; 22 | --hera-author-name-font-size: 16px; 23 | --hera-author-description-font-size: 12px; 24 | 25 | .avatar { 26 | margin-right: 10px; 27 | } 28 | } 29 | } 30 | 31 | & + .hComment--area { 32 | .hComment--title { 33 | padding-top: 5px; 34 | } 35 | } 36 | 37 | &--name { 38 | font-weight: 900; 39 | font-size: var(--hera-author-name-font-size); 40 | } 41 | 42 | &--description { 43 | font-size: var(--hera-author-description-font-size); 44 | color: var(--hera-text-gray); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /author.php: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 |
16 | 17 | 18 |
19 |
20 | 21 |
22 |
23 |

24 |

25 |
26 |
27 | 28 | 29 | 30 | 31 |
32 | 35 |
36 | 38 |
39 | -------------------------------------------------------------------------------- /archive.php: -------------------------------------------------------------------------------- 1 | 19 | 20 | 21 |
22 |
23 |
24 |

25 | ', '
'); ?> 26 |
27 | 28 | 29 |
30 | 33 |
34 | 36 | 37 | -------------------------------------------------------------------------------- /scss/templates/_archive.scss: -------------------------------------------------------------------------------- 1 | .archive { 2 | &--list { 3 | display: grid; 4 | grid-template-columns: repeat(2, 1fr); 5 | grid-gap: 15px; 6 | margin-bottom: 30px; 7 | margin-top: 10px; 8 | } 9 | 10 | &--title { 11 | font-size: 16px; 12 | line-height: 1.4; 13 | height: 2.8em; 14 | overflow: hidden; 15 | text-overflow: ellipsis; 16 | display: -webkit-box; 17 | 18 | &__year { 19 | font-size: 22px; 20 | font-weight: 900; 21 | margin-top: 30px; 22 | } 23 | } 24 | 25 | &--meta { 26 | font-size: 12px; 27 | color: var(--hera-text-gray); 28 | margin-top: 5px; 29 | line-height: 1; 30 | display: flex; 31 | align-items: center; 32 | } 33 | 34 | &--item { 35 | padding: 15px; 36 | background-color: var(--hera-background-gray-lightest); 37 | border-radius: 10px; 38 | a { 39 | &:hover { 40 | color: var(--hera-main-color); 41 | } 42 | } 43 | } 44 | } 45 | 46 | @media screen and (max-width: 768px) { 47 | .archive { 48 | &--list { 49 | grid-gap: 10px; 50 | margin-bottom: 25px; 51 | } 52 | 53 | &--title { 54 | font-size: 14px; 55 | } 56 | 57 | &--item { 58 | padding: 10px; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /scss/base/_layout.scss: -------------------------------------------------------------------------------- 1 | .layout { 2 | margin: 0 auto; 3 | display: flex; 4 | 5 | .is-singleColumn &, 6 | .page-template-template-map &, 7 | .page-template-template-wide & { 8 | flex-direction: column; 9 | } 10 | } 11 | 12 | .content { 13 | padding: 30px 0 5px 0; 14 | flex: 1 1 auto; 15 | background-color: var(--hera-background-white); 16 | margin: 18px; 17 | border-radius: 12px; 18 | box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.02); 19 | } 20 | 21 | .post--list { 22 | max-width: var(--hera-column-width); 23 | margin: 0 auto; 24 | width: 92%; 25 | } 26 | 27 | @media (max-width: 720px) { 28 | .layout { 29 | flex-direction: column; 30 | } 31 | 32 | .content { 33 | padding-top: 0; 34 | margin: 0; 35 | border-radius: 0; 36 | } 37 | } 38 | 39 | .layoutContainer { 40 | max-width: var(--hera-column-width); 41 | margin: 0 auto; 42 | } 43 | 44 | .articleContainer { 45 | max-width: var(--hera-article-width); 46 | margin: 0 auto; 47 | width: 92%; 48 | padding-top: 15px; 49 | min-height: calc(100vh - 150px); 50 | .search--area + & { 51 | min-height: calc(100vh - 210px); 52 | } 53 | } 54 | 55 | @media (max-width: 1280px) { 56 | .articleContainer { 57 | padding-top: 0; 58 | } 59 | } 60 | 61 | .doubanContainer { 62 | --hera-article-width: 850px; 63 | max-width: var(--hera-article-width); 64 | margin: 0 auto; 65 | width: 92%; 66 | } 67 | -------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 |
20 | 22 |
23 |
24 |

25 |
26 |
27 | 28 |
29 |
30 | 33 | 35 | get_setting('back2home')) : ?> 36 |
37 | 38 |
39 | 40 |
41 | -------------------------------------------------------------------------------- /templates/template-tags.php: -------------------------------------------------------------------------------- 1 | 6 | 8 |
9 | 10 |
11 |
12 |

13 |
14 |
15 | 'post_tag', 17 | 'hide_empty' => false, 18 | // 'orderby' => 'meta_value_num', 19 | 'order' => 'DESC', 20 | // 'meta_key' => '_views', 21 | ]); 22 | foreach ($categories as $category) { 23 | $link = get_term_link($category, 'post_tag') 24 | ?> 25 | 26 | name; ?>(count; ?>) 27 | 28 | 29 |
30 |
31 | 32 |
33 | 34 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | get('Version')); 25 | define('HERA_SETTING_KEY', 'hera_setting'); 26 | define('HERA_ARCHIVE_VIEW_KEY', 'hera_archive_view'); 27 | define('HERA_POST_VIEW_KEY', 'hera_post_view'); 28 | define('HERA_POST_LIKE_KEY', 'hera_post_like'); 29 | 30 | add_action('after_setup_theme', 'hera_setup'); 31 | function hera_setup() 32 | { 33 | load_theme_textdomain('Hera', get_template_directory() . '/languages'); 34 | } 35 | 36 | get_template_part('modules/setting'); 37 | get_template_part('modules/article'); 38 | get_template_part('modules/base'); 39 | get_template_part('modules/comment'); 40 | get_template_part('modules/scripts'); 41 | get_template_part('modules/update'); 42 | -------------------------------------------------------------------------------- /scss/templates/_links.scss: -------------------------------------------------------------------------------- 1 | .link-items { 2 | display: grid; 3 | grid-template-columns: repeat(3, 1fr); 4 | grid-gap: 20px; 5 | list-style: none; 6 | padding-top: 15px; 7 | padding-bottom: 15px; 8 | 9 | @media screen and (max-width: 768px) { 10 | grid-template-columns: repeat(2, 1fr); 11 | } 12 | } 13 | 14 | .link-item { 15 | border-radius: 10px; 16 | padding: 20px; 17 | background-color: var(--hera-background-gray-lightest); 18 | 19 | .sitename { 20 | font-size: 12px; 21 | color: var(--hera-text-gray); 22 | display: flex; 23 | flex-direction: column; 24 | line-height: 1.5; 25 | 26 | strong { 27 | font-size: 16px; 28 | color: var(--hera-text-color); 29 | margin-bottom: 5px; 30 | } 31 | } 32 | 33 | .avatar { 34 | width: 48px; 35 | height: 48px; 36 | border-radius: 50%; 37 | margin-bottom: 10px; 38 | object-fit: cover; 39 | } 40 | 41 | .btn { 42 | background-color: var(--hera-main-color); 43 | color: #fff; 44 | width: 40px; 45 | text-align: center; 46 | margin-top: 8px; 47 | font-style: normal; 48 | border-radius: 999rem; 49 | padding: 1px 4px; 50 | } 51 | 52 | &:hover { 53 | background-color: var(--hera-background-gray); 54 | } 55 | } 56 | 57 | .link-title { 58 | font-size: 20px; 59 | font-weight: bold; 60 | line-height: 1.2; 61 | margin-top: 30px; 62 | } 63 | 64 | .link-description { 65 | font-size: 14px; 66 | color: var(--hera-text-gray); 67 | } 68 | -------------------------------------------------------------------------------- /footer.php: -------------------------------------------------------------------------------- 1 | 13 | 24 | 25 | get_setting('back2top')) : ?> 26 |
27 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /template-parts/content-card.php: -------------------------------------------------------------------------------- 1 | 11 |
12 | 13 | 16 | 17 |
18 |

19 | 20 |

21 |
22 | 23 | 24 | 25 | post_content))), 0, 90, "..."); 26 | echo $sippnet; 27 | ?> 28 | 29 |
30 |
31 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ', ''); ?> 41 |
42 |
43 |
-------------------------------------------------------------------------------- /scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | .hBackTop { 2 | .svgIcon { 3 | width: 17px; 4 | height: 17px; 5 | fill: var(--hera-main-color); 6 | animation: toTop 1s ease-in infinite alternate; 7 | } 8 | 9 | &:hover { 10 | .svgIcon { 11 | fill: var(--hera-hover-color); 12 | animation-play-state: paused; 13 | } 14 | } 15 | 16 | z-index: 10; 17 | transition: all 0.3s ease; 18 | position: fixed; 19 | bottom: 50px; 20 | right: -25px; 21 | cursor: pointer; 22 | 23 | &.is-active { 24 | right: 50px; 25 | } 26 | } 27 | 28 | .back { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | padding: 20px 0 50px; 33 | 34 | a { 35 | background-color: #000; 36 | color: var(--hera-color-white); 37 | padding: 8px 20px; 38 | font-size: 14px; 39 | border-radius: var(--hera-border-radius); 40 | line-height: 1.4; 41 | } 42 | } 43 | 44 | .hFooter { 45 | text-align: center; 46 | font-size: 14px; 47 | color: var(--hera-text-gray); 48 | padding: 25px 0; 49 | display: flex; 50 | align-items: center; 51 | justify-content: center; 52 | flex-direction: column; 53 | position: relative; 54 | 55 | &--content { 56 | text-align: center; 57 | } 58 | } 59 | 60 | .hThemeSwitcher { 61 | position: absolute; 62 | left: 0px; 63 | bottom: -5px; 64 | display: flex; 65 | height: max-content; 66 | background-color: var(--hera-background-gray-lightest); 67 | border-radius: 0 10px 0 10px; 68 | width: max-content; 69 | padding: 3px; 70 | 71 | span { 72 | width: 28px; 73 | height: 28px; 74 | cursor: pointer; 75 | border-radius: 100%; 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | color: var(--hera-text-gray-lightest); 80 | 81 | &:hover { 82 | color: var(--hera-text-color); 83 | } 84 | 85 | &.is-active { 86 | color: var(--hera-text-color); 87 | background-color: var(--hera-background-gray); 88 | } 89 | 90 | margin-right: 5px; 91 | 92 | &:last-child { 93 | margin-right: 0; 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /templates/template-terms.php: -------------------------------------------------------------------------------- 1 | 6 | 8 |
9 | 10 |
11 |
12 |

13 |
14 |
15 | 'category', 17 | 'hide_empty' => false, 18 | // 'orderby' => 'meta_value_num', 19 | 'order' => 'DESC', 20 | // 'meta_key' => '_views', 21 | ]); 22 | foreach ($categories as $category) { 23 | $link = get_term_link($category, 'category') 24 | ?> 25 | 26 | term_id, '_thumb', true)) : ?> 27 | <?php echo $category->name; ?> 28 | 29 | <?php echo $category->name; ?> 30 | 31 |
32 |
name; ?>
33 |
description; ?>
34 |
35 | 36 | 37 |
38 |
39 | 40 |
41 | 42 | -------------------------------------------------------------------------------- /README_CN.md: -------------------------------------------------------------------------------- 1 | # Hera 2 | 3 | ![](https://static.fatesinger.com/2024/12/2u80bhyxkmru4o9j.png) 4 | 5 | 最新版本 : `0.3.2` 6 | 7 | ## 更新日志 8 | 9 | ### 0.3.2 10 | 11 | - 增加单列布局模式 12 | 13 | ### 0.3.1 14 | 15 | - 增加日语支持 16 | - 移除默认 logo 17 | 18 | ### 0.3.0 19 | 20 | > [!IMPORTANT] 21 | > 类名做了破坏性更新 22 | 23 | - 更新翻译 24 | - 增加了文章阅读模式 25 | - 样式改进 26 | 27 | ### 0.2.6 28 | 29 | - 增加文章阅读时间 30 | - 更新翻译 31 | 32 | ### 0.2.5 33 | 34 | - 样式改进 35 | - 更新翻译 36 | - 使用 php 格式化时间 37 | 38 | ### 0.2.4 39 | 40 | - 增加一些钩子 41 | - 展示文章浏览量 42 | - 更新翻译 43 | 44 | ### 0.2.3 45 | 46 | - 更新图标 47 | - 增加`threads`设置 48 | 49 | ### 0.2.2 50 | 51 | - 增加文章目录 52 | 53 | ### 0.2.1 54 | 55 | - 增加头像代理域名设置 56 | 57 | ### 0.2.0 58 | 59 | - 增加状态归档模版 60 | - 修复文章导航无缩略图问题 61 | 62 | ### 0.1.11 63 | 64 | - 修复分类卡片模版不生效的问题 65 | 66 | ### 0.1.10 67 | 68 | - 增加友情链接图片支持 69 | 70 | ### 0.1.9 71 | 72 | - 修复图片灯箱样式错误的问题 73 | 74 | ### 0.1.8 75 | 76 | - 修复文章图片计数错误 77 | - 增加相册样式 78 | 79 | ### 0.1.7 80 | 81 | - 增加标签模版 82 | - 修复一些样式错误 83 | 84 | ### 0.1.6 85 | 86 | - 修复一些样式错误 87 | 88 | ### 0.1.5 89 | 90 | - 修复一些样式错误 91 | 92 | ### 0.1.4 93 | 94 | - 修复一些样式错误 95 | 96 | ### 0.1.3 97 | 98 | - 修复一些样式错误 99 | 100 | ### 0.1.2 101 | 102 | - 相关文章忽略置顶文章 103 | - 支持暗黑模式 104 | 105 | ### 0.1.1 106 | 107 | - 修复一些样式错误 108 | 109 | ### 0.1.0 110 | 111 | - 更新翻译 112 | - 修复错误 113 | - 增加文章点赞 114 | - 增加分享链接复制 115 | - 增加移动端搜素按钮 116 | - 增加文章浏览量 117 | 118 | ### 0.0.16 119 | 120 | - 增加移动端菜单 121 | 122 | ### 0.0.15 123 | 124 | - 重新设计导航样式 125 | 126 | ### 0.0.14 127 | 128 | - 图片 CDN 支持 129 | - 修复上下文图片描述错误的问题 130 | - 提升响应式支持 131 | - 增加搜索图标 132 | 133 | ### 0.0.13 134 | 135 | - 提升响应式支持 136 | 137 | ### 0.0.12 138 | 139 | - 增加微数据 140 | - 提升响应式支持 141 | - 增加自动更新模块 142 | 143 | ### 0.0.11 144 | 145 | - 修复上下文链接错误的问题 146 | 147 | ### 0.0.10 148 | 149 | - 更新翻译 150 | 151 | ### 0.0.9 152 | 153 | - 增加社会化网络图标链接设置 154 | 155 | ### 0.0.8 156 | 157 | - 更新翻译 158 | 159 | ### 0.0.7 160 | 161 | - 格式化`scss`文件 162 | 163 | ### 0.0.6 164 | 165 | - 修改头部行高 166 | - 移除无效页面 167 | - 增加菜单设置 168 | 169 | ### 0.0.5 170 | 171 | - 增加更多`css`变量 172 | - 修改一些`php`常量 173 | 174 | ### 0.0.4 175 | 176 | - 增加状态文章格式 177 | - 增加搜索页面 178 | - 增加搜索框 179 | - 增加文章制定标识 180 | 181 | ### 0.0.3 182 | 183 | - 增加异步评论提交 184 | 185 | ### 0.0.2 186 | 187 | - 增加相关文章 188 | - 增加友情链接模版 189 | 190 | ### 0.0.1 191 | 192 | - 初始化发布 193 | -------------------------------------------------------------------------------- /scss/components/_card.scss: -------------------------------------------------------------------------------- 1 | .hCard { 2 | &--list { 3 | display: grid; 4 | grid-template-columns: repeat(2, 1fr); 5 | grid-gap: 20px; 6 | padding-bottom: 20px; 7 | padding-top: 20px; 8 | 9 | @media screen and (max-width: 768px) { 10 | grid-template-columns: repeat(1, 1fr); 11 | } 12 | } 13 | 14 | &--item { 15 | border-radius: 12px; 16 | display: flex; 17 | flex-direction: column; 18 | background-color: var(--hera-background-gray); 19 | 20 | &:hover { 21 | background-color: var(--hera-background-gray-lightest); 22 | border-radius: 12px; 23 | transform: none; 24 | transform-origin: 50% 50% 0px; 25 | } 26 | } 27 | 28 | &--content { 29 | position: relative; 30 | padding: 0 20px 20px; 31 | } 32 | 33 | &--title { 34 | font-size: 20px; 35 | font-weight: bold; 36 | line-height: 1.4; 37 | margin-bottom: 5px; 38 | 39 | &:hover { 40 | color: var(--hera-hover-color); 41 | } 42 | 43 | & + .hCard--meta { 44 | margin-top: 10px; 45 | } 46 | } 47 | 48 | &--meta { 49 | font-size: 14px; 50 | color: var(--hera-text-gray-lightest); 51 | display: flex; 52 | align-items: center; 53 | flex-wrap: wrap; 54 | margin-top: 2px; 55 | 56 | time { 57 | display: flex; 58 | align-items: center; 59 | } 60 | 61 | svg { 62 | margin-right: 4px; 63 | fill: var(--hera-text-gray-lightest); 64 | margin-left: 10px; 65 | 66 | &:first-child { 67 | margin-left: 0; 68 | } 69 | } 70 | 71 | a { 72 | &:hover { 73 | text-decoration: underline; 74 | } 75 | } 76 | } 77 | 78 | &--snippet { 79 | font-size: 15px; 80 | color: var(--hera-text-light); 81 | line-height: 1.6; 82 | } 83 | 84 | &--cover { 85 | border-radius: 12px 12px 0 0; 86 | margin-bottom: 12px; 87 | object-fit: cover; 88 | aspect-ratio: 60/36; 89 | 90 | &Link { 91 | display: flex; 92 | align-items: center; 93 | position: relative; 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /comments.php: -------------------------------------------------------------------------------- 1 | 26 |
27 |

28 | 33 | 34 |

35 | 36 |
    37 | 'ol', 'avatar_size' => 48, 'callback' => 'hera_comment')); 39 | } else { ?> 40 |
  1. 41 | get_setting('no_reply_text')) { 42 | echo $heraSetting->get_setting('no_reply_text'); 43 | } else { 44 | _e('This post has no comment yet', 'Hera'); 45 | } ?> 46 |
    2. 47 | 48 |
49 | 1 && get_option('page_comments')) : ?> 50 | 55 | 56 | 59 |
-------------------------------------------------------------------------------- /template-parts/post-navigation.php: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /modules/update.php: -------------------------------------------------------------------------------- 1 | false 11 | )); 12 | if (is_wp_error($response)) { 13 | return false; 14 | } 15 | $res = $response['body']; 16 | $latest = json_decode($res, true)['version']; 17 | set_transient('hera_latest', $latest, 60 * 60 * 24); 18 | } 19 | return version_compare(HERA_VERSION, $latest, '<'); 20 | } 21 | 22 | function hera_update_notice() 23 | { 24 | add_thickbox(); 25 | echo '
26 |

主题最新版为 ' . get_transient('hera_latest') . '，当前版本 ' . HERA_VERSION . '。请备份好所有文件，主题升级过程中会删掉原有文件。确认升级 27 |

'; 28 | } 29 | if ($heraSetting->get_setting('auto_update') && hera_is_get_new()) add_action('admin_notices', 'hera_update_notice'); 30 | 31 | add_action('wp_ajax_hera_theme_update', 'hera_theme_update_callback'); 32 | function hera_theme_update_callback() 33 | { 34 | 35 | include_once ABSPATH . 'wp-admin/includes/class-wp-upgrader.php'; 36 | 37 | $update_data = array( 38 | 'theme_version' => get_transient('hera_latest'), 39 | 'update_link' => 'https://github.com/bigfa/hera/archive/refs/tags/v' . get_transient('hera_latest') . '.zip' 40 | ); 41 | 42 | $name = "Hera"; 43 | $slug = "Hera"; 44 | $version = $update_data['theme_version']; 45 | $download_link = $update_data['update_link']; 46 | 47 | delete_site_transient('update_themes'); 48 | 49 | $themes = wp_get_themes(); 50 | $current = (object) array( 51 | "last_checked" => time(), 52 | "checked" => array(), 53 | "response" => array(), 54 | "translations" => array() 55 | ); 56 | 57 | foreach ($themes as $theme) { 58 | $current->checked[$theme->get('Slug')] = $theme->get('Version'); 59 | } 60 | 61 | $current->response[$slug] = array( 62 | 'theme' => $slug, 63 | 'new_version' => $version, 64 | 'url' => '', 65 | 'package' => $download_link 66 | ); 67 | 68 | set_site_transient('update_themes', $current); 69 | 70 | $title = __('Update Theme'); 71 | $nonce = 'upgrade-theme_' . $slug; 72 | $url = 'update.php?action=upgrade-theme&theme=' . urlencode($slug); 73 | 74 | $upgrader = new Theme_Upgrader(new Theme_Upgrader_Skin(compact('title', 'nonce', 'url', 'theme'))); 75 | $upgrader->upgrade($slug); 76 | 77 | exit; 78 | } 79 | -------------------------------------------------------------------------------- /templates/template-archive.php: -------------------------------------------------------------------------------- 1 | 8 | 10 |
11 | 13 |
14 |
15 |

16 |
17 |
18 | 20 | -1, 23 | 'post_type' => ['post'], 24 | 'ignore_sticky_posts' => 1, 25 | 'tax_query' => array( 26 | array( // only show standard post format 27 | 'taxonomy' => 'post_format', 28 | 'field' => 'slug', 29 | 'terms' => array('post-format-aside', 'post-format-audio', 'post-format-chat', 'post-format-gallery', 'post-format-image', 'post-format-link', 'post-format-quote', 'post-format-status', 'post-format-video'), 30 | 'operator' => 'NOT IN' 31 | ) 32 | ) 33 | ]; 34 | $the_query = new WP_Query($args); 35 | $arr = []; 36 | while ($the_query->have_posts()) : $the_query->the_post(); 37 | $year_tmp = get_the_time('Y'); 38 | $mon_tmp = get_the_time('n'); 39 | if (!array_key_exists($year_tmp, $arr)) { 40 | $arr[$year_tmp] = []; 41 | } 42 | 43 | if (!array_key_exists($mon_tmp, $arr[$year_tmp])) { 44 | $arr[$year_tmp][$mon_tmp] = []; 45 | } 46 | 47 | $arr[$year_tmp][$mon_tmp][] = [ 48 | 'title' => get_the_title(), 49 | 'link' => get_permalink(), 50 | 'commentnum' => get_comments_number(), 51 | 'date' => get_the_time('m-d'), 52 | 'readtime' => hera_get_post_read_time_text(get_the_ID()) 53 | ]; 54 | 55 | endwhile; 56 | wp_reset_postdata(); 57 | $output = ''; 58 | foreach ($arr as $year => $year_post) { 59 | $output .= '

' . $year . '

'; 60 | foreach ($year_post as $month => $month_post) { 61 | $output .= ''; 66 | } 67 | $output .= '
'; 68 | } 69 | echo $output; 70 | ?> 71 |
72 | 73 | -------------------------------------------------------------------------------- /scss/templates/_map.scss: -------------------------------------------------------------------------------- 1 | .footer--map { 2 | height: 550px; 3 | } 4 | 5 | .mapboxgl-ctrl-attrib-inner { 6 | display: none; 7 | } 8 | 9 | .mapboxgl-ctrl-bottom-left { 10 | display: none; 11 | } 12 | 13 | .map--container { 14 | max-width: 1000px; 15 | margin-left: auto; 16 | margin-right: auto; 17 | } 18 | 19 | .markerPro { 20 | &--posts { 21 | grid-template-columns: repeat(2, 1fr); 22 | grid-gap: 16px; 23 | display: grid; 24 | 25 | @media screen and (max-width: 768px) { 26 | grid-template-columns: 1fr; 27 | } 28 | } 29 | 30 | &--post { 31 | box-shadow: none; 32 | transition: 1s background-position; 33 | background-color: var(--hera-background-gray-lightest); 34 | color: var(--hera-text-gray); 35 | padding: 15px; 36 | border-radius: 10px; 37 | display: flex; 38 | flex-direction: column; 39 | justify-content: flex-start; 40 | align-items: flex-start; 41 | position: relative; 42 | min-width: 0; 43 | background-size: cover; 44 | background-position: center; 45 | background-repeat: no-repeat; 46 | text-decoration: none !important; 47 | 48 | a { 49 | text-decoration: none; 50 | } 51 | 52 | .markerPro--content { 53 | flex: 1 1 auto; 54 | } 55 | 56 | &__hera { 57 | flex-direction: row; 58 | 59 | &::before { 60 | display: none; 61 | } 62 | 63 | img { 64 | width: 80px; 65 | height: 80px; 66 | object-fit: cover; 67 | border-radius: 8px; 68 | } 69 | } 70 | } 71 | 72 | &--title { 73 | position: relative; 74 | margin: 3px 0; 75 | font-size: 14px; 76 | font-weight: bold; 77 | line-height: 1.4; 78 | white-space: nowrap; 79 | overflow: hidden; 80 | text-overflow: ellipsis; 81 | max-width: 100%; 82 | font-size: 16px; 83 | } 84 | 85 | &--meta { 86 | display: flex; 87 | align-items: center; 88 | font-size: 12px; 89 | display: flex; 90 | align-items: center; 91 | position: relative; 92 | } 93 | 94 | &--location { 95 | background-color: #c0580c; 96 | font-size: 12px; 97 | color: #fff; 98 | border-radius: 0 5px 0 5px; 99 | line-height: 1.4; 100 | padding: 1px 5px; 101 | position: absolute; 102 | top: 0; 103 | right: 0; 104 | font-size: 12px; 105 | background-color: rgba(0, 0, 0, 0.56); 106 | border-radius: 999rem; 107 | top: 10px; 108 | right: 10px; 109 | padding: 2px 8px; 110 | } 111 | 112 | &--addonTitle { 113 | font-size: 18px; 114 | font-weight: bold; 115 | margin-bottom: 10px; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /template-parts/content-status.php: -------------------------------------------------------------------------------- 1 | 13 |
14 |
15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 | post_content))), 0, 240, "..."); 26 | echo $sippnet; 27 | ?> 28 | 29 |
30 |
31 | 32 | 33 | 34 | '); ?> 35 | get_setting('home_views')) echo hera_get_post_views_text(false, false, false, get_the_ID(), ''); ?> 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 |
44 |
-------------------------------------------------------------------------------- /scss/components/_relatedPost.scss: -------------------------------------------------------------------------------- 1 | .hRelated { 2 | &--heroTitle { 3 | font-size: 16px; 4 | font-weight: bold; 5 | margin-bottom: 10px; 6 | } 7 | 8 | &--list { 9 | display: grid; 10 | grid-template-columns: repeat(2, 1fr); 11 | grid-gap: 20px; 12 | padding-bottom: 20px; 13 | 14 | @media (max-width: 768px) { 15 | grid-template-columns: 1fr; 16 | } 17 | } 18 | 19 | &--snippet { 20 | line-height: 1.5; 21 | display: flex; 22 | } 23 | 24 | &--item { 25 | background-color: var(--hera-background-gray); 26 | border-radius: 10px; 27 | display: flex; 28 | flex-direction: column; 29 | 30 | &:hover { 31 | background-color: var(--hera-background-gray-lightest); 32 | } 33 | 34 | &__status { 35 | font-size: 14px; 36 | background-color: var(--hera-background-gray); 37 | border-radius: 5px; 38 | padding: 12px; 39 | 40 | &:hover { 41 | background-color: var(--hera-background-gray-lightest); 42 | } 43 | 44 | a { 45 | color: var(--hera-text-gray); 46 | p { 47 | line-height: 1.6; 48 | display: -webkit-box; 49 | -webkit-line-clamp: 2; 50 | -webkit-box-orient: vertical; 51 | overflow: hidden; 52 | text-overflow: ellipsis; 53 | } 54 | } 55 | 56 | .hRelated--meta { 57 | font-size: 12px; 58 | display: flex; 59 | align-items: center; 60 | margin-top: 8px; 61 | padding: 0; 62 | line-height: 1; 63 | flex-wrap: wrap; 64 | } 65 | } 66 | } 67 | 68 | &--image { 69 | display: flex; 70 | align-items: center; 71 | 72 | img { 73 | border-radius: 10px 10px 0 0; 74 | aspect-ratio: 2/1; 75 | object-fit: cover; 76 | width: 100%; 77 | } 78 | } 79 | 80 | &--title { 81 | font-size: 14px; 82 | font-weight: bold; 83 | line-height: 1.4; 84 | margin-bottom: 5px; 85 | padding-left: 10px; 86 | padding-right: 10px; 87 | padding-top: 8px; 88 | 89 | &:hover { 90 | color: var(--hera-hover-color); 91 | } 92 | } 93 | 94 | &--meta { 95 | font-size: 12px; 96 | color: var(--hera-text-gray); 97 | line-height: 1; 98 | padding: 0 10px 10px; 99 | display: flex; 100 | align-items: center; 101 | flex-wrap: wrap; 102 | 103 | a { 104 | &:hover { 105 | color: var(--hera-text-color); 106 | text-decoration: underline; 107 | } 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /ts/setting.ts: -------------------------------------------------------------------------------- 1 | document.querySelectorAll('.leftpanel li').forEach((element, index) => { 2 | element.addEventListener('click', (event) => { 3 | document.querySelectorAll('.leftpanel li').forEach((element) => { 4 | element.classList.remove('active'); 5 | }); 6 | element.classList.add('active'); 7 | document.querySelectorAll('.div-tab').forEach((element) => { 8 | element.classList.add('hidden'); 9 | }); 10 | document.querySelectorAll('.div-tab')[index].classList.remove('hidden'); 11 | }); 12 | }); 13 | 14 | document.querySelector('#upload-categoryCover')?.addEventListener('click', (event) => { 15 | event.preventDefault(); 16 | //@ts-ignore 17 | const image = wp 18 | .media({ 19 | //@ts-ignore 20 | title: obvInit.upload_title, 21 | multiple: false, 22 | button: { 23 | //@ts-ignore 24 | text: obvInit.upload_button, 25 | }, 26 | }) 27 | .open() 28 | .on('select', function () { 29 | const uploaded_image = image.state().get('selection').first(); 30 | const image_url = uploaded_image.toJSON().url; 31 | document.querySelector('#_category_cover')?.setAttribute('value', image_url); 32 | }); 33 | }); 34 | 35 | document.querySelector('#pure-save')?.addEventListener('click', (event) => { 36 | event.preventDefault(); 37 | const form = document.querySelector('#pure-form') as HTMLFormElement; 38 | // @ts-ignore 39 | const formData = new FormData(form); 40 | // @ts-ignore 41 | const data = new URLSearchParams(formData); 42 | 43 | // const emailElement = document.querySelector('#pure-setting-email'); 44 | // const email = emailElement?.getAttribute('value'); 45 | // if (email && !isEmailValid(email)) { 46 | // return alert('Email is not valid'); 47 | // } 48 | 49 | //@ts-ignore 50 | jQuery.ajax({ 51 | //@ts-ignore 52 | url: obvInit.ajaxurl, 53 | data: data + '&action=hera_setting', 54 | type: 'POST', 55 | success: function () { 56 | //@ts-ignore 57 | const html = `

${obvInit.success_message}

`; 58 | //@ts-ignore 59 | jQuery('.pure-wrap').before(html); 60 | window.scrollTo(0, 0); 61 | }, 62 | }); 63 | }); 64 | +(function ($) { 65 | $(document).on('click', '#hera-settings_updated .notice-dismiss', function () { 66 | $('#hera-settings_updated').remove(); 67 | }); 68 | let $switch = $('.pure-setting-switch'); 69 | $switch.click(function () { 70 | var $this = $(this), 71 | $input = $('#' + $this.attr('data-id')); 72 | 73 | if (!$this.hasClass('active')) { 74 | $this.addClass('active'); 75 | $input.val(1); 76 | } else { 77 | $this.removeClass('active'); 78 | $input.val(0); 79 | } 80 | 81 | $input.change(); 82 | }); 83 | //@ts-ignore 84 | })(jQuery); 85 | -------------------------------------------------------------------------------- /template-parts/content-archive.php: -------------------------------------------------------------------------------- 1 | 11 |
12 |
13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | post_content))), 0, hera_is_has_image($post->ID) ? 120 : 240, "..."); 24 | echo $sippnet; 25 | ?> 26 | 27 |
28 | 0) : ?> 29 |
30 | '; 34 | } 35 | } 36 | ?> 37 |
38 | 39 |
40 | 41 | 42 | 43 | '); ?> 44 | 45 | 46 | 47 | 48 | 49 |
50 |
51 |
52 |
-------------------------------------------------------------------------------- /scss/components/_navigation.scss: -------------------------------------------------------------------------------- 1 | .nav-links { 2 | padding: 25px 0; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | 7 | .post-navigation & { 8 | padding: 5px 0; 9 | } 10 | 11 | .page-numbers, 12 | .post-page-numbers { 13 | color: var(--hera-text-gray); 14 | margin: 0 5px; 15 | height: 32px; 16 | width: 32px; 17 | border-radius: 100%; 18 | border: 1px solid var(--hera-border-color); 19 | text-align: center; 20 | line-height: 32px; 21 | font-size: 14px; 22 | 23 | &.dots { 24 | border: 0; 25 | &:hover { 26 | background-color: transparent; 27 | color: var(--hera-text-gray); 28 | } 29 | } 30 | 31 | &.current, 32 | &:hover { 33 | color: #fff; 34 | background-color: #000; 35 | border-color: #000; 36 | } 37 | } 38 | 39 | &__comment { 40 | .page-numbers, 41 | .post-page-numbers { 42 | font-size: 12px; 43 | width: 28px; 44 | height: 28px; 45 | line-height: 28px; 46 | } 47 | } 48 | } 49 | 50 | .post-navigation { 51 | .hArticle + & { 52 | margin-top: 10px; 53 | } 54 | 55 | .nav-links { 56 | position: relative; 57 | display: flex; 58 | justify-content: space-between; 59 | transition: 0.5s; 60 | 61 | @media (max-width: 720px) { 62 | flex-direction: column; 63 | } 64 | } 65 | 66 | .nav-previous, 67 | .nav-next { 68 | padding: 15px; 69 | background-color: var(--hera-background-gray); 70 | width: 48%; 71 | box-sizing: border-box; 72 | border-radius: 10px; 73 | text-align: right; 74 | background-origin: border-box; 75 | background-clip: padding-box, border-box; 76 | border: 1px solid transparent; 77 | 78 | @media screen and (max-width: 720px) { 79 | width: 100%; 80 | margin-bottom: 10px; 81 | text-align: center; 82 | } 83 | 84 | a { 85 | display: flex; 86 | flex-direction: column; 87 | } 88 | 89 | .cover { 90 | border-radius: 8px; 91 | height: 110px; 92 | object-fit: cover; 93 | } 94 | 95 | .cover--link { 96 | position: relative; 97 | .marker--tips { 98 | position: absolute; 99 | bottom: 5px; 100 | right: 5px; 101 | background-color: #f8f8f8; 102 | border-radius: 5px; 103 | padding: 5px; 104 | font-size: 12px; 105 | color: var(--hera-text-gray); 106 | line-height: 1; 107 | } 108 | } 109 | } 110 | 111 | .nav-previous { 112 | text-align: left; 113 | } 114 | 115 | .meta-nav { 116 | font-size: 12px; 117 | text-transform: uppercase; 118 | color: var(--hera-text-gray); 119 | } 120 | 121 | .post-title { 122 | font-size: 14px; 123 | margin-bottom: 10px; 124 | 125 | &:hover { 126 | color: var(--hera-hover-color); 127 | } 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const babel = require('gulp-babel'); 5 | const uglify = require('gulp-uglify'); 6 | const concat = require('gulp-concat'); 7 | const plumber = require('gulp-plumber'); 8 | const postcss = require('gulp-postcss'); 9 | const autoprefixer = require('autoprefixer'); 10 | const cssnano = require('cssnano'); 11 | const sass = require('gulp-sass')(require('sass')); 12 | const rename = require('gulp-rename'); 13 | const ts = require('gulp-typescript'); 14 | 15 | function css() { 16 | return gulp 17 | .src('./scss/app.scss') 18 | .pipe(plumber()) 19 | .pipe(sass({ outputStyle: 'compressed' })) 20 | .pipe(rename('misc.css')) 21 | .pipe(postcss([autoprefixer(), cssnano()])) 22 | .pipe(gulp.dest('./build/css/')); 23 | } 24 | 25 | function images() { 26 | return gulp.src('./images/*.{png,jpg,gif,svg}').pipe(gulp.dest('./build/images/')); 27 | } 28 | 29 | function fonts() { 30 | return gulp.src('./fonts/*').pipe(gulp.dest('./build/fonts/')); 31 | } 32 | 33 | function settingCSS() { 34 | return gulp 35 | .src('./scss/setting.scss') 36 | .pipe( 37 | sass({ 38 | outputStyle: 'compressed', 39 | allowEmpty: true, 40 | silenceDeprecations: ['legacy-js-api'], 41 | }) 42 | ) 43 | .pipe(postcss([autoprefixer(), cssnano()])) 44 | .pipe(gulp.dest('./build/css/')); 45 | } 46 | 47 | function typescripts() { 48 | return ( 49 | gulp 50 | .src([ 51 | './ts/app.ts', 52 | './ts/modules/zoom.ts', 53 | './ts/modules/action.ts', 54 | './ts/modules/comment.ts', 55 | './ts/modules/scroll.ts', 56 | ]) 57 | .pipe( 58 | ts({ 59 | noImplicitAny: true, 60 | outFile: 'misc.js', 61 | }) 62 | ) 63 | //.pipe(uglify()) 64 | .pipe(gulp.dest('build/js/')) 65 | ); 66 | } 67 | 68 | function setting() { 69 | return gulp 70 | .src(['./ts/setting.ts']) 71 | .pipe(plumber()) 72 | .pipe( 73 | ts({ 74 | noImplicitAny: true, 75 | outFile: 'setting.js', 76 | target: 'es5', 77 | }) 78 | ) 79 | .pipe(uglify()) 80 | .pipe(rename({ suffix: '.min' })) 81 | .pipe(gulp.dest('./build/js/')); 82 | } 83 | 84 | // Watch files 85 | function watchFiles() { 86 | gulp.watch( 87 | ['./scss/app.scss', './scss/components/*', './scss/base/*', './scss/templates/*'], 88 | gulp.series(css) 89 | ); 90 | gulp.watch(['./scss/setting.scss'], gulp.series(settingCSS)); 91 | gulp.watch(['./ts/app.ts', './ts/modules/*'], gulp.series(typescripts)); 92 | gulp.watch(['./ts/setting.ts'], gulp.series(setting)); 93 | } 94 | 95 | // define complex tasks 96 | const watch = gulp.parallel(watchFiles); 97 | const build = gulp.parallel( 98 | watch, 99 | gulp.parallel(css, setting, images, fonts, typescripts, settingCSS) 100 | ); 101 | 102 | exports.setting = setting; 103 | exports.css = css; 104 | exports.settingCSS = settingCSS; 105 | exports.typescripts = typescripts; 106 | exports.build = build; 107 | exports.watch = watch; 108 | exports.default = build; 109 | -------------------------------------------------------------------------------- /scss/components/_zoom.scss: -------------------------------------------------------------------------------- 1 | .overlay { 2 | position: fixed; 3 | top: 0; 4 | bottom: 0; 5 | right: 0; 6 | left: 0; 7 | background-color: rgba(255, 255, 255, 0.96); 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | z-index: 100; 12 | 13 | @media (max-width: 800px) { 14 | flex-direction: column; 15 | } 16 | 17 | &-img-wrap { 18 | position: relative; 19 | opacity: 0; 20 | transition: opacity 0.5s; 21 | display: flex; 22 | align-items: center; 23 | 24 | &.is-finieshed { 25 | opacity: 1; 26 | } 27 | } 28 | } 29 | 30 | .zoomImgClose { 31 | background-color: transparent; 32 | border: 0; 33 | color: rgb(153, 153, 153); 34 | background-color: rgb(245, 245, 245); 35 | height: 44px; 36 | width: 44px; 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | border-radius: 100%; 41 | position: absolute; 42 | right: 10px; 43 | top: 10px; 44 | cursor: pointer; 45 | 46 | svg { 47 | transition: 0.5s transform; 48 | fill: rgb(153, 153, 153); 49 | } 50 | 51 | &:hover { 52 | svg { 53 | transform: rotate(90deg); 54 | } 55 | } 56 | } 57 | 58 | .zoomNav { 59 | display: flex; 60 | justify-content: center; 61 | } 62 | 63 | .mfp-arrow-left { 64 | position: absolute; 65 | opacity: 0.65; 66 | left: 10px; 67 | margin: 0; 68 | top: 50%; 69 | margin-top: -55px; 70 | padding: 0; 71 | height: 44px; 72 | background-color: rgb(245, 245, 245); 73 | width: 44px; 74 | display: flex; 75 | align-items: center; 76 | justify-content: center; 77 | border-radius: 100%; 78 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 79 | border: 0; 80 | color: var(--hera-text-light); 81 | 82 | svg { 83 | transform: rotate(180deg); 84 | } 85 | 86 | &.disabled { 87 | opacity: 0.4; 88 | cursor: not-allowed; 89 | } 90 | } 91 | 92 | .mfp-arrow-right { 93 | border: 0; 94 | color: var(--hera-text-light); 95 | position: absolute; 96 | opacity: 0.65; 97 | right: 10px; 98 | background-color: rgb(245, 245, 245); 99 | margin: 0; 100 | top: 50%; 101 | margin-top: -55px; 102 | padding: 0; 103 | height: 44px; 104 | width: 44px; 105 | display: flex; 106 | align-items: center; 107 | justify-content: center; 108 | border-radius: 100%; 109 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 110 | 111 | &.disabled { 112 | opacity: 0.4; 113 | cursor: not-allowed; 114 | } 115 | } 116 | 117 | .image--nav { 118 | display: flex; 119 | flex-direction: column; 120 | margin-left: 50px; 121 | transform: rotate(90deg) translateX(4%); 122 | text-align: right; 123 | pointer-events: none; 124 | font-size: 64px; 125 | max-height: 80vh; 126 | color: var(--hera-text-light); 127 | font-style: italic; 128 | 129 | @media (max-width: 800px) { 130 | width: 100%; 131 | margin-left: 0; 132 | overflow-x: auto; 133 | flex-wrap: nowrap; 134 | flex-direction: row; 135 | justify-content: center; 136 | margin-top: 30px; 137 | 138 | img { 139 | width: 64px; 140 | } 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /ts/app.ts: -------------------------------------------------------------------------------- 1 | interface ObvInit { 2 | like_success_text(like_success_text: any, arg1: string): unknown; 3 | copy_success_text(copy_success_text: any, arg1: string): unknown; 4 | now_text: any; 5 | comment_success_text(comment_success_text: any, arg1: string): unknown; 6 | archive_id: any; 7 | nonce: string; 8 | restfulBase: string; 9 | is_single: boolean; 10 | post_id: number; 11 | is_archive: boolean; 12 | darkmode: boolean; 13 | version: string; 14 | } 15 | 16 | class heraBase { 17 | is_single: boolean = false; 18 | post_id: number = 0; 19 | is_archive: boolean = false; 20 | darkmode: any = false; 21 | VERSION: string; 22 | obvInit: ObvInit; 23 | 24 | constructor() { 25 | const obvInit = (window as any).obvInit as ObvInit; 26 | this.is_single = obvInit.is_single; 27 | this.post_id = obvInit.post_id; 28 | this.is_archive = obvInit.is_archive; 29 | this.darkmode = obvInit.darkmode; 30 | this.VERSION = obvInit.version; 31 | this.obvInit = obvInit; 32 | } 33 | 34 | getCookie(t: any) { 35 | if (0 < document.cookie.length) { 36 | var e = document.cookie.indexOf(t + '='); 37 | if (-1 != e) { 38 | e = e + t.length + 1; 39 | var n = document.cookie.indexOf(';', e); 40 | return -1 == n && (n = document.cookie.length), document.cookie.substring(e, n); 41 | } 42 | } 43 | return ''; 44 | } 45 | 46 | setCookie(t: any, e: any, n: any) { 47 | var o = new Date(); 48 | o.setTime(o.getTime() + 24 * n * 60 * 60 * 1e3); 49 | var i = 'expires=' + o.toUTCString(); 50 | document.cookie = t + '=' + e + ';' + i + ';path=/'; 51 | } 52 | 53 | showNotice(message: any, type: any = 'success') { 54 | const html = `
${message}
`; 55 | 56 | document.querySelector('body')!.insertAdjacentHTML('beforeend', html); 57 | document.querySelector('.notice--wrapper')!.classList.add('is-active'); 58 | setTimeout(() => { 59 | document.querySelector('.notice--wrapper')!.remove(); 60 | }, 3000); 61 | } 62 | } 63 | 64 | if (document.querySelector('.nav--clicker')) { 65 | const footerLogo = document.querySelector('.nav--clicker'); 66 | if (footerLogo) { 67 | footerLogo.addEventListener('click', function () { 68 | const body = document.querySelector('body'); 69 | if (body) { 70 | body.classList.toggle('is-readingMode'); 71 | } 72 | }); 73 | } 74 | } 75 | 76 | if (document.querySelector('.menu--icon')) { 77 | document.querySelector('.menu--icon')!.addEventListener('click', () => { 78 | document.querySelector('.site--nav')!.classList.add('is-active'); 79 | document.querySelector('body')!.classList.add('menu--actived'); 80 | }); 81 | } 82 | 83 | if (document.querySelector('.search--icon')) { 84 | document.querySelector('.search--icon')!.addEventListener('click', () => { 85 | document.querySelector('body')!.classList.toggle('search--actived'); 86 | }); 87 | } 88 | 89 | if (document.querySelector('.mask')) { 90 | document.querySelector('.mask')!.addEventListener('touchstart', () => { 91 | document.querySelector('.site--nav')!.classList.remove('is-active'); 92 | document.querySelector('body')!.classList.remove('menu--actived'); 93 | }); 94 | } 95 | -------------------------------------------------------------------------------- /template-parts/content.php: -------------------------------------------------------------------------------- 1 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

24 | 27 |

28 |
29 |
30 |
31 | 32 | 33 | 34 | post_content))), 0, (hera_is_has_image($post->ID) && !$heraSetting->get_setting('hide_home_cover')) ? 150 : 240, "..."); 35 | echo $sippnet; 36 | ?> 37 | 38 |
39 |
40 | 41 | 42 | 43 | get_setting('home_image_count')) echo hera_get_post_image_count_text(get_the_ID(), ''); ?> 44 | '); ?> 45 | get_setting('home_views')) echo hera_get_post_views_text(false, false, false, get_the_ID(), ''); ?> 46 |
47 |
48 | get_setting('hide_home_cover')) : ?> 49 | 50 | <?php the_title(); ?> 51 | 52 | 53 |
54 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hera 2 | 3 | ![](https://static.fatesinger.com/2024/12/2u80bhyxkmru4o9j.png) 4 | 5 | Hera is a simple single column wordpress theme with perfect performace and elegance design. 6 | 7 | latest version : `0.3.2` 8 | 9 | [中文说明](https://github.com/bigfa/hera/blob/develop/README_CN.md) 10 | 11 | ## Changelog 12 | 13 | ### 0.3.2 14 | 15 | - add single column mode 16 | 17 | ### 0.3.1 18 | 19 | - add japanese support 20 | - remove default logo 21 | - style enhancement 22 | 23 | ### 0.3.0 24 | 25 | > [!IMPORTANT] 26 | > scss class name has breaking changes 27 | 28 | - update translation 29 | - add post reading mode 30 | - style enhancement 31 | 32 | ### 0.2.6 33 | 34 | - add post read time 35 | - update translation 36 | 37 | ### 0.2.5 38 | 39 | - style enhancement 40 | - update translation 41 | - use php time format 42 | 43 | ### 0.2.4 44 | 45 | - add some filters 46 | - show post views 47 | - update translation 48 | 49 | ### 0.2.3 50 | 51 | - update icon 52 | - add threads link setting 53 | 54 | ### 0.2.2 55 | 56 | - add toc 57 | 58 | ### 0.2.1 59 | 60 | - add gravatar proxy domain setting 61 | 62 | ### 0.2.0 63 | 64 | - add status post format archive 65 | - fixed cover error in post nav 66 | 67 | ### 0.1.11 68 | 69 | - fixed category card render error 70 | 71 | ### 0.1.10 72 | 73 | - add link image support 74 | 75 | ### 0.1.9 76 | 77 | - fixed image zoom setting error 78 | 79 | ### 0.1.8 80 | 81 | - fixed post image count error 82 | - add post gallery styles 83 | 84 | ### 0.1.7 85 | 86 | - add tag template 87 | - fixed some style issues 88 | 89 | ### 0.1.6 90 | 91 | - fixed some style issues 92 | 93 | ### 0.1.5 94 | 95 | - fixed some style issues 96 | 97 | ### 0.1.4 98 | 99 | - fixed some style issues 100 | 101 | ### 0.1.3 102 | 103 | - fixed some style issues 104 | 105 | ### 0.1.2 106 | 107 | - ignore sticky post in related posts 108 | - add dark mode support 109 | 110 | ### 0.1.1 111 | 112 | - fixed some style issues 113 | 114 | ### 0.1.0 115 | 116 | - bug fixed 117 | - update translation 118 | - add post like button 119 | - add copy post permalink 120 | - add mobile search icon 121 | - add post view 122 | 123 | ### 0.0.16 124 | 125 | - add mobile menu support 126 | 127 | ### 0.0.15 128 | 129 | - redesign nav style 130 | 131 | ### 0.0.14 132 | 133 | - add image cdn support 134 | - fixed adjcent post cover alt error 135 | - improve responsive support 136 | - add search icon 137 | 138 | ### 0.0.13 139 | 140 | - improve responsive support 141 | 142 | ### 0.0.12 143 | 144 | - add microdata 145 | - improve responsive support 146 | - add auto update module 147 | 148 | ### 0.0.11 149 | 150 | - fixed ajcent post link error 151 | 152 | ### 0.0.10 153 | 154 | - update translation 155 | 156 | ### 0.0.9 157 | 158 | - add sns config 159 | 160 | ### 0.0.8 161 | 162 | - update translation 163 | 164 | ### 0.0.7 165 | 166 | - format scss 167 | 168 | ### 0.0.6 169 | 170 | - change header line-height 171 | - remove useless template 172 | - add menu support 173 | 174 | ### 0.0.5 175 | 176 | - add more css vars 177 | - change some php vars 178 | 179 | ### 0.0.4 180 | 181 | - add status post format 182 | - add search template 183 | - add search form 184 | - add sticky post icon 185 | 186 | ### 0.0.3 187 | 188 | - add comment submit action 189 | 190 | ### 0.0.2 191 | 192 | - add blogroll template 193 | - add related posts 194 | 195 | ### 0.0.1 196 | 197 | - Initial release. 198 | -------------------------------------------------------------------------------- /scss/base/_var.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --hera-main-color: #8b645a; 3 | --hera-hover-color: #8b645a; 4 | --hera-color-white: #fff; 5 | --hera-background-white: #fff; 6 | --hera-background-gray: #f5f5f5; 7 | --hera-background-gray-lightest: #fafafa; 8 | --hera-warning-color: rgb(201, 74, 74); 9 | 10 | --hera-column-width: 742px; 11 | --hera-article-width: 828px; 12 | --hera-header-width: 25%; 13 | 14 | --hera-basic-font-size: 16px; 15 | --hera-text-color: rgba(0, 0, 0, 0.86); 16 | --hera-text-light: rgba(0, 0, 0, 0.68); 17 | --hera-text-gray: rgba(0, 0, 0, 0.6); 18 | --hera-text-gray-lightest: rgba(0, 0, 0, 0.55); 19 | 20 | --hera-border-color: rgba(0, 0, 0, 0.1); 21 | --hera-border-color-light: rgba(0, 0, 0, 0.05); 22 | 23 | --hera-background-color-white: #fff; 24 | --hera-background-opacity: 1; 25 | --hera-article-hero-font-size: 2rem; 26 | 27 | --hera-border-radius: 999rem; 28 | 29 | --hera-thumbnail-width: 96px; 30 | --hera-thumbnail-height: 96px; 31 | 32 | --hera-font-size-smallest: 12px; 33 | --hera-text-size-small: 14px; 34 | } 35 | 36 | @media (prefers-color-scheme: dark) { 37 | .auto { 38 | // --hera-main-color: rgba(253, 186, 116, 1); 39 | // --hera-hover-color: rgba(255, 237, 213, 1); 40 | --hera-text-color: #a1a1aa; 41 | --hera-text-light: rgba(161, 161, 170, 1); 42 | --hera-text-gray: rgba(113, 113, 122, 1); 43 | --hera-text-gray-lightest: rgba(113, 113, 122, 0.95); 44 | 45 | --hera-background-white: #1e1e1e; 46 | --hera-background-gray: #000; 47 | --hera-background-white-opacity: rgba(30, 30, 30, var(--hera-background-opacity)); 48 | --hera-background-gray-lightest: #121212; 49 | 50 | --hera-border-color: rgba(63, 63, 70, 0.6); 51 | --hera-border-color-light: rgba(63, 63, 70, 0.4); 52 | 53 | .comment-form .submit { 54 | background-color: rgba(63, 63, 70, 1); 55 | &:hover { 56 | background-color: rgba(82, 82, 91, 1); 57 | } 58 | } 59 | 60 | .doulist-item { 61 | background-color: rgba(63, 63, 70, 0.15); 62 | } 63 | 64 | .comment-form { 65 | input, 66 | textarea { 67 | background-color: rgba(63, 63, 70, 0.15); 68 | border-color: rgba(63, 63, 70, 1); 69 | } 70 | } 71 | } 72 | } 73 | 74 | .dark { 75 | --hera-text-color: #a1a1aa; 76 | --hera-text-light: rgba(161, 161, 170, 1); 77 | --hera-text-gray: rgba(113, 113, 122, 1); 78 | --hera-text-gray-lightest: rgba(113, 113, 122, 0.95); 79 | 80 | --hera-background-white: #1e1e1e; 81 | --hera-background-gray: #000; 82 | --hera-background-white-opacity: rgba(30, 30, 30, var(--hera-background-opacity)); 83 | --hera-background-gray-lightest: #121212; 84 | 85 | --hera-border-color: rgba(63, 63, 70, 0.6); 86 | --hera-border-color-light: rgba(63, 63, 70, 0.4); 87 | 88 | .doulist-item { 89 | background: rgba(63, 63, 70, 0.15); 90 | } 91 | 92 | .comment-form .submit { 93 | background-color: rgba(63, 63, 70, 1); 94 | &:hover { 95 | background-color: rgba(82, 82, 91, 1); 96 | } 97 | } 98 | 99 | .comment-form { 100 | input, 101 | textarea { 102 | background-color: rgba(63, 63, 70, 0.15); 103 | border-color: rgba(63, 63, 70, 1); 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /modules/article.php: -------------------------------------------------------------------------------- 1 | get_setting('default_thumbnail'); 14 | preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER); 15 | $n = count($strResult[1]); 16 | if ($n > 0) { 17 | $output = $strResult[1][0]; 18 | } else { 19 | $output = $defaltthubmnail; 20 | } 21 | } 22 | 23 | if ($height && $width) { 24 | if ($heraSetting->get_setting('upyun')) { 25 | $output = $output . "!/both/{$width}x{$height}"; 26 | } 27 | 28 | if ($heraSetting->get_setting('oss')) { 29 | $heraSetting = $output . "?x-oss-process=image/crop,w_{$width},h_{$height}"; 30 | } 31 | 32 | if ($heraSetting->get_setting('qiniu')) { 33 | $output = $output . "?imageView2/1/w/{$width}/h/{$height}"; 34 | } 35 | } 36 | return $output; 37 | } 38 | 39 | function hera_is_has_image($post_id) 40 | { 41 | static $has_image; 42 | if (has_post_thumbnail($post_id)) { 43 | $has_image = true; 44 | } elseif (get_post_meta($post_id, '_banner', true)) { 45 | $has_image = true; 46 | } else { 47 | $content = get_post_field('post_content', $post_id); 48 | preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER); 49 | $n = count($strResult[1]); 50 | if ($n > 0) { 51 | $has_image = true; 52 | } else { 53 | $has_image = false; 54 | } 55 | } 56 | 57 | return $has_image; 58 | } 59 | 60 | /** 61 | * Get post image count 62 | * 63 | * @since Hera 0.0.9 64 | * 65 | */ 66 | 67 | 68 | function hera_get_post_image_count($post_id) 69 | { 70 | $content = get_post_field('post_content', $post_id); 71 | $content = apply_filters('the_content', $content); 72 | preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER); 73 | return count($strResult[1]); 74 | } 75 | 76 | function hera_get_post_image_count_text($post_id, $before = '', $after = '') 77 | { 78 | $count = hera_get_post_image_count($post_id); 79 | 80 | if ($count == 0) { 81 | return ''; 82 | } 83 | 84 | return $before . sprintf(_n('%d pic', '%d pics', $count, 'Hera'), $count) . $after; 85 | } 86 | 87 | /** 88 | * Get post images 89 | * 90 | * @since Hera 0.2.0 91 | * 92 | */ 93 | 94 | 95 | function hera_get_post_images($post_id, $count = 3) 96 | { 97 | if (! $post_id) { 98 | $post_id = get_the_ID(); 99 | } 100 | 101 | $post = get_post($post_id); 102 | $content = apply_filters('the_content', $post->post_content); 103 | preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER); 104 | $n = count($strResult[1]); 105 | $output = array(); 106 | if ($n > 0) { 107 | $output = array_slice($strResult[1], 0, $count); 108 | } 109 | return $output; 110 | } 111 | -------------------------------------------------------------------------------- /modules/scripts.php: -------------------------------------------------------------------------------- 1 | '; 18 | foreach ($bookmarks as $bookmark) { 19 | $image = $bookmark->link_image ? '' . $bookmark->link_name . '' : get_avatar($bookmark->link_notes, 64); 20 | $output .= '
  • 21 | ' . $image . ' 22 | ' . $bookmark->link_name . '' . $bookmark->link_description . '' . __('visit', 'Hera') . '
    • '; 23 | } 24 | $output .= ''; 25 | } else { 26 | $output = __('No links yet', 'Hera'); 27 | } 28 | return $output; 29 | } 30 | 31 | /** 32 | * Get link items 33 | * 34 | * @since Hera 0.0.1 35 | * 36 | * @return link iterms 37 | */ 38 | 39 | function get_link_items() 40 | { 41 | $linkcats = get_terms('link_category'); 42 | $result = ''; 43 | if (!empty($linkcats)) { 44 | foreach ($linkcats as $linkcat) { 45 | $result .= '

    ' . $linkcat->name . '

    '; 46 | if ($linkcat->description) $result .= '
    ' . $linkcat->description . '
    '; 47 | $result .= get_the_link_items($linkcat->term_id); 48 | } 49 | } else { 50 | $result = get_the_link_items(); 51 | } 52 | return $result; 53 | } 54 | 55 | 56 | 57 | function hera_get_post_views($post_id = 0) 58 | { 59 | 60 | $views_number = (int)get_post_meta($post_id, HERA_POST_VIEW_KEY, true); 61 | 62 | /** 63 | * Filters the returned views for a post. 64 | * 65 | * @since Hera 0.2.4 66 | */ 67 | return apply_filters('hera_get_post_views', $views_number, $post_id); 68 | } 69 | 70 | /** 71 | * Get post views 72 | * 73 | * @since Hera 0.2.4 74 | * 75 | * @param post id 76 | * @return post views 77 | */ 78 | 79 | function hera_get_post_views_text($zero = false, $one = false, $more = false, $post = 0, $before = '', $after = '') 80 | { 81 | $views = hera_get_post_views($post); 82 | if ($views == 0) { 83 | return $before . ($zero ? $zero : __('No views yet', 'Hera')) . $after; 84 | } elseif ($views == 1) { 85 | return $before . ($one ? $one : __('1 View', 'Hera')) . $after; 86 | } else { // more than 1 view 87 | $views = number_format_i18n($views); 88 | return $before . ($more ? $more : sprintf(__('%d Views', 'Hera'), $views)) . $after; 89 | } 90 | } 91 | 92 | 93 | 94 | function hera_get_post_read_time($post_id) 95 | { 96 | $content = get_post_field('post_content', $post_id); 97 | $word_count = str_word_count(strip_tags($content)); 98 | $reading_time = ceil($word_count / 200); // Average reading speed is 200 wpm 99 | 100 | $image_count = hera_get_post_image_count($post_id); 101 | if ($image_count > 0) { 102 | $reading_time += ceil($image_count / 10); // Add extra time for images 103 | } 104 | 105 | return $reading_time; 106 | } 107 | 108 | function hera_get_post_read_time_text($post_id, $before = '', $after = '') 109 | { 110 | $reading_time = hera_get_post_read_time($post_id); 111 | if ($reading_time <= 1) { 112 | return $before . __('1 min read', 'Hera') . $after; 113 | } else { 114 | return $before . sprintf(__('%d min read', 'Hera'), $reading_time) . $after; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /scss/components/_block.scss: -------------------------------------------------------------------------------- 1 | .hBlock { 2 | &--list { 3 | padding-top: 25px; 4 | } 5 | 6 | &--item { 7 | padding: 25px 0; 8 | position: relative; 9 | 10 | @media screen and (max-width: 768px) { 11 | padding: 12px 0; 12 | } 13 | 14 | &__status { 15 | background-color: var(--hera-background-gray-lightest); 16 | border-radius: 10px; 17 | padding: 20px; 18 | margin-top: 15px; 19 | margin-bottom: 15px; 20 | 21 | @media screen and (max-width: 768px) { 22 | padding: 12px; 23 | } 24 | } 25 | 26 | &__text { 27 | .hBlock--title { 28 | margin-bottom: 5px; 29 | } 30 | } 31 | } 32 | 33 | &--title { 34 | margin: 0 0 10px; 35 | line-height: 1.2; 36 | font-size: 22px; 37 | font-weight: 900; 38 | 39 | &:hover { 40 | color: var(--hera-hover-color); 41 | } 42 | 43 | @media screen and (max-width: 768px) { 44 | font-size: 18px; 45 | } 46 | } 47 | 48 | &--snippet { 49 | font-size: 15px; 50 | line-height: 1.6; 51 | color: var(--hera-text-gray); 52 | max-height: 4.8em; 53 | overflow: hidden; 54 | text-overflow: ellipsis; 55 | display: -webkit-box; 56 | -webkit-line-clamp: 3; 57 | -webkit-box-orient: vertical; 58 | 59 | @media screen and (max-width: 768px) { 60 | font-size: 13px; 61 | } 62 | } 63 | 64 | &--addon { 65 | display: flex; 66 | align-items: flex-start; 67 | 68 | .meta { 69 | flex: 1 1 auto; 70 | display: flex; 71 | flex-direction: column; 72 | } 73 | } 74 | 75 | &--cover { 76 | flex: 0 0 auto; 77 | margin-left: 15px; 78 | width: var(--hera-thumbnail-width); 79 | 80 | img { 81 | width: var(--hera-thumbnail-width); 82 | height: var(--hera-thumbnail-height); 83 | border-radius: 4px; 84 | object-fit: cover; 85 | } 86 | 87 | @media screen and (max-width: 768px) { 88 | margin-left: 10px; 89 | --hera-thumbnail-width: 72px; 90 | 91 | img { 92 | --hera-thumbnail-height: 72px; 93 | } 94 | } 95 | } 96 | 97 | &--meta { 98 | margin: 0; 99 | margin-top: 5px; 100 | display: flex; 101 | font-size: var(--hera-font-size-smallest); 102 | color: var(--hera-text-gray-lightest); 103 | 104 | a { 105 | &:hover { 106 | text-decoration: underline; 107 | color: var(--hera-text-color); 108 | } 109 | } 110 | 111 | .status--link { 112 | margin-left: auto; 113 | 114 | &:hover { 115 | svg { 116 | fill: var(--hera-hover-color); 117 | } 118 | } 119 | } 120 | } 121 | 122 | &--content { 123 | flex: 1 1 auto; 124 | display: flex; 125 | flex-direction: column; 126 | } 127 | 128 | &--images { 129 | display: grid; 130 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 131 | grid-gap: 15px; 132 | padding: 15px 0 5px; 133 | } 134 | 135 | &--image { 136 | border-radius: 5px; 137 | width: 100%; 138 | object-fit: cover; 139 | } 140 | } 141 | 142 | .sticky--post { 143 | display: flex; 144 | align-items: center; 145 | color: var(--hera-text-gray-lightest); 146 | font-size: 13px; 147 | user-select: none; 148 | margin-bottom: 3px; 149 | 150 | svg { 151 | margin-right: 8px; 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /template-parts/single-related.php: -------------------------------------------------------------------------------- 1 | 11 | 12 | 'post', 16 | 'post__not_in' => array(get_the_ID()), 17 | 'posts_per_page' => 4, 18 | 'category__in' => wp_get_post_categories(get_the_ID()), 19 | 'ignore_sticky_posts' => 1, 20 | 'tax_query' => get_post_format(get_the_ID()) ? array( // same post format 21 | array( 22 | 'taxonomy' => 'post_format', 23 | 'field' => 'slug', 24 | 'terms' => array('post-format-' . get_post_format(get_the_ID())), 25 | 'operator' => 'IN' 26 | ) 27 | ) : array() 28 | )); 29 | if ($the_query->have_posts()) : ?> 30 |

    31 |
    32 | have_posts()) : $the_query->the_post(); ?> 34 | 35 |
    36 | 37 | 38 | 39 | 40 | post_content))), 0, 240, "..."); 41 | echo $sippnet; 42 | ?> 43 | 44 | 45 |
    46 | 49 | 50 | 51 | '); ?> 52 |
    53 |
    54 | 55 |
    56 | 57 |
    58 | 59 | <?php the_title(); ?> 60 | 61 |
    62 |
    63 | 64 |
    65 |
    66 | 69 | 70 | 71 | '); ?> 72 | '); ?> 73 |
    74 |     75 |
    76 | 77 | 79 |
    80 | -------------------------------------------------------------------------------- /scss/templates/_search.scss: -------------------------------------------------------------------------------- 1 | .search--title { 2 | text-align: center; 3 | font-size: 14px; 4 | color: var(--hera-text-light); 5 | padding-top: 25px; 6 | 7 | & + .hBlock--list { 8 | padding-top: 0; 9 | } 10 | } 11 | 12 | .search--area { 13 | padding-top: 5px; 14 | display: flex; 15 | align-items: center; 16 | margin-left: auto; 17 | margin-right: auto; 18 | max-width: var(--hera-column-width); 19 | width: 92%; 20 | 21 | .search-form { 22 | margin-left: auto; 23 | display: flex; 24 | justify-content: flex-end; 25 | border-radius: 999rem; 26 | background-color: var(--hera-background-gray); 27 | 28 | .search-label { 29 | display: flex; 30 | align-items: center; 31 | padding: 0 15px; 32 | 33 | svg { 34 | fill: var(--hera-text-gray); 35 | width: 20px; 36 | height: 20px; 37 | cursor: pointer; 38 | } 39 | } 40 | 41 | .search-field { 42 | border: 0; 43 | font-size: 12px; 44 | padding: 10px 12px; 45 | line-height: 1.6; 46 | width: 280px; 47 | background-color: rgba(0, 0, 0, 0); 48 | 49 | &:focus { 50 | color: var(--hera-text-color); 51 | } 52 | } 53 | 54 | .search-submit { 55 | display: none; 56 | } 57 | } 58 | 59 | & + .articleContainer { 60 | padding-top: 20px; 61 | } 62 | } 63 | 64 | .moblie--icon { 65 | display: none; 66 | width: 92%; 67 | position: relative; 68 | z-index: 1000; 69 | 70 | @media screen and (max-width: 720px) { 71 | display: flex; 72 | justify-content: space-between; 73 | } 74 | } 75 | 76 | @media screen and (max-width: 720px) { 77 | .search--area { 78 | padding-top: 20px; 79 | display: none; 80 | 81 | .search--actived & { 82 | display: flex; 83 | } 84 | 85 | .search-form { 86 | margin-left: auto; 87 | margin-right: auto; 88 | } 89 | } 90 | 91 | .widget--links { 92 | display: flex; 93 | flex-direction: column; 94 | } 95 | 96 | .js-contentFixed { 97 | position: static; 98 | } 99 | .menu--actived { 100 | overflow: hidden; 101 | 102 | .mask { 103 | position: fixed; 104 | background-color: rgba(0, 0, 0, 0.5); 105 | z-index: 500; 106 | left: 0; 107 | bottom: 0; 108 | right: 0; 109 | top: 0; 110 | } 111 | } 112 | 113 | .site--nav { 114 | z-index: 1000; 115 | display: flex; 116 | box-sizing: border-box; 117 | padding: 20px; 118 | border-left: 1px solid var(--hera-border-color); 119 | flex-direction: column; 120 | line-height: 1.3; 121 | justify-content: flex-start; 122 | align-items: flex-start; 123 | font-size: 16px; 124 | position: relative; 125 | transform: translate3d(105%, 0, 0); 126 | position: fixed; 127 | top: 0; 128 | bottom: 0; 129 | width: 75%; 130 | right: 0; 131 | background-color: var(--hera-background-white); 132 | overflow-y: auto; 133 | 134 | &.is-active { 135 | transition: 0.5s; 136 | transform: translate3d(0, 0, 0); 137 | } 138 | 139 | a { 140 | padding: 5px 0; 141 | margin: 0 0 10px; 142 | width: 100%; 143 | display: flex; 144 | align-items: center; 145 | .text { 146 | align-self: flex-start; 147 | display: flex; 148 | width: 100%; 149 | align-items: center; 150 | svg { 151 | margin-left: auto; 152 | } 153 | } 154 | } 155 | } 156 | 157 | .site--info { 158 | display: flex; 159 | align-items: center; 160 | flex-direction: column; 161 | padding-top: 0px; 162 | } 163 | 164 | .site--description { 165 | display: none; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /header.php: -------------------------------------------------------------------------------- 1 | section and everything up till
    7 | * 8 | * @package Bigfa 9 | * @subpackage Hera 10 | * @since Hera 0.0.1 11 | */ 12 | ?> 13 | 14 | > 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | > 25 | get_setting('darkmode')) : ?> 26 | 38 | 39 |
    40 |
    41 |
    42 |
    43 | 44 | 45 | 46 | 51 |
    52 |
    53 |
    54 | get_setting('logo')) : ?> 55 | 56 | <?php bloginfo('name'); ?> 57 | 58 | 59 |
    60 |

    61 | 62 | get_setting('sitename')) { 63 | echo $heraSetting->get_setting('sitename'); 64 | } else { 65 | bloginfo('name'); 66 | } ?> 67 | 68 |

    69 |
    70 | get_setting('sitedescription')) { 71 | echo $heraSetting->get_setting('sitedescription'); 72 | } else { 73 | bloginfo('description'); 74 | } ?> 75 |
    76 |
    77 |
    78 | 81 | 82 | get_setting('footer_sns')) : ?> 83 |
    84 | 85 |
    86 | 87 |
    88 |
    89 |
    -------------------------------------------------------------------------------- /template-parts/search-bar.php: -------------------------------------------------------------------------------- 1 | 13 |
    14 | get_setting('reading_mode') && !$heraSetting->get_setting('single_column')) : ?> 15 | 16 | 17 | 43 | 44 | 45 | 55 |
    -------------------------------------------------------------------------------- /scss/base/_basic.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Open Sans'; 3 | src: url('../fonts/OpenSans-Regular.woff2') format('woff2'), 4 | url('../fonts/OpenSans-Regular.woff') format('woff'); 5 | font-weight: 400; 6 | font-style: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: 'Open Sans'; 12 | src: url('../fonts/OpenSans-Bold.woff2') format('woff2'), 13 | url('../fonts/OpenSans-Bold.woff') format('woff'); 14 | font-weight: 700; 15 | font-style: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: 'Open Sans'; 21 | src: url('../fonts/OpenSans-Light.woff2') format('woff2'), 22 | url('../fonts/OpenSans-Light.woff') format('woff'); 23 | font-weight: 200; 24 | font-style: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: 'Open Sans'; 30 | src: url('../fonts/OpenSans-Medium.woff2') format('woff2'), 31 | url('../fonts/OpenSans-Medium.woff') format('woff'); 32 | font-weight: 500; 33 | font-style: normal; 34 | font-display: swap; 35 | } 36 | 37 | @font-face { 38 | font-family: 'mrs_saint_delafieldregular'; 39 | src: url('../fonts/mrssaintdelafield-regular-webfont.woff2') format('woff2'), 40 | url('../fonts/mrssaintdelafield-regular-webfont.woff') format('woff'); 41 | font-weight: normal; 42 | font-style: normal; 43 | } 44 | 45 | html { 46 | scroll-behavior: smooth; 47 | } 48 | 49 | body { 50 | letter-spacing: 0; 51 | text-rendering: optimizeLegibility; 52 | -webkit-font-smoothing: antialiased; 53 | -moz-osx-font-smoothing: grayscale; 54 | -moz-font-feature-settings: 'liga' on; 55 | color: var(--hera-text-color); 56 | line-height: var(--hera-line-height, 1.8); 57 | word-break: break-all; 58 | background-color: var(--hera-background-gray-lightest); 59 | 60 | font: { 61 | weight: 400; 62 | style: normal; 63 | family: 'Open Sans', PingFang SC, Hiragino Sans GB, Microsoft YaHei, STHeiti, 64 | WenQuanYi Micro Hei, Helvetica, Arial, sans-serif; 65 | size: var(--hera-basic-font-size); 66 | } 67 | } 68 | 69 | h1, 70 | h2, 71 | h3, 72 | h4, 73 | h5 { 74 | margin-top: 0; 75 | margin-bottom: 0; 76 | font-weight: 400; 77 | } 78 | 79 | ol, 80 | ul { 81 | margin: 0; 82 | padding: 0; 83 | list-style: none; 84 | } 85 | 86 | a { 87 | color: inherit; 88 | text-decoration: none; 89 | } 90 | 91 | img { 92 | max-width: 100%; 93 | height: auto; 94 | } 95 | 96 | p { 97 | margin-top: 0; 98 | margin-bottom: 0; 99 | } 100 | 101 | button, 102 | input, 103 | textarea { 104 | appearance: none; 105 | outline: none; 106 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 107 | font-family: 'Open Sans', PingFang SC, Hiragino Sans GB, Microsoft YaHei, STHeiti, 108 | WenQuanYi Micro Hei, Helvetica, Arial, sans-serif; 109 | font-size: var(--hera-basic-font-size); 110 | color: var(--hera-text-color); 111 | } 112 | 113 | .u-textAligncenter { 114 | text-align: center; 115 | } 116 | 117 | .js-contentFixed { 118 | position: sticky; 119 | top: 20px; 120 | padding: 50px 60px 50px 50px; 121 | 122 | .is-singleColumn &, 123 | .page-template-template-map &, 124 | .page-template-template-wide & { 125 | padding: 15px 0; 126 | } 127 | } 128 | 129 | .u-flex { 130 | display: flex; 131 | align-items: center; 132 | } 133 | 134 | .screen-reader-text { 135 | position: absolute; 136 | width: 1px; 137 | height: 1px; 138 | padding: 0; 139 | margin: -1px; 140 | overflow: hidden; 141 | clip: rect(0, 0, 0, 0); 142 | white-space: nowrap; 143 | border: 0; 144 | } 145 | 146 | .w-full { 147 | width: 100%; 148 | } 149 | 150 | .sep { 151 | &::before { 152 | content: '·'; 153 | margin-left: 6px; 154 | margin-right: 6px; 155 | } 156 | } 157 | 158 | .notice--wrapper { 159 | background-color: rgba(0, 0, 0, 0.9); 160 | color: #fff; 161 | font-size: var(--hera-font-size-smallest); 162 | max-width: 800px; 163 | padding: 10px 15px; 164 | border-radius: 8px; 165 | position: fixed; 166 | z-index: 1000; 167 | top: 15px; 168 | left: 50%; 169 | transform: translateX(-50%); 170 | transition: 0.5s transform; 171 | } 172 | 173 | @media (max-width: 768px) { 174 | .notice--wrapper { 175 | width: 80%; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | .site--icons { 2 | display: flex; 3 | align-items: center; 4 | justify-content: flex-end; 5 | margin-top: 10px; 6 | padding-bottom: 10px; 7 | .is-singleColumn &, 8 | .page-template-template-map &, 9 | .page-template-template-wide & { 10 | justify-content: center; 11 | } 12 | 13 | @media screen and (max-width: 720px) { 14 | padding-bottom: 20px; 15 | margin-top: 5px; 16 | } 17 | 18 | @include sns-icons; 19 | } 20 | 21 | .navbar { 22 | width: var(--hera-header-width); 23 | position: relative; 24 | flex: 0 0 auto; 25 | box-shadow: -1px 0 1px -2px rgba(0, 0, 0, 0.9); 26 | background-color: var(--hera-background-gray-lightest); 27 | box-sizing: border-box; 28 | transition: 0.5s width; 29 | display: flex; 30 | align-items: flex-end; 31 | flex-direction: column; 32 | text-align: right; 33 | padding-top: 50px; 34 | --hera-avatar-size: 96px; 35 | 36 | @media (max-width: 1280px) { 37 | width: 25%; 38 | } 39 | 40 | .is-readingMode & { 41 | width: 0; 42 | } 43 | 44 | .avatar--wrapper { 45 | position: relative; 46 | margin-left: auto; 47 | display: flex; 48 | width: var(--hera-avatar-size); 49 | } 50 | 51 | .avatar { 52 | border-radius: 100%; 53 | width: var(--hera-avatar-size); 54 | height: var(--hera-avatar-size); 55 | object-fit: cover; 56 | border: 4px solid var(--hera-background-white); 57 | box-shadow: 0px 0px 12px var(--hera-border-color-light); 58 | box-sizing: border-box; 59 | position: relative; 60 | transform: translateX(20px); 61 | } 62 | 63 | .site--title { 64 | margin-top: 10px; 65 | margin-bottom: 5px; 66 | line-height: 1.4; 67 | font-size: 24px; 68 | } 69 | 70 | .site--description { 71 | margin: 0 0 5px; 72 | color: var(--hera-text-light); 73 | text-transform: capitalize; 74 | line-height: 1.3; 75 | } 76 | 77 | .is-singleColumn &, 78 | .page-template-template-map &, 79 | .page-template-template-wide & { 80 | width: 100%; 81 | box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1); 82 | background-color: var(--hera-background-white); 83 | padding: 30px 0; 84 | align-items: center; 85 | text-align: center; 86 | 87 | --hera-avatar-size: 72px; 88 | 89 | @media screen and (max-width: 720px) { 90 | padding: 15px 0 0; 91 | } 92 | 93 | .avatar--wrapper { 94 | margin-right: auto; 95 | } 96 | 97 | .avatar { 98 | transform: translateX(0); 99 | border-color: var(--hera-border-color); 100 | border-width: 3px; 101 | } 102 | 103 | .site--title { 104 | font-size: 20px; 105 | margin-top: 10px; 106 | margin-bottom: 5px; 107 | line-height: 1; 108 | } 109 | 110 | .site--description { 111 | display: none; 112 | } 113 | 114 | .widget--links { 115 | display: flex; 116 | } 117 | 118 | .menu-item { 119 | padding: 5px 15px; 120 | } 121 | } 122 | 123 | @media (max-width: 720px) { 124 | width: 100%; 125 | align-items: center; 126 | padding-top: 15px; 127 | text-align: center; 128 | 129 | .avatar { 130 | transform: translateX(0); 131 | width: 64px; 132 | height: 64px; 133 | border-width: 2px; 134 | } 135 | 136 | .site--title { 137 | font-size: 20px; 138 | margin-top: 5px; 139 | } 140 | 141 | .site--description { 142 | font-size: 14px; 143 | } 144 | 145 | .avatar--wrapper { 146 | margin-left: 0; 147 | width: 64px; 148 | } 149 | 150 | .js-contentFixed { 151 | display: flex; 152 | flex-direction: column; 153 | align-items: center; 154 | padding: 0; 155 | } 156 | } 157 | } 158 | 159 | .nav--clicker { 160 | cursor: pointer; 161 | fill: var(--hera-text-light); 162 | width: 24px; 163 | height: 24px; 164 | 165 | &:hover { 166 | fill: var(--hera-hover-color); 167 | } 168 | 169 | .is-readingMode & { 170 | transform: rotate(180deg); 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /scss/utilities/_wp.scss: -------------------------------------------------------------------------------- 1 | .aligncenter { 2 | margin-left: auto; 3 | margin-right: auto; 4 | display: block; 5 | } 6 | 7 | .alignleft { 8 | float: left; 9 | margin-right: 20px; 10 | } 11 | 12 | .alignright { 13 | float: right; 14 | margin-left: 20px; 15 | } 16 | 17 | .grap--figure, 18 | .colonel--figure, 19 | .wp-caption { 20 | margin: 0 0px 25px; 21 | position: relative; 22 | max-width: 100%; 23 | line-height: 1; 24 | 25 | @media (max-width: 820px) { 26 | margin: 0 0 20px; 27 | margin-left: -3.5%; 28 | margin-right: -3.5%; 29 | max-width: calc(100% + 7%); 30 | } 31 | 32 | img { 33 | border-radius: 4px; 34 | 35 | @media (max-width: 820px) { 36 | border-radius: 0; 37 | } 38 | } 39 | 40 | .imageCaption, 41 | .wp-caption-text { 42 | font-size: 12px; 43 | text-align: center; 44 | position: absolute; 45 | bottom: 12px; 46 | right: 12px; 47 | color: #fff; 48 | background-color: rgba(18, 18, 18, 0.8); 49 | border-radius: 999rem; 50 | padding: 8px 15px; 51 | } 52 | } 53 | 54 | .gallery { 55 | display: grid; 56 | grid-gap: 10px; 57 | margin-bottom: 25px; 58 | .gallery-item { 59 | margin: 0; 60 | .gallery-caption { 61 | text-align: center; 62 | font-size: 12px; 63 | color: var(--hera-text-light); 64 | } 65 | } 66 | 67 | &-columns-2, 68 | &-columns-4, 69 | &-columns-5, 70 | &-columns-7, 71 | &-columns-8 { 72 | grid-template-columns: repeat(2, 1fr); 73 | } 74 | 75 | &-columns-3, 76 | &-columns-6, 77 | &-columns-9 { 78 | grid-template-columns: repeat(3, 1fr); 79 | } 80 | } 81 | 82 | .comment-form { 83 | padding-bottom: 30px; 84 | 85 | label { 86 | display: block; 87 | margin-bottom: 0.5rem; 88 | font-size: 14px; 89 | cursor: pointer; 90 | line-height: 1.4; 91 | 92 | .required { 93 | color: var(--hera-warning-color); 94 | } 95 | } 96 | 97 | input, 98 | textarea { 99 | width: 100%; 100 | resize: none; 101 | border-radius: 5px; 102 | box-sizing: border-box; 103 | border: 1px solid var(--hera-border-color); 104 | padding: 8px 15px; 105 | font-size: 14px; 106 | transition: border-color 0.3s; 107 | 108 | &:focus { 109 | border-color: var(--hera-main-color); 110 | } 111 | } 112 | 113 | .submit { 114 | background-color: #000; 115 | color: #fff; 116 | border: 0; 117 | font-size: 14px; 118 | cursor: pointer; 119 | padding: 8px 30px; 120 | border-radius: var(--hera-border-radius); 121 | width: auto; 122 | place-self: center; 123 | place-content: center; 124 | color: var(--hera-color-white); 125 | text-align: center; 126 | 127 | &:hover { 128 | background-color: var(--hera-hover-color); 129 | } 130 | } 131 | 132 | p { 133 | margin-bottom: 15px; 134 | &:last-of-type { 135 | margin-bottom: 0; 136 | } 137 | } 138 | 139 | .comment-notes, 140 | .logged-in-as { 141 | font-size: 12px; 142 | color: var(--hera-text-gray); 143 | } 144 | } 145 | 146 | .comment-reply-link { 147 | font-size: 12px; 148 | } 149 | 150 | .comment-respond { 151 | padding-top: 30px; 152 | } 153 | 154 | .comment-reply-title { 155 | font-weight: bold; 156 | font-size: 18px; 157 | display: flex; 158 | align-items: center; 159 | 160 | small { 161 | margin-left: auto; 162 | font-weight: normal; 163 | font-size: 14px; 164 | color: var(--hera-warning-color); 165 | } 166 | } 167 | 168 | .comment-form-cookies-consent { 169 | #wp-comment-cookies-consent { 170 | display: none; 171 | } 172 | 173 | label { 174 | font-size: 14px; 175 | color: var(--hera-text-gray); 176 | display: flex; 177 | align-items: center; 178 | position: relative; 179 | 180 | &::before { 181 | background-color: var(--hera-background-white); 182 | border: 1px solid var(--hera-border-color); 183 | border-radius: 100%; 184 | height: 16px; 185 | margin-right: 6px; 186 | vertical-align: middle; 187 | width: 16px; 188 | content: ''; 189 | flex: 0 0 auto; 190 | } 191 | } 192 | 193 | input:checked + label { 194 | &::after { 195 | background-color: var(--hera-hover-color); 196 | border-radius: 100%; 197 | content: ''; 198 | position: absolute; 199 | left: 1px; 200 | height: 12px; 201 | margin: 2px; 202 | width: 12px; 203 | flex: 0 0 auto; 204 | } 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /scss/templates/_term.scss: -------------------------------------------------------------------------------- 1 | .template--terms { 2 | padding: 50px 80px; 3 | min-height: 60vh; 4 | 5 | @media screen and (max-width: 920px) { 6 | padding: 50px 20px; 7 | } 8 | } 9 | 10 | .collectionCard { 11 | display: grid; 12 | grid-template-columns: repeat(3, 1fr); 13 | grid-gap: 15px; 14 | padding-top: 20px; 15 | 16 | @media (max-width: 920px) { 17 | grid-template-columns: repeat(2, 1fr); 18 | } 19 | 20 | @media (max-width: 480px) { 21 | grid-template-columns: repeat(1, 1fr); 22 | } 23 | 24 | &--icon { 25 | margin-top: 10px; 26 | } 27 | 28 | &--item { 29 | transition: 0.5s; 30 | padding: 0 0 10px; 31 | border-radius: 5px; 32 | overflow: hidden; 33 | position: relative; 34 | background-color: var(--hera-background-gray); 35 | 36 | &:hover { 37 | .collectionCard--title { 38 | color: var(--hera-hover-color); 39 | text-decoration: underline; 40 | } 41 | } 42 | 43 | &::after { 44 | position: absolute; 45 | content: attr(data-count); 46 | opacity: 0.15; 47 | bottom: -8px; 48 | right: -5px; 49 | color: var(--hera-text-gray-lightest); 50 | font-size: 60px; 51 | font-style: italic; 52 | font-weight: bold; 53 | line-height: 1; 54 | } 55 | } 56 | 57 | &--image { 58 | height: 100px; 59 | width: 100%; 60 | object-fit: cover; 61 | border-radius: 3px 3px 0 0; 62 | } 63 | 64 | &--meta { 65 | padding: 2px 10px 0; 66 | } 67 | 68 | &--title { 69 | font-weight: 500; 70 | line-height: 1; 71 | margin-bottom: 5px; 72 | } 73 | 74 | &--description { 75 | font-size: 12px; 76 | color: var(--hera-text-gray); 77 | line-height: 1.4; 78 | height: 2.8em; 79 | overflow: hidden; 80 | text-overflow: ellipsis; 81 | display: -webkit-box; 82 | -webkit-line-clamp: 2; 83 | -webkit-box-orient: vertical; 84 | } 85 | 86 | &--count { 87 | font-size: 12px; 88 | color: var(--hera-text-gray); 89 | } 90 | } 91 | 92 | .hTerm { 93 | &--container { 94 | max-width: var(--hera-column-width); 95 | margin: 0 auto; 96 | width: 92%; 97 | } 98 | 99 | &--header { 100 | padding-top: 30px; 101 | padding-bottom: 30px; 102 | display: flex; 103 | align-items: center; 104 | 105 | @media (max-width: 768px) { 106 | padding-top: 15px; 107 | padding-bottom: 15px; 108 | 109 | & + .hBlock--list { 110 | padding-top: 0px; 111 | } 112 | 113 | & + .hCard--list { 114 | padding-top: 5px; 115 | } 116 | } 117 | 118 | .author--avatar { 119 | width: 72px; 120 | height: 72px; 121 | margin-right: 15px; 122 | 123 | @media (max-width: 768px) { 124 | width: 48px; 125 | height: 48px; 126 | margin-right: 8px; 127 | } 128 | 129 | img { 130 | width: 100%; 131 | height: 100%; 132 | object-fit: cover; 133 | border-radius: 50%; 134 | } 135 | } 136 | 137 | .author--bio { 138 | h3 { 139 | font-size: 24px; 140 | font-weight: bold; 141 | line-height: 1; 142 | margin-bottom: 8px; 143 | 144 | @media (max-width: 768px) { 145 | font-size: 18px; 146 | margin-bottom: 3px; 147 | } 148 | } 149 | 150 | p { 151 | font-size: 16px; 152 | color: var(--hera-text-gray); 153 | line-height: 1.3; 154 | 155 | @media (max-width: 768px) { 156 | font-size: 12px; 157 | } 158 | } 159 | } 160 | } 161 | 162 | &--content { 163 | flex: 1 1 auto; 164 | } 165 | 166 | &--title { 167 | font-size: 24px; 168 | font-weight: bold; 169 | line-height: 1; 170 | margin-bottom: 8px; 171 | 172 | @media (max-width: 768px) { 173 | font-size: 18px; 174 | } 175 | } 176 | 177 | &--description { 178 | font-size: 16px; 179 | color: var(--hera-text-gray); 180 | line-height: 1.3; 181 | 182 | @media (max-width: 768px) { 183 | font-size: 12px; 184 | } 185 | } 186 | 187 | &--image { 188 | height: 72px; 189 | width: 72px; 190 | object-fit: cover; 191 | border-radius: 4px; 192 | margin-right: 15px; 193 | 194 | @media (max-width: 768px) { 195 | width: 48px; 196 | height: 48px; 197 | margin-right: 8px; 198 | } 199 | } 200 | } 201 | 202 | .archive--tagList { 203 | display: flex; 204 | flex-wrap: wrap; 205 | } 206 | 207 | .archive--tagItem { 208 | margin: 10px; 209 | background-color: var(--hera-background-gray); 210 | padding: 3px 12px; 211 | border-radius: 4px; 212 | font-size: 14px; 213 | color: var(--hera-text-gray-light); 214 | 215 | span { 216 | margin-left: 3px; 217 | } 218 | } 219 | -------------------------------------------------------------------------------- /ts/modules/comment.ts: -------------------------------------------------------------------------------- 1 | class heraComment extends heraBase { 2 | loading = false; 3 | constructor() { 4 | super(); 5 | this.init(); 6 | } 7 | 8 | private init() { 9 | if (document.querySelector('.comment-form')) { 10 | document.querySelector('.comment-form')?.addEventListener('submit', (e) => { 11 | e.preventDefault(); 12 | if (this.loading) return; 13 | const form = document.querySelector('.comment-form') as HTMLFormElement; 14 | const formData = new FormData(form); 15 | const formDataObj: { [index: string]: any } = {}; 16 | formData.forEach((value, key: any) => (formDataObj[key] = value)); 17 | this.loading = true; 18 | fetch(this.obvInit.restfulBase + 'hera/v1/comment', { 19 | method: 'POST', 20 | body: JSON.stringify(formDataObj), 21 | headers: { 22 | 'X-WP-Nonce': this.obvInit.nonce, 23 | 'Content-Type': 'application/json', 24 | }, 25 | }) 26 | .then((response) => { 27 | return response.json(); 28 | }) 29 | .then((data) => { 30 | this.loading = false; 31 | if (data.code != 200) { 32 | return this.showNotice(data.message, 'error'); 33 | } 34 | let a = document.getElementById( 35 | 'cancel-comment-reply-link' 36 | ) as HTMLAnchorElement, 37 | i = document.getElementById('respond'), 38 | n = document.getElementById('wp-temp-form-div'); 39 | const comment = data.data; 40 | const html = `
  • 41 |
    42 |
    43 |
    44 | 45 |
    46 |
    47 | ${comment.comment_author} 48 | 49 |
    50 |
    51 |
    52 | ${comment.comment_content} 53 |
    54 |
    55 |
    • `; 56 | const parent_id = ( 57 | document.querySelector('#comment_parent') as HTMLInputElement 58 | )?.value; 59 | (a.style.display = 'none'), 60 | (a.onclick = null), 61 | ((document.getElementById('comment_parent') as HTMLInputElement).value = 62 | '0'), 63 | n && 64 | i && 65 | n.parentNode && 66 | (n.parentNode.insertBefore(i, n), n.parentNode.removeChild(n)); 67 | if (document.querySelector('.hComment--body__fresh')) 68 | document 69 | .querySelector('.hComment--body__fresh') 70 | ?.classList.remove('hComment--body__fresh'); 71 | 72 | const commentInput = document.getElementById( 73 | 'comment' 74 | ) as HTMLInputElement | null; 75 | if (commentInput) { 76 | commentInput.value = ''; 77 | } 78 | if (parent_id != '0') { 79 | document 80 | .querySelector('#comment-' + parent_id) 81 | ?.insertAdjacentHTML( 82 | 'beforeend', 83 | '
      ' + html + '
    ' 84 | ); 85 | console.log(parent_id); 86 | } else { 87 | if (document.querySelector('.hComment--placeholder')) { 88 | document.querySelector('.hComment--placeholder')?.remove(); 89 | } 90 | document 91 | .querySelector('.hComment--list') 92 | ?.insertAdjacentHTML('beforeend', html); 93 | } 94 | 95 | const newComment = document.querySelector( 96 | `#comment-${comment.comment_ID}` 97 | ) as HTMLElement; 98 | 99 | if (newComment) { 100 | newComment.scrollIntoView({ behavior: 'smooth' }); 101 | } 102 | 103 | this.showNotice(this.obvInit.comment_success_text, 'success'); 104 | }); 105 | }); 106 | } 107 | } 108 | } 109 | 110 | new heraComment(); 111 | -------------------------------------------------------------------------------- /scss/setting.scss: -------------------------------------------------------------------------------- 1 | a:focus { 2 | box-shadow: none; 3 | } 4 | 5 | .pure-wrap { 6 | display: flex; 7 | align-items: flex-start; 8 | } 9 | 10 | .pure-help-li { 11 | font-size: 16px; 12 | padding: 30px; 13 | border-bottom: 1px #eee dotted; 14 | span { 15 | text-decoration: none; 16 | } 17 | } 18 | 19 | .pure-help-title { 20 | font-size: 24px; 21 | font-weight: 300; 22 | color: #626773; 23 | } 24 | 25 | #pure-form { 26 | padding: 30px; 27 | min-height: 400px; 28 | background: #fff; 29 | border-radius: 5px; 30 | overflow: hidden; 31 | flex: 1 1 auto; 32 | } 33 | 34 | .leftpanel .nav { 35 | margin: 0; 36 | padding: 50px 0 0; 37 | display: flex; 38 | flex-direction: column; 39 | 40 | li { 41 | font-size: 16px; 42 | margin-bottom: 0; 43 | position: relative; 44 | 45 | & > span { 46 | color: #626773; 47 | border-radius: 0; 48 | transition: all 0.2s ease-out 0s; 49 | padding: 15px 25px; 50 | display: block; 51 | cursor: pointer; 52 | 53 | i { 54 | width: 16px; 55 | margin-right: 5px; 56 | color: #626773; 57 | font-size: 15px; 58 | top: 1px; 59 | text-align: center; 60 | } 61 | } 62 | 63 | &.active { 64 | span { 65 | background-color: #fff; 66 | border-radius: 5px 0 0 5px; 67 | color: #455473; 68 | } 69 | } 70 | } 71 | } 72 | 73 | .dashicons-basic:before { 74 | content: '\f108'; 75 | } 76 | 77 | .dashicons-slider:before { 78 | content: '\f232'; 79 | } 80 | 81 | .dashicons-feature:before { 82 | content: '\f475'; 83 | } 84 | 85 | .dashicons-interface:before { 86 | content: '\f100'; 87 | } 88 | 89 | .dashicons-social-contact:before { 90 | content: '\f304'; 91 | } 92 | 93 | .dashicons-save:before { 94 | content: '\f480'; 95 | } 96 | 97 | .pure-setting-radio { 98 | display: inline-block; 99 | cursor: pointer; 100 | margin-right: 20px; 101 | user-select: none; 102 | 103 | .dashicons-before { 104 | width: 18px; 105 | height: 18px; 106 | border: 1px solid #d3cfc8; 107 | border-radius: 50%; 108 | vertical-align: middle; 109 | display: inline-block; 110 | margin-right: 5px; 111 | position: relative; 112 | } 113 | 114 | &.checked { 115 | .dashicons-before { 116 | &::before { 117 | content: '\f147'; 118 | background-color: #0074a2; 119 | color: #fff; 120 | border-radius: 50%; 121 | top: -1px; 122 | left: -1px; 123 | text-indent: -1px; 124 | position: absolute; 125 | animation: loader-spinner 300ms linear 1; 126 | } 127 | } 128 | } 129 | } 130 | 131 | .form-table { 132 | th { 133 | width: 140px; 134 | padding: 0; 135 | } 136 | 137 | td { 138 | padding: 0 0 40px 0; 139 | } 140 | 141 | tr th label, 142 | tr td label { 143 | color: #455473; 144 | font-weight: normal; 145 | font-size: 16px; 146 | } 147 | } 148 | 149 | input.large-text, 150 | textarea.large-text { 151 | width: 100%; 152 | } 153 | 154 | textarea.code { 155 | line-height: 1.4; 156 | padding: 2%; 157 | } 158 | 159 | .form-table .pure-setting-switch { 160 | display: inline-block; 161 | height: 18px; 162 | width: 42px; 163 | border: 1px solid #cfd6e5; 164 | border-radius: 9px; 165 | background: #fff; 166 | position: relative; 167 | 168 | i { 169 | position: absolute; 170 | top: 2px; 171 | left: 2px; 172 | width: 12px; 173 | height: 12px; 174 | border-radius: 12px; 175 | border: 1px solid #cfd6e5; 176 | transition: all 0.3s ease-out; 177 | animation: loader-spinner 400ms linear 1; 178 | } 179 | 180 | &.active { 181 | i { 182 | left: 26px; 183 | &::after { 184 | content: ''; 185 | position: absolute; 186 | width: 12px; 187 | height: 12px; 188 | border-radius: 12px; 189 | border: 1px solid #0074a2; 190 | background-color: #0074a2; 191 | left: -1px; 192 | top: -1px; 193 | animation: loader-spinner 400ms linear 1; 194 | } 195 | } 196 | } 197 | } 198 | 199 | @keyframes loader-spinner { 200 | 0% { 201 | transform: scale(0); 202 | } 203 | 204 | 80% { 205 | transform: scale(1.2); 206 | } 207 | 208 | 100% { 209 | transform: scale(1); 210 | } 211 | } 212 | 213 | @keyframes progress-spinner { 214 | 0% { 215 | transform: rotate(360deg); 216 | } 217 | 218 | 100% { 219 | transform: rotate(0deg); 220 | } 221 | } 222 | 223 | .pure-save { 224 | padding-top: 60px; 225 | display: flex; 226 | align-items: center; 227 | } 228 | 229 | .button--save { 230 | color: rgb(255, 255, 255); 231 | background-color: #737f99; 232 | padding: 10px 20px; 233 | text-decoration: none; 234 | line-height: 1.4; 235 | text-align: center; 236 | font-size: 16px; 237 | cursor: pointer; 238 | transition: all 0.3s linear; 239 | border-radius: 3px; 240 | 241 | &:hover { 242 | background: #455473; 243 | } 244 | } 245 | 246 | .pure-docs { 247 | display: flex; 248 | padding-bottom: 10px; 249 | align-items: center; 250 | } 251 | -------------------------------------------------------------------------------- /scss/components/_comment.scss: -------------------------------------------------------------------------------- 1 | .hComment { 2 | &--area { 3 | padding-top: 10px; 4 | } 5 | 6 | &--item { 7 | &.depth-1 { 8 | border-bottom: 1px solid var(--hera-border-color-light); 9 | 10 | &:last-child { 11 | border-bottom: 0; 12 | } 13 | } 14 | } 15 | 16 | &--placeholder { 17 | text-align: center; 18 | padding: 50px 0; 19 | color: var(--hera-text-light); 20 | } 21 | 22 | &--list { 23 | border-top: 1px solid var(--hera-border-color-light); 24 | list-style: none; 25 | padding-top: 10px; 26 | } 27 | 28 | &--title { 29 | padding-top: 15px; 30 | font-size: 18px; 31 | font-weight: bold; 32 | margin-bottom: 10px; 33 | display: flex; 34 | align-items: center; 35 | 36 | svg { 37 | width: 24px; 38 | height: 24px; 39 | margin-right: 5px; 40 | position: relative; 41 | transform: translate3d(0, 1px, 0); 42 | fill: var(--hera-text-color); 43 | } 44 | } 45 | 46 | &--body { 47 | padding: 25px 0; 48 | 49 | --hera-comment-avatar-size: 42px; 50 | --hera-comment-fresh-start-color: rgba(255, 255, 255, 1); 51 | --hera-comment-fresh-end-color: rgba(255, 254, 224, 1); 52 | 53 | @media (prefers-color-scheme: dark) { 54 | .auto & { 55 | --hera-comment-fresh-start-color: #1e1e1e; 56 | --hera-comment-fresh-end-color: rgba(0, 0, 0, 1); 57 | } 58 | } 59 | 60 | .dark & { 61 | --hera-comment-fresh-start-color: #1e1e1e; 62 | --hera-comment-fresh-end-color: rgba(0, 0, 0, 1); 63 | } 64 | 65 | &__fresh { 66 | animation: comment--fresh 1.5s ease-in-out infinite alternate; 67 | border-radius: 5px; 68 | } 69 | 70 | @media screen and (max-width: 768px) { 71 | padding: 12px 0; 72 | --hera-comment-avatar-size: 32px; 73 | } 74 | } 75 | 76 | &--avatar { 77 | flex: 0 0 auto; 78 | margin-right: 10px; 79 | display: flex; 80 | } 81 | 82 | &--author { 83 | margin-left: 5px; 84 | font-size: 12px; 85 | color: var(--hera-background-white); 86 | background-color: var(--hera-main-color); 87 | line-height: 1.1; 88 | padding: 2px 5px; 89 | border-radius: 3px; 90 | } 91 | 92 | &--meta { 93 | display: flex; 94 | align-items: center; 95 | flex: 1 1 auto; 96 | font-size: 14px; 97 | 98 | .author--icon { 99 | --fill: rgb(0, 149, 246); 100 | --height: 14px; 101 | --width: 14px; 102 | fill: var(--fill); 103 | height: var(--height); 104 | width: var(--width); 105 | margin-left: 4px; 106 | } 107 | 108 | .comment-reply-link { 109 | display: flex; 110 | align-items: center; 111 | cursor: pointer; 112 | margin-left: 8px; 113 | 114 | svg { 115 | fill: var(--hera-text-gray); 116 | width: 14px; 117 | height: 14px; 118 | } 119 | 120 | &:hover { 121 | svg { 122 | fill: var(--hera-hover-color); 123 | } 124 | } 125 | } 126 | 127 | a { 128 | color: var(--hera-main-color); 129 | 130 | &:hover { 131 | color: var(--hera-hover-color); 132 | text-decoration: underline; 133 | } 134 | } 135 | } 136 | 137 | &--time { 138 | color: var(--hera-text-light); 139 | margin-left: auto; 140 | font-size: 12px; 141 | } 142 | 143 | &--header { 144 | display: flex; 145 | align-items: center; 146 | margin-bottom: 10px; 147 | color: var(--hera-text-light); 148 | 149 | .avatar { 150 | width: var(--hera-comment-avatar-size); 151 | height: var(--hera-comment-avatar-size); 152 | border-radius: 50%; 153 | } 154 | } 155 | 156 | &--content { 157 | padding-left: 10px; 158 | color: var(--hera-text-light); 159 | 160 | @media screen and (max-width: 768px) { 161 | font-size: 14px; 162 | } 163 | 164 | a { 165 | text-decoration: underline; 166 | &:hover { 167 | color: var(--hera-hover-color); 168 | } 169 | } 170 | } 171 | 172 | &--parent { 173 | margin-right: 5px; 174 | color: var(--hera-main-color); 175 | text-decoration: none !important; 176 | display: inline-flex; 177 | align-items: center; 178 | 179 | &:hover { 180 | color: var(--hera-hover-color); 181 | text-decoration: underline; 182 | } 183 | 184 | .friend--icon { 185 | margin-left: 5px; 186 | width: 16px; 187 | height: 16px; 188 | } 189 | } 190 | } 191 | 192 | .children { 193 | margin-left: 0px; 194 | padding-bottom: 10px; 195 | 196 | .hComment--body { 197 | border-bottom: 0; 198 | padding: 15px 0; 199 | 200 | --hera-comment-avatar-size: 32px; 201 | 202 | @media screen and (max-width: 768px) { 203 | padding: 10px 0; 204 | --hera-comment-avatar-size: 24px; 205 | } 206 | } 207 | 208 | .hComment--content { 209 | font-size: 14px; 210 | 211 | @media screen and (max-width: 768px) { 212 | font-size: 12px; 213 | } 214 | } 215 | 216 | .depth-1 > & { 217 | margin-left: 50px; 218 | 219 | @media screen and (max-width: 768px) { 220 | margin-left: 25px; 221 | } 222 | } 223 | } 224 | 225 | .pingback { 226 | padding: 25px 0; 227 | border-bottom: 1px solid var(--hera-border-color-light); 228 | 229 | &:last-child { 230 | border-bottom: 0; 231 | } 232 | 233 | .pingback-content { 234 | display: flex; 235 | align-items: center; 236 | font-size: 14px; 237 | color: var(--hera-text-light); 238 | 239 | svg { 240 | fill: currentColor; 241 | margin-right: 6px; 242 | } 243 | 244 | a { 245 | &:hover { 246 | color: var(--hera-hover-color); 247 | text-decoration: underline; 248 | } 249 | } 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /scss/templates/_article.scss: -------------------------------------------------------------------------------- 1 | .hArticle { 2 | --hera-article-hero-font-size: 28px; 3 | 4 | @media screen and (max-width: 768px) { 5 | --hera-article-hero-font-size: 24px; 6 | } 7 | 8 | &--headline { 9 | font-size: var(--hera-article-hero-font-size); 10 | margin-top: 0; 11 | line-height: 1.3; 12 | margin-bottom: 0px; 13 | font-weight: bold; 14 | 15 | & + .hArticle--meta { 16 | margin-top: 10px; 17 | } 18 | } 19 | 20 | &--toc { 21 | background-color: var(--hera-background-gray-lightest); 22 | padding: 12px 15px; 23 | border-radius: 10px; 24 | font-size: var(--hera-text-size-small); 25 | margin-bottom: 15px; 26 | color: var(--hera-text-light); 27 | line-height: 1.4 !important; 28 | 29 | summary { 30 | cursor: pointer; 31 | margin-bottom: 5px; 32 | } 33 | 34 | ul { 35 | margin-bottom: 0 !important; 36 | padding-left: 10px !important; 37 | 38 | li { 39 | margin-bottom: 0 !important; 40 | margin-left: 20px !important; 41 | 42 | a { 43 | color: inherit; 44 | } 45 | 46 | &::before { 47 | padding-right: 6px !important; 48 | } 49 | } 50 | } 51 | 52 | a { 53 | box-shadow: none !important; 54 | text-decoration: none; 55 | 56 | &:hover { 57 | color: var(--hera-hover-color); 58 | } 59 | } 60 | } 61 | 62 | &--body { 63 | margin-bottom: 15px; 64 | } 65 | 66 | &--subtitle { 67 | font-size: 22px; 68 | color: var(--hera-text-gray-lightest); 69 | line-height: 1.2; 70 | margin-bottom: 10px; 71 | } 72 | 73 | &--meta { 74 | font-size: 14px; 75 | color: var(--hera-text-gray); 76 | line-height: 1.6; 77 | display: flex; 78 | align-items: center; 79 | margin-bottom: 10px; 80 | flex-wrap: wrap; 81 | 82 | @media screen and (max-width: 768px) { 83 | font-size: 12px; 84 | } 85 | 86 | .author { 87 | display: flex; 88 | align-items: center; 89 | margin-right: 10px; 90 | color: var(--hera-text-color); 91 | --hera-article-avatar-size: 30px; 92 | 93 | &:hover { 94 | text-decoration: underline; 95 | } 96 | 97 | .avatar { 98 | width: var(--hera-article-avatar-size); 99 | height: var(--hera-article-avatar-size); 100 | border-radius: 50%; 101 | margin-right: 10px; 102 | } 103 | } 104 | } 105 | 106 | &--subline { 107 | font-size: 20px; 108 | color: var(--hera-text-gray-lightest); 109 | line-height: 1.3; 110 | margin-bottom: 5px; 111 | } 112 | 113 | &--header { 114 | margin-bottom: 15px; 115 | padding-top: 25px; 116 | 117 | @media screen and (max-width: 768px) { 118 | padding-top: 10px; 119 | } 120 | } 121 | 122 | &--tags { 123 | padding: 20px 0; 124 | display: flex; 125 | align-items: center; 126 | flex-wrap: wrap; 127 | 128 | a { 129 | font-size: 14px; 130 | color: var(--hera-text-gray); 131 | margin-right: 5px; 132 | background-color: var(--hera-background-gray); 133 | padding: 3px 20px; 134 | border-radius: 999rem; 135 | &:hover { 136 | color: var(--hera-hover-color); 137 | } 138 | } 139 | } 140 | 141 | &--actions { 142 | display: flex; 143 | align-items: center; 144 | justify-content: center; 145 | padding: 20px 0 0px; 146 | 147 | .button--like { 148 | svg { 149 | fill: var(--hera-text-gray); 150 | } 151 | 152 | &:hover, 153 | &.is-active { 154 | svg { 155 | fill: var(--hera-hover-color); 156 | } 157 | } 158 | } 159 | } 160 | 161 | &--share { 162 | cursor: pointer; 163 | display: flex; 164 | align-items: center; 165 | justify-content: center; 166 | padding: 15px 0 15px; 167 | font-size: 14px; 168 | color: var(--hera-text-gray); 169 | line-height: 1.2; 170 | 171 | .link { 172 | margin-left: 5px; 173 | border-bottom: 1px dotted; 174 | white-space: nowrap; 175 | overflow: hidden; 176 | text-overflow: ellipsis; 177 | } 178 | 179 | svg { 180 | height: 16px; 181 | width: 16px; 182 | fill: var(--hera-text-gray); 183 | margin-right: 4px; 184 | flex: 0 0 auto; 185 | } 186 | 187 | .text { 188 | flex: 0 0 auto; 189 | } 190 | } 191 | } 192 | 193 | .status--icon { 194 | display: flex; 195 | align-items: center; 196 | margin-bottom: 5px; 197 | 198 | svg { 199 | fill: var(--hera-main-color); 200 | height: 28px; 201 | width: 28px; 202 | } 203 | } 204 | 205 | .link2comment { 206 | display: flex; 207 | align-items: center; 208 | font-size: 14px; 209 | color: var(--hera-text-gray); 210 | margin-left: auto; 211 | 212 | svg { 213 | fill: var(--hera-text-gray); 214 | margin-right: 5px; 215 | } 216 | 217 | &:hover { 218 | color: var(--hera-hover-color); 219 | } 220 | } 221 | 222 | .button--like { 223 | border: 0; 224 | background-color: rgba(0, 0, 0, 0); 225 | cursor: pointer; 226 | 227 | &.is-active { 228 | svg { 229 | fill: var(--hera-main-color); 230 | } 231 | 232 | .icon--active { 233 | display: block; 234 | } 235 | 236 | .icon--default { 237 | display: none; 238 | } 239 | } 240 | 241 | .icon--active { 242 | display: none; 243 | } 244 | 245 | .icon--block { 246 | display: none; 247 | } 248 | } 249 | 250 | .status--archiveLink { 251 | padding: 10px 0; 252 | display: flex; 253 | a { 254 | background-color: var(--hera-background-gray-lightest); 255 | border-radius: 999rem; 256 | color: var(--hera-text-gray); 257 | padding: 10px 20px; 258 | line-height: 1.2; 259 | font-size: 14px; 260 | &:hover { 261 | color: var(--hera-hover-color); 262 | background-color: var(--hera-background-gray); 263 | } 264 | } 265 | } 266 | -------------------------------------------------------------------------------- /scss/base/_grap.scss: -------------------------------------------------------------------------------- 1 | .hGraph { 2 | color: var(--hera-text-color); 3 | word-break: break-all; 4 | padding-top: 5px; 5 | 6 | table { 7 | border: 1px solid var(--hera-border-color); 8 | border-collapse: collapse; 9 | margin-bottom: 20px; 10 | margin-left: auto; 11 | margin-right: auto; 12 | font-size: 12px; 13 | color: var(--hera-text-light); 14 | 15 | thead { 16 | tr { 17 | background-color: #f5f5f5; 18 | } 19 | } 20 | 21 | tr { 22 | background-color: #fff; 23 | 24 | &:hover { 25 | & > td { 26 | background-color: #f5f5f5; 27 | background-clip: padding-box; 28 | } 29 | } 30 | } 31 | 32 | td, 33 | th { 34 | border-bottom: 1px solid var(--hera-border-color); 35 | border-right: 1px solid var(--hera-border-color); 36 | transition: background-color 0.25s ease; 37 | height: 40px; 38 | min-width: 0; 39 | box-sizing: border-box; 40 | text-overflow: ellipsis; 41 | vertical-align: middle; 42 | position: relative; 43 | margin: 0; 44 | padding: 0 10px; 45 | } 46 | } 47 | 48 | code { 49 | background-color: var(--hera-background-gray); 50 | padding: 2px 5px; 51 | border-radius: 4px; 52 | font-size: 14px; 53 | } 54 | 55 | pre { 56 | word-break: break-all; 57 | white-space: break-spaces; 58 | background-color: var(--hera-background-gray); 59 | padding: 10px 15px; 60 | border-radius: 5px; 61 | font-size: 14px; 62 | color: var(--hera-text-light); 63 | overflow-x: auto; 64 | } 65 | 66 | p { 67 | margin-bottom: 25px; 68 | hyphens: auto; 69 | 70 | &:last-child { 71 | margin-bottom: 0; 72 | } 73 | 74 | @media (max-width: 820px) { 75 | margin-bottom: 15px; 76 | } 77 | } 78 | 79 | blockquote { 80 | color: var(--hera-text-light); 81 | border-color: var(--hera-border-color-light); 82 | margin-left: -3.5%; 83 | border-left: 3px solid #000; 84 | margin-bottom: 35px; 85 | padding: 10px 30px; 86 | 87 | p { 88 | &:last-child { 89 | margin-bottom: 0; 90 | } 91 | } 92 | 93 | @media (max-width: 820px) { 94 | margin-left: 0; 95 | margin-right: 0; 96 | padding-top: 20px; 97 | background-position: left 10px top 0; 98 | margin-bottom: 15px; 99 | } 100 | } 101 | 102 | a { 103 | text-decoration: underline; 104 | transition: 0.2s; 105 | color: var(--hera-main-color); 106 | 107 | &[href*='jpeg'], 108 | &[href*='JPEG'], 109 | &[href*='jpg'], 110 | &[href*='png'], 111 | &[href*='PNG'], 112 | &[href*='JPG'], 113 | &[href*='gif'] { 114 | box-shadow: none; 115 | &:hover { 116 | box-shadow: none; 117 | } 118 | } 119 | 120 | &:hover { 121 | color: var(--hera-hover-color); 122 | text-decoration: underline; 123 | } 124 | } 125 | 126 | h2, 127 | h3 { 128 | margin-bottom: 15px; 129 | margin-top: 30px; 130 | font-size: 22px; 131 | font-weight: 700; 132 | color: var(--hera-text-gray); 133 | line-height: 1.3; 134 | position: relative; 135 | 136 | @media screen and (max-width: 768px) { 137 | font-size: 20px; 138 | } 139 | 140 | & + h4 { 141 | margin-top: 15px; 142 | } 143 | 144 | &:before { 145 | content: ''; 146 | position: absolute; 147 | top: 0.5em; 148 | bottom: -2px; 149 | left: -10px; 150 | width: 3.4em; 151 | background: var(--hera-hover-color); 152 | opacity: 0.3; 153 | transform: skew(-35deg); 154 | transition: opacity 0.2s ease; 155 | border-radius: 3px 8px 10px 6px; 156 | } 157 | 158 | &:target { 159 | color: var(--hera-hover-color); 160 | } 161 | } 162 | 163 | h4 { 164 | font-size: 18px; 165 | font-weight: 400; 166 | color: var(--hera-text-gray-lightest); 167 | margin-bottom: 10px; 168 | margin-top: 30px; 169 | line-height: 1.3; 170 | } 171 | 172 | hr { 173 | border: 0; 174 | text-align: center; 175 | font-size: 32px; 176 | height: auto; 177 | margin-top: 0; 178 | margin-bottom: 15px; 179 | 180 | &:before { 181 | content: '...'; 182 | letter-spacing: 0.6em; 183 | text-indent: 0.6em; 184 | } 185 | } 186 | 187 | b, 188 | strong { 189 | font-weight: 700; 190 | } 191 | 192 | ul, 193 | ol { 194 | margin-bottom: 25px; 195 | padding-left: 15px; 196 | 197 | @media (max-width: 820px) { 198 | padding-left: 0px; 199 | margin-bottom: 15px; 200 | } 201 | 202 | li { 203 | margin-left: 25px; 204 | margin-bottom: 5px; 205 | 206 | @media (max-width: 820px) { 207 | line-height: 1.6; 208 | } 209 | 210 | &:before { 211 | content: '•'; 212 | box-sizing: border-box; 213 | font-size: 18px; 214 | margin-left: -35px; 215 | padding-right: 10px; 216 | display: inline-block; 217 | text-align: right; 218 | width: 32px; 219 | color: var(--hera-hover-color); 220 | } 221 | } 222 | } 223 | 224 | ol { 225 | counter-reset: item; 226 | 227 | & > li:before { 228 | content: counter(item); 229 | counter-increment: item; 230 | font-size: 12px; 231 | font-weight: 700; 232 | align-items: center; 233 | background-color: rgba(195, 218, 254, 0.43); 234 | border: 0 solid #999; 235 | border-radius: 9999px; 236 | box-sizing: border-box; 237 | color: var(--hera-hover-color); 238 | display: inline-flex; 239 | height: 19px; 240 | justify-content: center; 241 | margin-left: -24px !important; 242 | margin-right: 10px; 243 | margin-top: 4px; 244 | transform: translateY(-1px); 245 | width: 30px; 246 | padding: 0; 247 | } 248 | } 249 | } 250 | -------------------------------------------------------------------------------- /ts/modules/action.ts: -------------------------------------------------------------------------------- 1 | class heraAction extends heraBase { 2 | like_btn: any; 3 | selctor: string = '.like-btn'; 4 | is_single: boolean = false; 5 | post_id: number = 0; 6 | is_archive: boolean = false; 7 | constructor() { 8 | super(); 9 | this.is_single = this.obvInit.is_single; 10 | this.post_id = this.obvInit.post_id; 11 | this.is_archive = this.obvInit.is_archive; 12 | this.like_btn = document.querySelector(this.selctor); 13 | 14 | if (this.like_btn) { 15 | this.like_btn.addEventListener('click', () => { 16 | this.handleLike(); 17 | }); 18 | if (this.getCookie('like_' + this.post_id)) { 19 | this.like_btn.classList.add('is-active'); 20 | } 21 | } 22 | 23 | const theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : 'auto'; 24 | const html = `
    25 | 26 | 29 | 30 | 31 | 32 | 33 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 51 | 52 | 53 | 54 | 55 | 56 |
    `; 57 | if (this.darkmode) { 58 | document.querySelector('.hFooter')!.insertAdjacentHTML('beforeend', html); 59 | } 60 | 61 | document.querySelectorAll('.hThemeSwitcher span').forEach((item) => { 62 | item.addEventListener('click', () => { 63 | if (item.classList.contains('is-active')) return; 64 | document.querySelectorAll('.hThemeSwitcher span').forEach((item) => { 65 | item.classList.remove('is-active'); 66 | }); 67 | const actionValue = (item as HTMLElement).dataset.actionValue; 68 | if (actionValue == 'dark') { 69 | localStorage.setItem('theme', 'dark'); 70 | document.querySelector('body')!.classList.remove('auto'); 71 | document.querySelector('body')!.classList.add('dark'); 72 | item.classList.add('is-active'); 73 | } else if (actionValue == 'light') { 74 | localStorage.setItem('theme', 'light'); 75 | document.querySelector('body')!.classList.remove('auto'); 76 | document.querySelector('body')!.classList.remove('dark'); 77 | item.classList.add('is-active'); 78 | } else if (actionValue == 'auto') { 79 | localStorage.setItem('theme', 'auto'); 80 | document.querySelector('body')!.classList.remove('dark'); 81 | document.querySelector('body')!.classList.add('auto'); 82 | item.classList.add('is-active'); 83 | } 84 | }); 85 | }); 86 | 87 | if (document.querySelector('.hArticle--share')) { 88 | document.querySelector('.hArticle--share')!.addEventListener('click', () => { 89 | navigator.clipboard.writeText(document.location.href).then(() => { 90 | this.showNotice(this.obvInit.copy_success_text, 'success'); 91 | }); 92 | }); 93 | } 94 | 95 | if (this.is_single) { 96 | this.trackPostView(); 97 | } 98 | 99 | if (this.is_archive) { 100 | this.trackArchiveView(); 101 | } 102 | 103 | console.log(`theme version: ${this.VERSION} init success!`); 104 | } 105 | 106 | trackPostView() { 107 | const id = this.obvInit.post_id; 108 | 109 | const url = this.obvInit.restfulBase + 'hera/v1/view?id=' + id; 110 | fetch(url, { 111 | headers: { 112 | 'X-WP-Nonce': this.obvInit.nonce, 113 | 'Content-Type': 'application/json', 114 | }, 115 | }); 116 | } 117 | 118 | trackArchiveView() { 119 | if (document.querySelector('.archive-header')) { 120 | const id = this.obvInit.archive_id; 121 | fetch(`${this.obvInit.restfulBase}hera/v1/archive/${id}`, { 122 | method: 'POST', 123 | headers: { 124 | 'X-WP-Nonce': this.obvInit.nonce, 125 | 'Content-Type': 'application/json', 126 | }, 127 | }); 128 | } 129 | } 130 | 131 | handleLike() { 132 | if (this.getCookie('like_' + this.post_id)) { 133 | return this.showNotice(this.obvInit.like_success_text, 'success'); 134 | } 135 | const url = this.obvInit.restfulBase + 'hera/v1/like'; 136 | fetch(url, { 137 | method: 'POST', 138 | body: JSON.stringify({ 139 | id: this.post_id, 140 | }), 141 | headers: { 142 | 'X-WP-Nonce': this.obvInit.nonce, 143 | 'Content-Type': 'application/json', 144 | }, 145 | }) 146 | .then((response) => { 147 | return response.json(); 148 | }) 149 | .then((data) => { 150 | this.showNotice(this.obvInit.like_success_text, 'success'); 151 | this.setCookie('like_' + this.post_id, '1', 1); 152 | }); 153 | this.like_btn.classList.add('is-active'); 154 | } 155 | 156 | refresh() {} 157 | } 158 | 159 | new heraAction(); 160 | -------------------------------------------------------------------------------- /scss/base/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type='button'], 199 | [type='reset'], 200 | [type='submit'] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type='button']::-moz-focus-inner, 210 | [type='reset']::-moz-focus-inner, 211 | [type='submit']::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type='button']:-moz-focusring, 222 | [type='reset']:-moz-focusring, 223 | [type='submit']:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type='checkbox'], 273 | [type='radio'] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type='number']::-webkit-inner-spin-button, 283 | [type='number']::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type='search'] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type='search']::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | -------------------------------------------------------------------------------- /single.php: -------------------------------------------------------------------------------- 1 | 13 | 15 |
    16 | 20 |
    21 |
    22 |

    23 | 24 |

    ID, '_subtitle', true); ?>

    25 | 26 |
    27 | 31 | 32 | 33 | 34 | 35 | '); ?> 36 | '); ?> 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
    46 |
    47 |
    48 | 49 |
    50 | 53 |
    54 | 55 | 56 | 57 |
    58 | 59 | '
    ', 61 | 'after' => '
    ', 62 | 'pagelink' => '%', 63 | 'separator' => ', ', 64 | )); ?> 65 | get_setting('update_time')) : ?> 66 |
    67 | 68 | 69 |
    70 | 71 | get_setting('postlike')) : ?> 72 |
    73 | 81 |
    82 | 83 | get_setting('show_copylink')) : ?> 84 | 92 | 93 |
    94 |
    95 | get_setting('bio')) get_template_part('template-parts/author', 'card'); 96 | if ($heraSetting->get_setting('post_navigation')) get_template_part('template-parts/post', 'navigation'); ?> 97 | 100 | get_setting('related')) get_template_part('template-parts/single', 'related'); 101 | endwhile; 102 | endif; ?> 103 | get_setting('back2home')) : ?> 104 |
    105 | 106 |
    107 | 108 |
    109 | -------------------------------------------------------------------------------- /ts/modules/zoom.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | findParent(t: any, e: any, n: any): any; 3 | } 4 | 5 | window.findParent = function (t: any, e: any, n: any) { 6 | do { 7 | if (e(t)) return t; 8 | if (n && t == n) return false; 9 | } while ((t = t.parentNode)); 10 | return false; 11 | }; 12 | 13 | class imgZoom { 14 | currentIndex: number; 15 | images: any; 16 | constructor() { 17 | this.currentIndex = 0; 18 | this.images = []; 19 | // this.init(); 20 | this.getZoomImages(); 21 | window.addEventListener('resize', () => { 22 | if (document.querySelector('.overlay')) { 23 | this.loadImage(this.images[this.currentIndex]); 24 | } 25 | }); 26 | } 27 | 28 | getZoomImages() { 29 | const images = document.querySelectorAll('[data-action="imageZoomIn"]'); 30 | const imageArray = Array.from(images); 31 | this.images = [...imageArray] 32 | .map((image) => image.getAttribute('href')) 33 | .filter((href): href is string => href !== null); 34 | images.forEach((image) => { 35 | image.addEventListener('click', (e) => { 36 | e.preventDefault(); 37 | const url = image.getAttribute('href'); 38 | if (url) this.showOverlay(url); 39 | }); 40 | }); 41 | } 42 | 43 | renderNav() { 44 | const nav = `${this.currentIndex + 1}/${this.images.length}`; 45 | const navElement = document.querySelector('.image--nav'); 46 | if (navElement) { 47 | navElement.innerHTML = nav; 48 | } 49 | if (this.currentIndex === 0) { 50 | document.querySelector('.mfp-arrow-left')?.classList.add('disabled'); 51 | } else { 52 | document.querySelector('.mfp-arrow-left')?.classList.remove('disabled'); 53 | } 54 | if (this.currentIndex === this.images.length - 1) { 55 | document.querySelector('.mfp-arrow-right')?.classList.add('disabled'); 56 | } else { 57 | document.querySelector('.mfp-arrow-right')?.classList.remove('disabled'); 58 | } 59 | } 60 | 61 | prevImage() { 62 | if (this.currentIndex === 0) { 63 | return; 64 | } 65 | this.currentIndex = this.currentIndex - 1; 66 | this.loadImage(this.images[this.currentIndex]); 67 | this.renderNav(); 68 | } 69 | 70 | nextImage() { 71 | if (this.currentIndex === this.images.length - 1) { 72 | return; 73 | } 74 | this.currentIndex = this.currentIndex + 1; 75 | this.loadImage(this.images[this.currentIndex]); 76 | this.renderNav(); 77 | } 78 | 79 | showOverlay(url: string) { 80 | const self = this; 81 | let currentIndex = this.images.indexOf(url); 82 | this.currentIndex = currentIndex; 83 | let nav = 84 | this.images.length > 0 85 | ? `
    ${currentIndex + 1}/${ 86 | this.images.length 87 | }
    ` 92 | : ''; 93 | let html = `
    ${nav}
    `; 94 | const bodyElement = document.querySelector('body'); 95 | if (bodyElement) { 96 | bodyElement.insertAdjacentHTML('beforeend', html); 97 | bodyElement.classList.add('u-overflowYHidden'); 98 | } 99 | this.loadImage(url); 100 | console.log(self.currentIndex); 101 | document.querySelector('.zoomImgClose')?.addEventListener('click', () => { 102 | self.overlayRemove(); 103 | }); 104 | document.querySelector('.mfp-arrow-right')?.addEventListener('click', () => { 105 | self.nextImage(); 106 | }); 107 | document.querySelector('.mfp-arrow-left')?.addEventListener('click', () => { 108 | self.prevImage(); 109 | }); 110 | } 111 | 112 | loadImage(o: any) { 113 | let s = new Image(); 114 | const rippleElement = document.querySelector('.lds-ripple'); 115 | if (rippleElement) { 116 | (rippleElement as HTMLElement).style.display = 'inline-block'; 117 | } 118 | s.onload = () => { 119 | var t = s.width, 120 | e = s.height, 121 | n = window.innerHeight, 122 | a = window.innerWidth - 80; 123 | a < t 124 | ? ((e *= a / t), (t = a), n < e && ((t *= n / e), (e = n))) 125 | : n < e && ((t *= n / e), (e = n), a < t && ((e *= a / t), (t = a))); 126 | const i = document.querySelector('.overlay-image') as HTMLPreElement; 127 | i.setAttribute('src', o), (i.style.width = t + 'px'), (i.style.height = e + 'px'); 128 | const overlayImgWrap = document.querySelector('.overlay-img-wrap'); 129 | if (overlayImgWrap) { 130 | overlayImgWrap.classList.add('is-finieshed'); 131 | } 132 | const rippleElement = document.querySelector('.lds-ripple'); 133 | if (rippleElement) { 134 | (rippleElement as HTMLElement).style.display = 'none'; 135 | } 136 | }; 137 | s.src = o; 138 | } 139 | 140 | overlayRemove() { 141 | this.remove(document.querySelector('.overlay')); 142 | document.querySelector('body')?.classList.remove('is-zoomActive'); 143 | document.querySelector('body')?.classList.remove('u-overflowYHidden'); 144 | // window.removeEventListener('scroll', I); 145 | // window.removeEventListener('keyup', L); 146 | } 147 | 148 | remove(t: any) { 149 | var e = t.parentNode; 150 | e && e.removeChild(t); 151 | } 152 | } 153 | 154 | new imgZoom(); 155 | -------------------------------------------------------------------------------- /modules/comment.php: -------------------------------------------------------------------------------- 1 | get_setting('show_parent')) 12 | add_filter('get_comment_text', array($this, 'hack_get_comment_text'), 0, 2); 13 | if ($heraSetting->get_setting('disable_comment_link')) 14 | add_filter('get_comment_author_link', array($this, 'get_comment_author_link_hack'), 10, 3); 15 | if ($heraSetting->get_setting('friend_icon') && !is_admin()) 16 | add_filter('get_comment_author', array($this, 'show_friend_icon'), 10, 3); 17 | } 18 | 19 | function is_friend($url = '') 20 | { 21 | if (empty($url)) { 22 | return false; 23 | } 24 | $urls = get_bookmarks(); 25 | foreach ($urls as $bookmark) { 26 | // check if the url is contained in the bookmark 27 | if (strpos($bookmark->link_url, $url) !== false) { 28 | return true; 29 | } 30 | } 31 | } 32 | 33 | function show_friend_icon($comment_author, $comment_id, $comment) 34 | { 35 | $comment_author_url = $comment->comment_author_url; 36 | // get domain name 37 | $comment_author_url = parse_url($comment_author_url, PHP_URL_HOST); 38 | 39 | return $this->is_friend($comment_author_url) ? $comment_author . '' : $comment_author; 40 | } 41 | 42 | function get_comment_author_link_hack($comment_author_link, $comment_author, $comment_id) 43 | { 44 | return $comment_author; 45 | } 46 | 47 | function register_routes() 48 | { 49 | register_rest_route('hera/v1', '/comment', array( 50 | 'methods' => 'POST', 51 | 'callback' => array($this, 'handle_coment_post'), 52 | 'permission_callback' => '__return_true', 53 | )); 54 | 55 | register_rest_route('hera/v1', '/view', array( 56 | 'methods' => 'get', 57 | 'callback' => array($this, 'handle_post_view'), 58 | 'permission_callback' => '__return_true', 59 | )); 60 | 61 | register_rest_route('hera/v1', '/like', array( 62 | 'methods' => 'POST', 63 | 'callback' => array($this, 'handle_post_like'), 64 | 'permission_callback' => '__return_true', 65 | )); 66 | 67 | register_rest_route('hera/v1', '/archive/(?P\d+)', array( 68 | 'methods' => 'POST', 69 | 'callback' => array($this, 'handle_archive_view'), 70 | 'permission_callback' => '__return_true', 71 | )); 72 | } 73 | 74 | function handle_archive_view($request) 75 | { 76 | $term = get_term($request['id']); 77 | if (is_wp_error($term)) { 78 | return [ 79 | 'code' => 500, 80 | 'message' => $term->get_error_message() 81 | ]; 82 | } 83 | $views = (int)get_term_meta($request['id'], HERA_ARCHIVE_VIEW_KEY, true); 84 | $views++; 85 | update_term_meta($request['id'], HERA_ARCHIVE_VIEW_KEY, $views); 86 | return [ 87 | 'code' => 200, 88 | 'message' => __('Success', 'Hera'), 89 | 'data' => $views 90 | ]; 91 | } 92 | 93 | 94 | function hack_get_comment_text($comment_text, $comment) 95 | { 96 | if (!is_comment_feed() && $comment->comment_parent) { 97 | $parent = get_comment($comment->comment_parent); 98 | if ($parent) { 99 | $parent_link = esc_url(get_comment_link($parent)); 100 | $name = $parent->comment_author; 101 | 102 | $comment_text = '@' . $name . '' . $comment_text; 103 | } 104 | } 105 | return $comment_text; 106 | } 107 | 108 | function handle_post_view($data) 109 | { 110 | $post_id = $data['id']; 111 | $post_views = (int)get_post_meta($post_id, HERA_POST_VIEW_KEY, true); 112 | $post_views++; 113 | update_post_meta($post_id, HERA_POST_VIEW_KEY, $post_views); 114 | return [ 115 | 'code' => 200, 116 | 'message' => __('Success', 'Hera'), 117 | 'data' => $post_views 118 | ]; 119 | } 120 | 121 | function handle_post_like($request) 122 | { 123 | $post_id = $request['id']; 124 | $post_views = (int)get_post_meta($post_id, HERA_POST_LIKE_KEY, true); 125 | $post_views++; 126 | update_post_meta($post_id, HERA_POST_LIKE_KEY, $post_views); 127 | return [ 128 | 'code' => 200, 129 | 'message' => __('Success', 'Hera'), 130 | 'data' => $post_views 131 | ]; 132 | } 133 | 134 | function handle_coment_post($request) 135 | { 136 | $comment = wp_handle_comment_submission(wp_unslash($request)); 137 | if (is_wp_error($comment)) { 138 | $data = $comment->get_error_data(); 139 | if (!empty($data)) { 140 | return [ 141 | 'code' => 500, 142 | 'message' => $data 143 | ]; 144 | } else { 145 | return [ 146 | 'code' => 500 147 | ]; 148 | } 149 | } 150 | $user = wp_get_current_user(); 151 | do_action('set_comment_cookies', $comment, $user); 152 | $GLOBALS['comment'] = $comment; 153 | return [ 154 | 'code' => 200, 155 | 'message' => __('Success', 'Hera'), 156 | 'data' => [ 157 | 'author_avatar_urls' => get_avatar_url($comment->comment_author_email, array('size' => 64)), 158 | 'comment_author' => $comment->comment_author, 159 | 'comment_author_email' => $comment->comment_author_email, 160 | 'comment_author_url' => $comment->comment_author_url, 161 | 'comment_content' => get_comment_text($comment->comment_ID), 162 | 'comment_date' => date('Y-m-d', strtotime($comment->comment_date)), 163 | 'comment_date_gmt' => $comment->comment_date_gmt, 164 | 'comment_ID' => $comment->comment_ID, 165 | ] 166 | ]; 167 | } 168 | } 169 | 170 | new heraComment(); 171 | 172 | function hera_comment($comment, $args, $depth) 173 | { 174 | $GLOBALS['comment'] = $comment; 175 | switch ($comment->comment_type): 176 | case 'pingback': 177 | case 'trackback': 178 | ?> 179 |
  • id="comment-"> 180 |
    181 | 182 |
    183 | 188 |
  • itemtype="http://schema.org/Comment" data-id="" itemscope="" itemprop="comment" id="comment-"> 189 |
    190 |
    191 |
    192 | <?php echo $comment->comment_author; ?> 193 |
    194 |
    195 | 196 | user_id == $post->post_author && $heraSetting->get_setting('show_author') && !is_admin()) : ?> 197 | 198 | 199 | 200 | 201 | 202 | comment_ID . '\', \'' . $comment->comment_ID . '\', \'respond\', \'' . $post->ID . '\')">'; ?> 203 | 204 |
    205 |
    206 |
    207 | 208 |
    209 |
    210 |